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

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