ESLint, Prettier & Airbnb Setup

eslint_prettier_airbnb.md

VSCode - ESLint, Prettier & Airbnb Setup

1. Install ESLint & Prettier extensions for VSCode

Optional - Set format on save and any global prettier options

2. Install Packages

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

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

3. Create .prettierrc for any prettier rules (semicolons, quotes, etc)

4. Create .eslintrc.json file (You can generate with eslint --init if you install eslint globally)

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off"
  }
}

Reference

• ESLint Rules - https://eslint.org/docs/rules/
• Prettier Options - https://prettier.io/docs/en/options.html
• Airbnb Style Guide - https://github.com/airbnb/javascript

Are these rules still acceptable in 2023?

I asked myself as of 2025, and had to dig a little bit through the web.
Here's what I found :

1. Airbnb

Airbnb didn't have updated their config for over 3 years now, which is still using till v8 of esLint.
Therefore, it doesn't work with the latest framework version, which now use EsLint v9.

For these reason, I (and you should to) do not use the proposed version anymore

2. What to use instead?

Nowadays, your framework is coming with is own esLint configs , which may be superseded by some prettier rules.
Sadly, I could find any configs that became the new standard, I will update the answer if I do

3. Why?

My take, EsLint was never ment to be that, but became it because this was the only tool available at that time.
As we, today, have better tools like prettier that could be used together with EsLint.

To now more:

While it doesn't immediately seem like it, prettier and eslint have different responsibilities, ...
Prettier takes care of formatting, while eslint mainly focuses on style, though it's highly configurable.
Zecuel

And this is clearly mentioned by the EsLint Team, which say

It is the view of the maintainers of this project that using a linter to enforce code formatting concerns is fundamentally not a good idea.

There are dedicated code formatters, such as https://prettier.io/ (recommended) and clang format which are far more powerful and specialized for the use case of code formatting concerns such as indentation, line breaks, semi-colons, commas etc.

4. EsLint vs Prettier : In a nutshell

• EsLint: Ment to be used as a linter
• Prettier: Ment to be used as a formatted