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

Feel free to use https://github.com/paulolramos/eslint-prettier-airbnb-react, which does this whole process automatically via shell script! :)

good man!

This is excellent. and thanks to SwiftWinds for making this super easy.

This is excellent. and thanks to SwiftWinds for making this super easy.

No problem! :D

Tnx, mate!

thank you!

For those of you who do not want the React plugins in the peerdeps, you can also use:

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

Feel free to use https://github.com/paulolramos/eslint-prettier-airbnb-react, which does this whole process automatically via shell script! :)

Good man

Hi, why the code not fix auto when i press save in the vscode ? its should fix me the code and its not .

Thanks

thank you magic man

Good work. Finally I have Prettier working with VS code

Thank you😊

Thanks Brad

Thanks a lot

Created a npm package which bootstraps this setup to your VSCode project. Can either be installed globally or run through npx:
npx setup-airbnb-config ./yourProjectFolder. Supports both vanilla JS and React. Feel free to use it. Contributions are welcome!

https://www.npmjs.com/package/setup-airbnb-config

Thank you Brad, very useful

my prettier says No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration. How do i override my vscode prettier config to this?

hey,
the terminal does not trow an arrow for me when i use double quotes ...
tried googling it and found somthing like "turn 'jsxSingleQuote':true" but it didnt do anything aither...

thanks man, you the best

thanks man🥰

GJ! Thanks for all your hard work Brad!

Are these rules still acceptable in 2023?

Are these rules still acceptable in 2023?

+1

Hi, why the code not fix auto when i press save in the vscode ? its should fix me the code and its not .

Same

Your video: VSCode ESLint, Prettier & Airbnb Style Guide Setup - https://youtu.be/SydnKbGc7W8

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