An Opinionated ESLint and Prettier Setup for React

These are the core packages and settings I use for linting and formatting Javascript, React and JSX in my projects.

The rules are a opinionated and are being continuously fine-tuned while working with modern JavaScript and react. This config can be easily extended to accommodate how you and/or your team work though.

This package is heavily inspired by Wes Bos's No-Sweat™ Eslint and Prettier Setup... hence the blatant rip-off of his documentation (thanks Wes!).

⚡️ What it Does

• Lints JavaScript based on latest-ish standards with eslint
• Fixes formatting mishaps with Prettier
• Linst + Notifies you of accessibility issues via eslint-plugin-jsx-a11y

Custom rules can be found in the .eslintrc.js file. You can overwrite any of these settings or fork the entire package to create your own.

💾 Installing

You can install this package locally (per project) or globally.

Ideally you will want to install this locally per project so that you can have project-specific settings for everyone working on the project.

Installing this package globally allows you to lint and format ad-hoc JavaScript files and projects too. It's nice if you want to spin up a quick protoype or a throwaway project to work through a quick idea.

Local/Per Project Install

1. If you don't have a package.json file, initialize your project with yarn init or npm init

2. Install the package and its peer dependencies:

   yarn add --dev eslint prettier @pauloelias/eslint-config-javascript-standard-react

   npm install --save-dev eslint prettier @pauloelias/eslint-config-javascript-standard-react

3. Create an .eslintignore file in the root of your project (alongside your package.json) and add the following:

   node_modules
   

4. Create a .prettierignore file in the root of your project (alongside your package.json) and add the following:

   node_modules
   

5. Create an .eslintrc file in the root of your project (alongside your package.json) and add the following:

   {
     "extends": ["@pauloelias/eslint-config-javascript-standard-react"]
   }

6. Add the follwing scripts to your package.json file:

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

7. You can lint and/or fix your code manually by running these scripts:

   yarn run lint
   yarn run lint:fix

   npm run lint
   npm run lint:fix

Global Install

1. Install the package and its peer dependencies globally:

   yarn global add eslint prettier @pauloelias/eslint-config-javascript-standard-react

   npm install -g eslint prettier @pauloelias/eslint-config-javascript-standard-react

2. Add a global .eslintrc file:

   ESLint will look for one in your home directory:

   • ~/.eslintrc for mac
   • C:\Users\username\.eslintrc for windows

   Your .eslintrc file should look like this:

   {
     "extends": ["@pauloelias/eslint-config-javascript-standard-react"]
   }

To use from the CLI, you can now run eslint . or configure your editor (below under "Settings").

⚙️ Settings

If you'd like to overwrite eslint or prettier settings, you can add the rules in your .eslintrc file. The ESLint rules go directly under "rules" while prettier options go under "prettier/prettier". Note that prettier rules overwrite anything in this config (removing semicolons, and using single quotes), so you'll need to include those as well.

{
  "extends": ["@pauloelias/eslint-config-javascript-standard-react"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "singleQuote": false
      }
    ]
  }
}

VS Code Settings

Once you have done one, or both, of the above installs. You probably want your editor to lint and fix issues for you. Here are the instructions for VS Code:

1. Install the ESLint extension

2. Now we need to setup some VS Code settings via Code/File → Preferences → Settings. It's easier to enter these settings while editing the settings.json file, so click the {} icon in the top right corner:

   {
     // These are all my auto-save configs
     "editor.formatOnSave": true,
     // turn it off for JS and JSX, we will do this via eslint
     "[javascript]": {
       "editor.formatOnSave": false
     },
     "[javascriptreact]": {
       "editor.formatOnSave": false
     },
     // tell the ESLint plugin to run on save
     "eslint.autoFixOnSave": true,
     // Optional BUT IMPORTANT: If you have the Prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
     "prettier.disableLanguages": ["javascript", "javascriptreact"],
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }