Setup for a React project using ESLint and Prettier

setup.md

Setup for ESLint and Prettier

Here is a quick guide for getting set up with a basic react app with eslint and prettier

Installation

1. First run

npx create-react-app app-name
cd app-name
npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

Setup ESLint

2. Add an .eslintignore file with /src/serviceWorker.js as the only line

3. Remove the "eslintConfig" field from your package.json

4. Add an .eslintrc file with the following:

{
  "env": {
    "browser": true,
    "es6": true,
    "mocha": true,
    "jest": true
  },
  "extends": ["airbnb", "prettier", "prettier/react"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly",
    "window": true,
    "document": true,
    "localStorage": true,
    "FormData": true,
    "FileReader": true,
    "Blob": true,
    "navigator": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "import/imports-first": ["error", "absolute-first"],
    "import/newline-after-import": "error",
    "react/prop-types": 0,
    "no-underscore-dangle": 0,
    "no-console": 0,
    "jsx-a11y/no-noninteractive-element-interactions": 0
  }
}

5. Add the following script to the "scripts" section of your package.json for easy linting

"lint": "eslint src/**/*.{js,jsx}"

Seup prettier

6. Add a .prettierrc file with the following:

{
  "tabWidth": 2,
  "singleQuote": true
}

If you would like to change any other options to match your liking, checkout the option page on the prettier website

6. If you would like to easily format your entire project, add the following to the to the "scripts" field of your package.json for easier formatting of all project files.

"format": "prettier --write \"src/**/*.{js,jsx,ts,css,less,scss,vue,json,gql,md}\""

This will format all of the filetypes prettier is compatible with in your src directory.

If you would like to add the full default prettier (with single quotes set to true) here are all of the options

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "auto"
}

This can prevent a users editor defaults from overriding any of your app's styles.

Also here's the prettier config used by the official react repository if you'd like to use something like that instead!

{
  "bracketSpacing": false,
  "singleQuote": true,
  "jsxBracketSameLine": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "parser": "babylon"
}

Add absolute imports

7. With the release of create-react-app 3 you can now use absolute imports for your components. If you would like to setup absolute imports to your src directory, add a new file called jsconfig.json to the root and paste the following into it:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

8. Then add the following to your .eslintrc

"settings": {
  "import/resolver": {
    "node": {
      "moduleDirectory": ["node_modules", "src/"]
    }
  }
},

Now you can import files using their path relative to the root directory

import Button from 'components/button'

Bonus script

9. If you want an easy way to run a clean install if for some reason things stop working, here is another nice script I like to use

"clean-install": "rm -rf node_modules && rm package-lock.json && npm i"