# Style Guide

Reference

Popular Style Guides :
1. Airbnb (opens new window)
2. Standard
3. Google
Eslint Rules :
1. Style based (eg singleQuote)
2. Code based (eg no-unused-vars)

Auto-Fix

// Fix Style
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Fix Code
"editor.codeActionsOnSave": {
  "source.fixAll": true
},

Approach - Use only one way:
1. Eslint & Prettier separately [recommended]
2. Eslint with Prettier as plugin

# Install Airbnb

Npm package - eslint-config-airbnb (opens new window)

# Option - 1 [Recommended]
npm i -g eslint                   # Glabally
eslint --init                     # intialize .eslintrc.json

# Option - 2 [Manual]
npm info "eslint-config-airbnb@latest" peerDependencies

# Option - 3 [Alias]
alias airbnb="(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)";

# Approach 1 - Eslint & Prettier separately [recommended]

Use Prettier (for formatting) & Linters (for Linting) vscode extensions

Install airbnb
Use both .eslintrc.json & .prettierrc as needed.

On Save Conflict ?

Who runs first on save? - could be an issue
- prettier (formatOnSave)
- eslint fixall (codeActionsOnSave)

Tip - Might help prettier/prettier-eslint (opens new window)

# Approach 2 - Eslint with Prettier as plugin

Drawbacks

If we use prettier as plugin with its config eslint-config-prettier the styling rules of airbnb gets disabled. Why should we use airbnb without it's styling rules ? Prettier will override Airbnb

Other airbnb rules not related to style still works.

# Install prettier plugin

# install prettier (node is optional)
npm i -D eslint prettier
         eslint-plugin-prettier eslint-config-prettier
         eslint-plugin-node eslint-config-node

# create `.eslintrc.json` with Prettier config

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

# Vscode extension

// Reload vscode

"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false
},
"[javascriptreact]": {
  "editor.formatOnSave": false
},

"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
  "source.fixAll": true
},

"prettier.disableLanguages": ["javascript", "javascriptreact"],

# .eslintignore (optional)

ignores the folders from linting when we run npm run lint using script "lint": "eslint ./" in package.json

node_modules

← Animations JSON →