Eslint setup

Note: please avoid Eslint for projects that use TypeScript. For those, please use Typescript-Eslint instead.

Eslint is a tool that checks your JavaScript code for errors and code formatting issues. We encourage all projects to adopt the eslint:recommended configuration, along with the eslint-config-prettier to delegate checking of stylistic rules to Prettier.

Installing Eslint

Install eslint and some other plugins:

yarn add --dev \
  eslint \
  eslint-plugin-react \
  eslint-config-prettier \
  babel-eslint

Add config

Edit .eslintrc.js. Here's a configuration that would work for React projects.

module.exports = {
  env: {
    es6: true,
    node: true,
    browser: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'eslint-config-prettier'
  ],
  settings: {
    // Ensure you're defining the correct React version here
    react: { version: '16.5.0' }
  },
  parserOptions: {
    // Enable JSX support
    ecmaFeatures: { jsx: true },
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['react'],
  parser: 'babel-eslint',
  rules: {
    // Add any additional rules here
    'react/prop-types': 0
  }
}

Add scripts

Add the lint to package.json. Be sure to change paths, depending on where your CSS and JS are. Be sure to place the paths in quotes.

{
  "scripts": {
    "lint": "eslint 'lib/**/*.{js,jsx}'"
  }
}

Gotchas to take note of

  • Be sure to quote your paths in package.json! Globs may not work properly otherwise, and you may be missing linting on some files without it.

  • Make sure react/prop-types is disabled in the eslintrc configuration. We discourage the use of prop types; instead, please consider adding TypeScript for robust compile-time type checking.

Deprecated practices

Unnecessary packages

These packages were previously recommended, and are no longer necessary. Please remove them and migrate to our newer setup instead, which uses the default eslint:recommended, which is built into Eslint itself.

  • eslint-config-standard (and related configurations)
  • eslint-config-standard-react (and related configurations)
  • eslint-plugin-flowtype
  • eslint-plugin-import
  • eslint-plugin-node
  • eslint-plugin-promise
  • standard
  • semistandard

Config filenames

We used to recommend ".eslintrc or .eslintrc.json". Use .eslintrc.js instead, which is a more flexible format.

References