eslint_prettier_airbnb.md

eslint_prettier_airbnb.md

VS Code - ESLint, Prettier & Airbnb setup

1. Install ESLint & Prettier extensions for VSCode

• ESLint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Recommended - Set format on save and any global prettier options

2. Install Packages

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

3. Initialize ESLint config

npx eslint --init

Recommended configuration

- To check syntax, find problems, and enforce code style
- JavaScript modules (import/export) (If you are using versions like ECS6)
- React | Vue.js | none of these (Choose one)
- Does your project use TypeScript? › No / Yes (Choose TypeScript if you're using, otherwise choose No)
- Where does your code run? (Multiple choice between Browser and Node)
- Use a popular style guide
- Airbnb: https://github.com/airbnb/javascript
- JavaScript
- Would you like to install them now? › No / Yes (Yes)
- Which package manager do you want to use? (Choose an option between yarn, npm, pnpm)

4. Let's add prettier to .eslintrc.js

module.exports = {
  env: {
    commonjs: true,
    es2021: true,
    node: true,
  },
  extends: ["airbnb-base", "prettier"], 
  parserOptions: {
    ecmaVersion: "latest",
  },
  plugins: ["prettier"], 
  rules: {
    "prettier/prettier": "error", 
    "no-unused-vars": "warn",
    "no-console": "off",
  },
};

5. Add the following lines in your setting.json (VSCode only).

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

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