Brad Traversy's VSCode ESLint, Prettier & Airbnb Style Guide Setup

Updated: 28-3-2024

Resources

Video: VSCode ESLint, Prettier & Airbnb Style Guide Setup

Problem solving

Roadmap

Installing ESLint & Prettier Visual Studio Code extensions

Step 1:

Install ESLint

Step 2:

Install Prettier

VSCode settings

Step 3:

Format on save: on.

Step 4:

Prettier: Single quotes: on.

Command Line/Bash

Step 5:

npm init -y

Step 6:

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

Step 7:

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

Step 8: (See .prettierrc configuration below. Copy-paste into this file)

touch .prettierrc

Step 9:

npm i -g eslint

Step 10:

eslint --init

.prettierrc configuration:

Step 11: (Copy-paste into .prettierrc file)

{
  "trailingComma": "none",
  "tabWidth": 4,
  "semi": true, 
  "singleQuote": true,
  "printWidth": 80,
  "jsxSingleQuote": true,
  "htmlWhitespaceSensitivity": "css"
}

.eslintrc.json configuration:

Step 12: (Copy-paste into .eslintrc.json file)

{
    "extends": ["airbnb", "prettier", "plugin:node/recommended"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": ["error", { "endOfLine": "auto" }],
        "no-unused-vars": "warn",
        "no-console": "off",
        "func-names": "off",
        "no-process-exit": "off",
        "object-shorthand": "off",
        "class-methods-use-this": "off",
        "no-undef": "off"
    }
}

Aphelion-im/eslint-config-brad-traversy