eslint-prettier-airbnb-stylelint.md

ESLint (Airbnb), Prettier and Stylelint configuration

Add both eslint and prettier to your project:

npm install eslint prettier -D

Install and run the eslint-config-airbnb in your project:

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

Make prettier use the eslint configuration:

npm install eslint-config-prettier eslint-plugin-prettier -D

Create a .eslintrc.json file in your project if it doesn't exists.

{
  "extends": ["eslint:recommended", "airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "warn",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

Create a .prettier.json file in your project if it doesn't' exists:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "printWidth": 100
}

Create a .editorconfig file in the project root:

root = true

[*]
charset = utf-8
indent_size = 2
indent_style = space
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Launch the VS Code Quick Open with Ctrl + P:

Install the ESLint VS Code plugin pasting:

ext install dbaeumer.vscode-eslint

Install Editorconfig plugin in VS Code pasting:

ext install EditorConfig.EditorConfig

Open the VS Code Quick again and install the Prettier plugin:

ext install esbenp.prettier-vscode

Open the VS Code Quick again and install the Stylelint plugin:

ext install stylelint.vscode-stylelint

Open VS Code, then press Ctrl + Shift + P, search for Preferences: Open Settings (JSON).

Paste the following configuration:

"editor.formatOnSave": true,
"eslint.format.enable": true,
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Stylelint

npm install stylelint stylelint-config-standard @stylelint/postcss-css-in-js -D 

Create the .stylelintrc.json file with the following contents:

{
  "extends": ["stylelint-config-standard"],
  "overrides": [
    {
      "files": ["**/*.{jsx,js}"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}

Package.json Scripts:

Add those scripts in the package.json file in the root folder:

"lint:js": "eslint src/ --ext .js,.jsx",
"lint:js:fix": "npm run lint:js -- --fix",
"lint:css": "stylelint src/**/*.{css,js}",
"lint:css:fix": "stylelint src/**/*.{css,js} --fix"