Create React project

https://create-react-app.dev/docs/adding-typescript/.

Create a React + TypeScript project using the following command.

1

yarn create react-app my-app --template typescript

For resource referencing purposes, add the baseUrl attribute to tsconfig.json.

1
2
3
4
5

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    ...

Configure ESLint and Prettier

Install ESLint

1

yarn add -D eslint

ESLint is a code checking tool to check whether your code conforms to a specified specification.

ESLint Initialization.

1

yarn create @eslint/config

Configure on demand, for both React and TypeScript.

Since the ESLint configuration uses some variables and simple judgments to make the configuration easier, I chose the JavaScript configuration. Using the popular Airbnb rules.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · yarn

Description of the role of each package.

  • eslint-plugin-react: React syntax rules
  • @typescript-eslint/parser: TypeScript syntax parser
  • @typescript-eslint/eslint-plugin: TypeScript syntax rules

Installing Additional Packages

Further enhancements to Airbnb using TypeScript.

1

yarn add -D eslint-config-airbnb-typescript

Automatic deletion of unused imports.

1

yarn add -D eslint-plugin-unused-imports

Install Prettier

1

yarn add -D --exact prettier

Prettier is a code formatting tool. Used in conjunction with ESLint, it can format code according to the rules set by ESLint.

Install Prettier-related dependencies for ESLint.

1

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

Description of the role of each package.

  • eslint-config-prettier: disables ESLint rules that conflict with Prettier.
  • eslint-plugin-prettier: Run Prettier as an ESLint rule so that code can be fixed automatically with ESLint’s --fix.

Create configuration file .prettierrc.

1
2
3
4
5
6
7
8

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false
}

Edit .eslintrc.js to configure ESLint.

Complete ESLint configuration example.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
    'airbnb-typescript',
    // 'plugin:react/recommended', // Since the airbnb rules already include the react rules, there is no need to add
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: ['tsconfig.json'],
  },
  plugins: ['react', '@typescript-eslint', 'unused-imports'],
  ignorePatterns: ['build'], // Ignore the specified directory
  rules: {
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
    'import/prefer-default-export': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': [
      'warn',
      { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
    ],
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ],
    'no-param-reassign': ['error', { props: false }], // Properties that allow modification of parameters
    'import/extensions': [
      // Allow to ignore the suffix of imported files
      'error',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': [
      // JSX file extensions are allowed
      'error',
      {
        extensions: ['.jsx', '.tsx'],
      },
    ],
    'react/react-in-jsx-scope': 'off', // Allow unwritten import of React (version >= 17)
    'react/prop-types': 'off', // Turn off React's type checking rules and use TypeScript checking instead
    'no-void': [
      // Allow void operators
      'error',
      {
        allowAsStatement: true,
      },
    ],
  },
  settings: {
    'import/resolver': {
      // Allow importing files with the extension js, jsx, ts, tsx in src
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
}

Add ESLint exception .eslintignore to exclude files or directories that do not require lint.

1
2
3
4
5
6

build/
public/
**/node_modules/
*.config.js
.*lintrc.js
/*.*

Automation

To facilitate batch formatting of code, you can add an automated formatting script to package.json.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --ext src/**/*.{js,jsx,ts,tsx}",
    "format": "eslint --cache --fix src/**/*.{js,jsx,ts,tsx} && prettier --write src/**/*.{js,jsx,ts,tsx}"
  },
...

Then you can use yarn run lint and yarn run format to batch check and fix errors.