npx create-react-app 配置eslint(ts版本)

一、适用版本：5.x

create-react-app版本查看

npm info create-react-app

返回

create-react-app@5.0.1 | Proprietary | deps: 11 | versions: 103

二、配置自定义eslint

2.1 安装cra

npx create-react-app xxx --template typescript

2.2 配置eslint

完成后在项目根目录下新建.eslintrc.js，填上以下内容

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
    },
    parser: '@typescript-eslint/parser',
    extends: [
        "react-app",
        "react-app/jest",
    ],
    rules: {
        // 强制使用三等号
        eqeqeq: ['error', 'always'],
        // 禁止使用var
        'no-var': 'error',
        // 禁止使用分号
        semi: ['error', 'never'],
    },
}

2.3 配置编辑器

以webstorm为例

2.4 验证

三、特别说明

1. 'react-app' 和 'react-app/jest' 这两个规则需要 eslint-config-react-app,这两个规则包已经包含eslint:recommended、plugin:@typescript-eslint/recommended、plugin:react/recommended这三个包规则，具体可以查看www.npmjs.com/package/esl…