How to setup ESLint with Standard.js style in React.js project

Consider you have a react.js project, and you want to setup ESLint with standard.js style guide. Follow this step by step tutorial to setup ESLint and Standars.js like a pro.

1. Install eslint and eslint plugin for react

yarn add -D eslint eslint-plugin-react

yarn add -D eslint eslint-plugin-react

2. Install eslint plugin for standard

yarn add -D eslint-config-standard eslint-config-standard-jsx eslint-config-standard-react eslint-plugin-promise eslint-plugin-import eslint-plugin-node

yarn add -D eslint-config-standard eslint-config-standard-jsx eslint-config-standard-react eslint-plugin-promise eslint-plugin-import eslint-plugin-node

3. Create eslint configuration file

Create .eslintrc.js in your project root directory and add this code

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard',
    'standard-jsx',
    'standard-react'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules: {}
}

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard',
    'standard-jsx',
    'standard-react'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules: {}
}

Note: eslint-config-standard-jsx by default will use single quote in jsx. I prefer to use double quote when writing jsx attribute, if you do so, add this rule to your .eslintrc.js file

.eslintrc.js

{
  rules:{
    'jsx-quotes': ['error', 'prefer-double']
  }
}

{
  rules:{
    'jsx-quotes': ['error', 'prefer-double']
  }
}

4. Configuring .eslintignore file

.eslintignore contains list of folders and files which will be ignored by eslint. Here is example of .eslintignore file:

.eslintignore

node_modules/
public/
dist/

node_modules/
public/
dist/

5. Add NPM script

To make life easier, we can create scripts to run eslint with npm/yarn command. add this scripts in your package.json file.

package.json

{
  "scripts":{
    "lint": "eslint . --ext .js,.jsx",
    "lint:fix": "eslint . --fix --ext .js,.jsx"
  }
}

{
  "scripts":{
    "lint": "eslint . --ext .js,.jsx",
    "lint:fix": "eslint . --fix --ext .js,.jsx"
  }
}

6. Bonus: Setup Eslint in Visual Studio Code

If you are using Visual Studio Code, you may be want to setup ESLint extension to show error right in your text editor. First you need to install ESLint .

Then add this code to your vscode settings.json . This will auto fix error when you save your file.

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

How to setup ESLint with Standard.js style in React.js projectself.__wrap_b(":R16bdeqi:",1)