Setup ESLint, Prettier, EditorConfig

Setup ESLint, Prettier, EditorConfig, and JSConfig in React Apps

ESLint catches mistakes. Prettier formats the file on save so reviews spend time on behavior instead of spacing.

Code Linting and Formatting Rules

Install the dependencies

Install these packages with Yarn or npm. The list covers Airbnb rules, React hooks, accessibility, import resolution, and Prettier so lint and format stay in agreement.

yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks prettier eslint-plugin-prettier

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks prettier eslint-plugin-prettier

ESLint configuration

Create .eslintrc at the project root. Paste the configuration below to extend Airbnb, React, and Prettier, then silence rules that fight typical React apps.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "react/jsx-filename-extension": "off",
    "import/no-unresolved": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "react/no-array-index-key": "off",
    "import/prefer-default-export": "off",
    "react/react-in-jsx-scope": "off",
    "no-plusplus": "off"
  }
}

Prettier configuration

ESLint and Prettier Editor Configuration

Create .prettierrc at the project root. Use this as the shared format: 80 columns, 2-space indent, single quotes, and trailing commas.

{
  "semi": true,
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all"
}

EditorConfig configuration

Add .editorconfig at the project root. New files then inherit the same indent style and line endings, even in editors other than VS Code.

root = true
 
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

JSConfig configuration

Add jsconfig.json with baseUrl set to src. Absolute imports then resolve without extra webpack aliases.

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Adding scripts in package.json

Add these scripts to package.json. escheck reports issues, esfix rewrites them, and prettier formats the tree.

{
  "scripts": {
    "escheck": "eslint .",
    "esfix": "eslint ./ --fix",
    "prettier": "prettier --write ."
  }
}

Setup ESLint, Prettier, EditorConfig, and JSConfig in React Apps