Skip to main content

ESLint

https://eslint.org

Rules and config​

https://eslint.org/docs/rules

https://eslint.org/docs/user-guide/configuring/rules

Airbnb rules: https://github.com/airbnb/javascript

Turn off all rules that are unnecessary or might conflict with Prettier: https://www.npmjs.com/package/eslint-config-prettier

Disable a rule​

You can disable a rule on a specific line, a whole file, a block of code or globally. See:

On a specific line:

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function isNumber(n: any): boolean {}

In an entire file, put a comment at the top:

/* eslint-disable @typescript-eslint/no-empty-function */

Globally:

.eslintrc.js
module.exports = {
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
  },
}

Options are (source):

  • "off" or 0: turn the rule off
  • "warn" or 1: turn the rule on as a warning (doesn’t affect exit code)
  • "error" or 2: turn the rule on as an error (exit code is 1 when triggered)

Ignoring files and folders​

See all options here: https://eslint.org/docs/latest/user-guide/configuring/ignoring-code

Disable eslint for all files in directory and subdirectories - https://stackoverflow.com/questions/43194302/disable-eslint-for-all-files-in-directory-and-subdirectories

You can have a .eslintignore file like .gitignore:

.eslintignore
public/js/bootstrap.min.js
public/js/jquery.min.js

You can also set ignorePatterns in .eslintrc.js:

.eslintrc.js
module.exports = {
  ignorePatterns: ['build/'],
}

In package.json use eslintIgnore:

package.json
{
  "eslintIgnore": ["file.js"]
}

Note that node_modules and dot-files and dot-folders are ignored. See https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file for more details and exceptions.

CLI​

https://eslint.org/docs/user-guide/command-line-interface

# local install in node_modules
npx eslint src/**/*.js
npx eslint './**/*.{js,jsx,ts,tsx}'
npx eslint 'src/**/*.{js,jsx,ts,tsx}'
npx eslint . --ext ts --ext tsx --ext js

# global install
eslint --cache --fix

On a npm package.json script we don't need the npx prefix:

package.json
{
  "scripts": {
    "eslint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
  }
}

You can verify that a npm script correctly runs the local ESLint (instead of a global install) by adding a script that runs which eslint. Running this script will print /project-path/node_modules/.bin/eslint.

Setup​

Docs - Getting Started with ESLint: https://eslint.org/docs/latest/user-guide/getting-started

See https://github.com/eslint/create-config for all info about @eslint/config.

npm init @eslint/config

(Note: in the past you used eslint --init.)

Optionally, you can specify a shareable config with --config:

npm init @eslint/config --config semistandard # npm <= 6
npm init @eslint/config -- --config semistandard # npm >= 7

You can pass an array of configs too - see docs. A shareable config is set on the .eslintrc.js extends field. Some configurations are:

Search npm for more shareable configs: https://www.npmjs.com/search?ranking=popularity&q=eslint-config

For a Node.js project with Prettier answer this to the following questions:

  • How would you like to use ESLint? → To check syntax and find problems
  • Which framework does your project use? React, Vue, None of these. → None of these
  • Where does your code run? → Node. Warning: you need to unselect 'Browser' with space!

Finally, it will say something like "The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest. Would you like to install them now?". If you answer 'Yes' it creates the file .eslintrc.js and updates package.json (adding the dependencies to devDependencies).

.eslintrc.js​

https://prettier.io/docs/en/integrating-with-linters.html

https://github.com/prettier/eslint-config-prettier

You can use npm init @eslint/config to create .eslintrc.js. It asks questions. See setup below.

.eslintrc.js for Node.js​

You must have node: true otherwise you get the error "'process' is not defined" - see this and this.

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
}

.eslintrc.js for React Native​

For instructions on how to setup ESLint with React Native see https://www.npmjs.com/package/@react-native-community/eslint-config. (If using npm instead of yarn do npm install --save-dev eslint @react-native-community/eslint-config.)

Note that it does not work with ESLint 8, we need to use version 7 (see https://stackoverflow.com/a/70748782/). So in package.json we should have something like "eslint": "^7.32.0". But first check the ESLint version that @react-native-community/eslint-config currently uses here: https://github.com/facebook/react-native/blob/main/packages/eslint-config-react-native-community/package.json

In summary, we need to do to something like: yarn add --dev eslint prettier @react-native-community/eslint-config@7.32.0.

Then add the following .eslintrc.js:

module.exports = {
  root: true,
  // https://www.npmjs.com/package/@react-native-community/eslint-config
  // In WebStorm, 'extends' 'prettier' removes the yellow bars, whereas the 'rules' sections gets rid of the red
  // squiggles that prettier is going to fix automatically for us (hence there's no point in seeing them).
  extends: ['@react-native-community', 'prettier'],
  // https://eslint.org/docs/user-guide/configuring/rules
  // https://eslint.org/docs/rules/
  rules: {
    'prettier/prettier': 'off',
    quotes: 'off',
    'no-trailing-spaces': 'off',
    semi: 'off',
    // babel-preset-expo automatically converts JSX to JS without the need to
    // import React - see https://github.com/expo/expo/tree/master/packages/babel-preset-expo#jsxruntime
    // Rules taken from https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
    'react/jsx-uses-react': 'off', // Prevent React to be marked as unused
    'react/react-in-jsx-scope': 'off', // 'React' must be in scope when using JSX
  },
  globals: {
    // Suppress error "'JSX' is not defined" when using JSX.Element as type.
    // From https://stackoverflow.com/questions/64170868/why-eslint-consider-jsx-or-some-react-types-undefined-since-upgrade-typescript
    JSX: true,
  },
}

New config​

Docs - https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new

.eslintrc* is replaced with eslint.config.js.

WebStorm​

To get the red squiggles and warnings we need to enable it!

At Preferences → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint, set 'Automatic ESLint configuration'.

Plugins​

Imports: