Skip to content

Latest commit

 

History

History
185 lines (174 loc) · 11.2 KB

README.md

File metadata and controls

185 lines (174 loc) · 11.2 KB
Raw

Eslint config - DDFAM

This is a installation manual for setting up Eslint and Prettier on a frontend project.
The config is currently under review and is a "Work in Progress".

How LEARN & MAKE

Install Eslint dependancies:

npm i eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier prettier --save-dev

This will install:

PS: If you are not using create-react-app you will need to install Eslint aswell npm i eslint --save-dev

Set up the rules:

Create a .eslintrc file in the root folder of your project and add the folowing ruleset:
Eslintrc fil

Add linting scripts:

To lint on command add the following in your package.json file:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},

VSCode settings:

To add linting on save with VSCode; install the ESlint extension and add the following setting to your settings.json file:

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

If you are using the VSCode Prettier extension enabled, turn it off for JavaScript. Eslint will fix this.

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

Optional, but best practice:

Set up husky and lint-staged - Not tested yet!

To ensure that Eslint and Prettier will be run every time we can set up Husky and Lint staged to run our linting before any commit:

npm install  husky lint-staged --save-dev

Setup husky and lint-staged in your package.json by adding:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
},
{
  "lint-staged": {
    "*.+(js|jsx)": ["eslint --fix", "git add"],
    "*.+(json|css|md)": ["prettier --write", "git add"]
  }
}

This will run the eslint --fix script every time a commit has been done on only the staged files. Hopefully everything if fine!

Rule explanation:

Eslint rules:

  • no-use-before-define
    • Don't use a function before it is defined: Set to warn
  • indent
    • Indent style: Set to tabs
  • no-debugger
    • Don't call debugger: Set to warn
  • no-alert
    • Don't use alert: Set to warn
  • no-await-in-loop
    • Don't use await in loops: Set to off
  • no-return-assign
    • Disallow Assignment in return - Set to default; Not allowed unless they are enclosed in parentheses.
  • no-restricted-syntax
    • Disallow specified syntax: Set to error
      • ForInStatement
      • LabeledStatement
      • WithStatement
  • no-unused-vars
    • This rule is aimed at eliminating unused variables, functions, and function parameters: Set to warn
      • ignoreRestSiblings - set to true
      • argsIgnorePattern - is set to ignore variables with "res|next|^err" included
  • prefer-const
    • Used to flag variables that are not reassigned and should be a const - Set to error
      • destructuring is set to "all", allows destructured variables to be a let if not all the variable are reassigned
  • arrow-body-style
    • Enforce or disallow the use of braces around arrow function body - Set to "as-needed" to allow not to have braces around the body when not needed.
  • no-unused-expressions
    • Eliminate unused expressions which have no effect on the state of the program - Set to error
      • allowTaggedTemplates: Enable you to use tagged template literals in your expressions - Set to true
  • no-param-reassign
    • Prevent unintended behavior caused by modification or reassignment of function parameters - Set to error
      • props - Set back to false to overwrite AirBnB setup
  • no-console
    • Disallows console.log() - set to warn
  • func-names
    • Enforce or disallow the use of named function expressions
    • Turned off
  • space-before-function-paren
    • Enforces or disallows space before function parentheses
    • Turned off, Prettier deals with this
  • comma-dangle
    • Allows of disallows
    • Turned off, Prettier deals with this
  • max-len
    • Enforces a maximum line length to increase code readability and maintainability
    • Turned off, Prettier deals with this
  • no-underscore-dangle
    • This rule disallows dangling underscores in identifiers
    • Turned off, unsure if Pretter deals with this
  • radix
    • Aimed at preventing the unintended conversion of a string to a number of a different base than intended or at preventing the redundant 10 radix if targeting modern environments only
    • Turned off
  • no-shadow
    • Aims to eliminate shadowed variable declarations (Variables that are repeated and set again inside a function)
    • Set to error
      • Hoist is set to all: Reports all shadowing before the outer variables/functions are defined
      • Allow is set to allow shadowing on: resolve, reject, done, next, err, and error
  • quotes
    • Enforces the consistent use of single quotes
    • avoidEscape is set to true, this allows strings to use single-quotes or double-quotes so long as the string contains a quote that would have to be escaped otherwise
    • allowTemplateLiterals is set to true, this allows strings to use backticks
  • consistent-return
    • Requires return statements to either always or never specify values
    • Turned off

Import rules:

React rules:

React hooks rules:

Jsx-a11y rules:

Prettier rules:

Links:

AirBnB - Javascript style guide Eslint - Hompage Prettier - Homepage