How to use ESLint with the Airbnb JavaScript Style Guide

The Airbnb Style Guide is a set of guidelines for writing clean and consistent code. Since its release in 2012, he has become one of the most popular style guides for JavaScript projects.

Provides a set of guidelines for writing consistent, maintainable code by applying various style rules for indentation, comments, maximum line length, variable naming conventions, quoting, and function definitions . Setting up the Airbnb Style Guide in your JavaScript project requires the use of a linting tool such as ESLint.

Install ESLint

ESLint is an open-source JavaScript linting tool that helps developers create clean code by finding and fixing issues. You can detect code problems such as syntax errors, invalid parameters, and undefined variables. When I run ESLint I get – -repair Tags save you time by automatically identifying and fixing fixable problems in your code.

You can use ESLint to apply style guides like the Airbnb style guide.

To get started, install ESLint as a development dependency by running the following command in your terminal:

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

Next, initialize ESLint.

 npx eslint --init
 

A question about the project is displayed. When prompted:

 ? How would you like to use EsLint?
 

Choose from the following options:

 > To check syntax, find problems and enforce code style
 

Answer the following questions according to your project until you see the following prompt.

 ? How would you like to define a style for your project?
 

Then answer:

 > Use a popular style guide
 

Select Airbnb Style Guide at the next prompt.

 ? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>
 

Finally, select Yes on the following prompt to install the required dependencies.

Once the installation is complete, .eslintsrc.json A file at the root of the folder.

Customizing the Airbnb Style Guide

The Airbnb Style Guide is customizable. You can add rules or override existing rules. .eslintsrc.json configuration file.

For example, to allow up to 80 characters per line, you can add this rule to your rules section:

 {
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
} 

Run ESLint on package.json

add the script to package.json File for running ESLint.

 "scripts": {
   "lint": "eslint"
}
 

Run this command to run the lint script and check for lint errors.

 npm run lint
 

You can also add scripts to fix code issues using – repair National flag.

 "scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --fix"
  },
 

running npm run lint: fix Terminal will automatically fix any problem that a linter can fix.

Enable linting on save in VS Code

Running a script every time you lint code is tedious. Follow the steps below to enable linting on save in VS Code.

1. on the left side of the VS Code window[拡張機能]Go to tab.
2. Search for and install the ESLint extension.
3. Once the extension is installed, open the VS Code settings ([ファイル]>[設定]>[設定]or press Ctrl +,).
4. In the settings editor, search for Code Actions on Save.
5. Click “Edit in Settings.json” and change the following settings: settings.json File.

 {
 "editor.codeActionsOnSave": {
  
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}
 

This will allow the ESLint extension to automatically fix your code on save.

Advantages of using style guides

A major advantage of using a style guide like the Airbnb style guide is that you can maintain a consistent code base. This helps the team as developers can easily understand and contribute to the code base. It also helps you apply best practices and avoid common coding mistakes.