How to Set Up ESLint, Prettier, and Airbnb Style Guide in Visual Studio Code

If you’re a developer working on a project with multiple contributors, it’s essential to maintain a consistent coding style across the project. In this tutorial, we’ll set up ESLint, Prettier, and the Airbnb JavaScript style guide in Visual Studio Code, so you can easily enforce and adhere to a consistent coding style.

What is ESLint?

ESLint is a linter for JavaScript that helps identify and report problematic patterns in your code. It can catch syntax errors, unused variables, and other common issues and enforce coding standards and style preferences.

What is Prettier?

Prettier is a code formatter that automatically formats your code based on rules, ensuring that your code is always consistent and easy to read.

What is the Airbnb style guide?

The Airbnb JavaScript style guide is a set of guidelines for writing clean, consistent, and maintainable JavaScript code. It covers everything from variable naming conventions to indentation and whitespace.

Step 1: Install ESLint and Prettier

To start, open your project in Visual Studio Code and install the ESLint and Prettier extensions. You can do this by opening the Extensions panel in Visual Studio Code and searching for “ESLint” and “Prettier”.

Once you’ve installed the extensions, you must install ESLint and Prettier as dependencies in your project. You can do this by running the following commands in your terminal:

npm install eslint --save-dev
npm install prettier --save-dev

Step 2: Install the Airbnb style guide

Next, you’ll need to install the Airbnb JavaScript style guide as a dependency in your project. You can do this by running the following command in your terminal:

npx install-peerdeps --dev eslint-config-airbnb-base

Step 3: Create an ESLint configuration file

Now that you have all the necessary dependencies installed, you’ll need to create an ESLint configuration file. This file will contain the rules and settings that ESLint will use to lint your code.

Create a new file in the root of your project called “.eslintrc.json” and add the following configuration:

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

This configuration file extends the Airbnb base configuration and the Prettier configuration. It also sets up a Prettier plugin and enforces the Prettier formatting rules.

Step 4: Create a Prettier configuration file

Next, you’ll need to create a Prettier configuration file. This file will contain the specific formatting rules that Prettier will use to format your code.

Create a new file in the root of your project called “.prettierrc.json” and add the following configuration:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

This configuration file sets the semi-colon rule to false, enforces single quotes, and adds a trailing comma to objects and arrays when necessary.

Step 5: Test your Setup

After completing the setup process, testing that ESLint and Prettier are working as expected is essential. You can do this by adding a new JavaScript file to your project with some code that doesn’t comply with the Airbnb style guide and see if ESLint and Prettier can catch and fix the issues.

For example, try adding the following code to a new file:

const someFunction = () => {
  console.log('this is a message')
}

someFunction()

Unfortunately, this code violates the Airbnb style guide by using arrow function syntax instead of the function declaration syntax and single quotes instead of double quotes for the log message.

Save the file, and ESLint should automatically highlight the issues with the code in your editor. Prettier should also format the code automatically to adhere to the rules specified in the .prettierrc.json file.

By testing your setup, you can ensure that ESLint and Prettier are set up correctly and enforce the desired coding standards.

Conclusion

This tutorial taught us how to set up ESLint, Prettier, and the Airbnb style guide in Visual Studio Code. Following these steps ensures that your code adheres to a consistent style and is easy to read and maintain. Furthermore, by enforcing a consistent coding style, you can improve the quality of your code and make it easier for other developers to contribute to your project.