You may create a new react app with typescript like so:

1

npx create-react-app my-app --template typescript

Now let’s setup eslint and prettier.

Remove eslintConfig from package.json.

Install prettier using these commands:

1
2
3

yarn add --dev --exact prettier
# these are for making eslint and prettier to play well together
yarn add --dev eslint-config-prettier eslint-plugin-prettier

Create config files like this:

1

touch .eslintrc.js .eslintignore .prettierrc.js .prettierignore

Use same contents for both ignore files:

build
node_modules
.github

You can use cli init command for eslint and prettier config, but here’s a ready-to-go scripts:

 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

// .eslintrc.js
module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
    },
    extends: [
        'prettier',
        'prettier/prettier',
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:prettier/recommended',
        'plugin:jsx-a11y/strict',
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 2020,
        sourceType: 'module',
    },
    plugins: ['react', 'jsx-a11y', '@typescript-eslint'],
    rules: {
        'react-hooks/exhaustive-deps': 'error',
        'no-var': 'error',
        'brace-style': 'error',
        'prefer-template': 'error',
        radix: 'error',
        'space-before-blocks': 'error',
        'import/prefer-default-export': 'off',
    },
    overrides: [
        {
            files: [
                '**/*.test.js',
                '**/*.test.jsx',
                '**/*.test.tsx',
                '**/*.spec.js',
                '**/*.spec.jsx',
                '**/*.spec.tsx',
            ],
            env: {
                jest: true,
            },
        },
    ],
};

1
2
3
4
5
6
7
8
9

//.prettierrc.js
module.exports = {
    printWidth: 100,
    tabWidth: 2,
    singleQuote: true,
    semi: false,
    trailingComma: 'all',
    arrowParens: 'avoid',
};

Add these scripts to package.json file:

"lint": "eslint . --fix",
"format": "prettier . --write"

Now you are good to run yarn lint and yarn format.

Let’s setup git precommit hooks with husky and lint-staged.

Install lint-staged first:

1

yarn add --dev lint-staged

Add these lines to your package.json file:

"lint-staged": {
    "*.{js,ts,tsx}": [
        "eslint --quiet --fix"
    ],
    "*.{json,md,html}": [
        "prettier --write"
    ]
}

Install and configure husky like so:

1
2
3

npx husky-init
yarn
npx husky add .husky/pre-commit "yarn lint-staged"

That’s pretty much.

Happy coding! :)