Skip to content

Instantly share code, notes, and snippets.

@bradtraversy
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.
ESLint, Prettier & Airbnb Setup

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

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

@peidrao
Copy link

peidrao commented Mar 7, 2020

good man!

@richwag
Copy link

richwag commented May 24, 2020

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

@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

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

@grah48583
Copy link

thank you very much
but i had a question.

Do i have to do this every time or i can set all this settings globally?

@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

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?

@Abdlruhmann07
Copy link

Thanks <3

@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

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