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:

• AirBnB eslint config
• Eslint plugin - Import
• Eslint plugin - Jsx-a11y
• Eslint plugin - React
• Eslint plugin - React hooks
• Prettier eslint config
• Prettier plugin
• Prettier

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:

• import
• import/prefer-default-export
  • When there is only a single export from a module, prefer using default export over named export
  • Turned off
• import/extensions
  • Provide a consistent use of file extensions
  • Turned off

React rules:

• react/display-name
• react/no-array-index-key
• react/react-in-jsx-scope
• react/prefer-stateless-function
• react/forbid-prop-types
• react/no-unescaped-entities
• react/require-default-props
• react/jsx-filename-extension

React hooks rules:

• react-hooks/rules-of-hooks
  • Checks rules of Hooks
• react-hooks/exhaustive-deps
  • Checks effect dependencies

Jsx-a11y rules:

• jsx-a11y/accessible-emoji
• jsx-a11y/href-no-hash
  • This rule seems to be deprecated and if therefor turned off. Anchor is valid has replaced this.
• jsx-a11y/anchor-is-valid

Prettier rules:

• Prettier - trailingComma
• Prettier - singleQuote
• Prettier - printWidth
• Prettier - useTabs

Links:

AirBnB - Javascript style guide Eslint - Hompage Prettier - Homepage