Skip to content

Instantly share code, notes, and snippets.

@bradtraversy

bradtraversy/eslint_prettier_airbnb.md

Created July 19, 2019 17:54
Show Gist options
  • Save bradtraversy/aab26d1e8983d9f8d79be1a9ca894ab4 to your computer and use it in GitHub Desktop.
Save bradtraversy/aab26d1e8983d9f8d79be1a9ca894ab4 to your computer and use it in GitHub Desktop.
Download ZIP
ESLint, Prettier & Airbnb Setup
Raw
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

@SwiftWinds
Copy link

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

No problem! :D

@LucasAsafe
Copy link

Tnx, mate!

@blyatmobilebr-zz
Copy link

thank you!

@bryeduria
Copy link

bryeduria commented Aug 21, 2020 •
edited
Loading

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

@adongu
Copy link

adongu commented Aug 29, 2020

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

Good man

@roei133
Copy link

roei133 commented Oct 15, 2020

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

@fatihemree
Copy link

Thanks

@DNI9
Copy link

DNI9 commented Nov 3, 2020

thank you magic man

@ionicArabic
Copy link

Good work. Finally I have Prettier working with VS code

@ahhzaky
Copy link

ahhzaky commented Mar 27, 2021

Thank you😊

@suyash-purwar
Copy link

Thanks Brad

@MageshSundarG
Copy link

Thanks a lot

@christopherafbjur
Copy link

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

@Costas-Zeimpekis
Copy link

Costas-Zeimpekis commented Jun 16, 2021 •
edited
Loading

Thank you Brad, very useful

@goacgras
Copy link

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?

@AdamShamsadov
Copy link

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...

@korgat
Copy link

korgat commented Oct 17, 2022

thanks man, you the best

@raselinfo
Copy link

thanks man🥰

@furopi
Copy link

furopi commented Mar 23, 2023

GJ! Thanks for all your hard work Brad!

@inzamam-reachfirst
Copy link

Are these rules still acceptable in 2023?

@kamaalsultan
Copy link

Are these rules still acceptable in 2023?

+1

@butch888
Copy link

butch888 commented Feb 2, 2024

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

Same

@carloswm85
Copy link

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

@rbalet
Copy link

rbalet commented Feb 19, 2025

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

@NishargShah
Copy link

Airbnb flat config is still not supported by the airbnb and airbnb-base so I suggest trying this one instead: eslint-config-airbnb-extended. It’s really good, up-to-date, and supports new tools like import-x and stylistic. Plus, it has helpful CLI support too!

Checkout: https://www.npmjs.com/package/eslint-config-airbnb-extended

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment