Quickstart for editorconfig, eslint and prettier for ReactJS development

quickstart-editorconfig-eslint-prettier-react.md

Boilerplate Typescript React with Eslint and Prettier

Create-react-app

1. Create a react app with typescript template

npx create-react-app . --template typescript

EditorConfig

2. Create .editorconfig on the root folder:

root = true

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

3. Remove from package.json:

"eslintConfig": {
	"extends": "react-app"
},

ESlint

4. Add eslint@6.8.0:

yarn add eslint@6.8.0 -D

5. Init eslint:

yarn eslint --init

6. Choose configs:

How to use -> To check syntax, find problems and enforce code style;
Modules -> Javascript modules (import/export);
Framework -> React;
Typescript -> Yes;
Run -> Browser;
Style -> Use a popular style guide;
Guide -> Airbnb;
Config file -> JSON;
NPM -> No;

7. Install deps with yarn:

yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D

8. create .eslintignore:

**/*.js
node_modules
build
/src/react-app-env.d.ts

9. install typescript import resolver:

yarn add eslint-import-resolver-typescript -D

10. modify .eslintrc.json:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "plugin:@typescript-eslint/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
				"react-hooks",
        "@typescript-eslint"
    ],
    "rules": {
      "no-use-before-define": "off",
			"react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
      "import/prefer-default-export": "off",
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          "ts": "never",
          "tsx": "never"
        }
      ]
    },
    "settings": {
      "import/resolver": {
        "typescript": {}
      }
    }
}

Prettier

11. Install prettier plugin:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

12. Add to .eslintrc.json "extends":

"prettier/@typescript-eslint",
"plugin:prettier/recommended"

13. Add to .eslintrc.json "plugins":

"prettier"

14. Add to .eslintrc.json "rules";

"prettier/prettier": "error"

15. Create prettier.config.js:

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
	arrowParens: 'avoid',
}