Getting Started with eslint-config-airbnb

eslint-config-airbnb is a widely-used ESLint configuration that follows the JavaScript coding standards set by Airbnb. This configuration integrates linting rules and style guidelines to help developers write clean and consistent code.

Installation

  
    npm install eslint-config-airbnb --save-dev
    npm install eslint --save-dev
  

Basic Configuration

Create an .eslintrc file in the root of your project and add the following code:

  
    {
      "extends": "airbnb"
    }
  

Useful API Explanations and Code Snippets

Overriding Default Rules

To customize the rules according to your needs, you can add a rules section in your .eslintrc file.

  
    {
      "extends": "airbnb",
      "rules": {
        "no-console": "off",
        "indent": ["error", 4],
        "max-len": ["error", { "code": 100 }]
      }
    }
  

Using ESLint with Prettier

If you want to integrate Prettier for code formatting, you can use the following configuration:

  
    npm install --save-dev eslint-config-prettier eslint-plugin-prettier

    {
      "extends": [
        "airbnb",
        "prettier"
      ],
      "plugins": [
        "prettier"
      ],
      "rules": {
        "prettier/prettier": "error"
      }
    }
  

React Specific Configuration

If you are working with React, you should include the following additional configurations:

  
    npm install eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import --save-dev

    {
      "extends": "airbnb",
      "plugins": [
        "react",
        "jsx-a11y",
        "import"
      ],
      "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
      }
    }
  

Example App with ESLint Configuration

Below is an example of a simple React application that uses the eslint-config-airbnb configuration:

  
    // .eslintrc
    {
      "extends": "airbnb",
      "rules": {
        "react/react-in-jsx-scope": "off"
      }
    }

    // App.js
    import React from 'react';

    const App = () => (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );

    export default App;
  

By integrating eslint-config-airbnb into your project, you can ensure that your JavaScript code adheres to high standards of quality and maintainability.

Hash: ed20aec8a5e530c10b075a4b33b7a2791428d23995a679d362c0a503874cc4e9