VSCode - ESLint, Prettier & Airbnb Style Guide Setup

vscode_eslint_prettier.md

VSCode - ESLint, Prettier & Airbnb Style Guide Setup

Setting up ESLint on VSCode with Airbnb Javascript Style Guide

Visual Studio Code https://code.visualstudio.com/

Airbnb Style Guide - https://github.com/airbnb/javascript

---

1. Install ESLint & Prettier extensions for VSCode

• Set format on save.

2. Install Packages

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

for JavaScript/Node Projects

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

for React Projetcs

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

3. Create .prettierrc file

{
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 125,
    "tabWidth": 4,
    "semi": true
}

Prettier Options - https://prettier.io/docs/en/options.html

4. Create .eslintrc.json file

• airbnb-base configuration for JavaSricpt/Node projects

{
    "extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error"
    }
}

• airbnb configuration for React projects

{
    "extends": ["airbnb", "prettier", "plugin:node/recommended"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error",
        "no-unused-vars": "warn",
        "no-console": "off"
    }
}

ESLint Rules - https://eslint.org/docs/rules/