目前 TypeScript 的代码检查主要有两个方案：使用 TSLint 或使用 ESLint + typescript-eslint-parser

ESLint

由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 typescript-eslint-parser 替代掉默认的解析器.

由于 typescript-eslint-parser 对一部分 ESLint 规则支持性不好，故我们需要安装 eslint-plugin-typescript，弥补一些支持性不好的规则

安装

1
2
3
4
npm install eslint --save-dev
npm install typescript-eslint-parser --save-dev
npm install eslint-plugin-typescript --save-dev
npm install --save-dev eslint-plugin-react # 检查 tsx 文件

配置文件

一般为根目录.eslintrc.js 或 .eslintrc.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
    parser: 'typescript-eslint-parser',
    plugins: [
        'typescript'
    ],
    rules: {
        // @fixable 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
        'eqeqeq': [
            'error',
            'always',
            {
                null: 'ignore'
            }
        ],
        // 类和接口的命名必须遵守帕斯卡命名法，比如 PersianCat
        'typescript/class-name-casing': 'error'
    }
}

以上配置中，我们指定了两个规则，其中 eqeqeq 是 ESLint 原生的规则（它要求必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外），typescript/class-name-casing 是 eslint-plugin-typescript 为 ESLint 增加的规则（它要求类和接口的命名必须遵守帕斯卡命名法，比如 PersianCat）

检查

检查整个项目的 ts 文件
package.json

1
2
3
"scripts": {
    "eslint": "eslint src --ext .ts, tsx"
}

npm run eslint

TSLint

安装

1
npm install --save-dev tslint

配置文件

tslint.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "rules": {
        // 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
        "triple-equals": [
            true,
            "allow-null-check"
        ]
    },
    "linterOptions": {
        "exclude": [
            "**/node_modules/**"
        ]
    }
}

检查

检查整个项目的 ts 文件
package.json

1
2
3
"scripts": {
    "tslint": "tslint --project . src/**/*.ts src/**/*.tsx",
}

npm run eslint

来源

广告

阿里云活动云服务器低至
1核-2G-1M，1年89元，3年229。
2核-4G-3M，2年469元，3年799。
2核-8G-5M，3年899元。
新老客户都有优惠 点击查看详情/购买
腾讯云现在活动
1核 2G 1M 88一年
2核 4G 5M 3年只要998。 点击查看详情/购买