Setting up ESLint with AirBnB Style Guide

Show how to install ESLint and configure it to use the AirBnB style guide in a JavaScript project.

// 1. Install ESLint and Airbnb style guide packages
npm install eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev

This command installs ESLint and the necessary Airbnb packages along with their peer dependencies to the development dependencies of the project.

// 2. Initialize ESLint configuration
npx eslint --init

This command will start an interactive session to help set up the initial ESLint configuration. When prompted, choose to use a popular style guide, then select Airbnb as the style guide.

// 3. Create or edit .eslintrc.json
{
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    // Override specific rules or add additional rules here
  }
}

This is an ESLint configuration file sample. It extends the rules from the Airbnb style guide and sets up the environment. You can further customize rules by adding them to the 'rules' object.

// 4. Add ESLint script to package.json
"scripts": {
  "lint": "eslint . --ext .js,.jsx"
}

In your package.json file, add a new script that can be used to run ESLint on JavaScript and JSX files in your project folder.