一、用ESLint来规范Typescript代码

首先安装依赖：

npm i -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

这三个依赖分别是：

1)eslint: ESLint的核心代码
2)@typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
3)@typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
安装好这3个依赖包之后，在根目录下新建.eslintrc.js文件，该文件中定义了ESLint的基础配置，一个最为简单的配置如下所示：

module.exports = {
    parser:  '@typescript-eslint/parser', //定义ESLint的解析器
    extends: ['plugin:@typescript-eslint/recommended'],//定义文件继承的子规范
    plugins: ['@typescript-eslint'],//定义了该eslint文件所依赖的插件
    env:{                          //指定代码的运行环境
        browser: true,
        node: true,
    }                               
}

在 package.json 中添加一个 script 来创建一个 npm script 来简化代码检查步骤：

scripts": {
    "eslint": "eslint index.ts",   //检测根目录下的单个文件index.ts
    "lint":"eslint src --ext .ts"  //检测指定目录下的所有ts文件
}

使用 ESLint 检查 tsx 文件

如果需要同时支持对 tsx 文件的检查，则需要对以上步骤做一些调整：

安装 eslint-plugin-reac
npm install --save-dev eslint-plugin-react

package.json 中添加 .tsx 后缀

"scripts": {
    "eslint": "eslint index.ts",
    "lint": "eslint src --ext .ts,.tsx",
}

变更.eslintrc.js配置

module.exports = {
    parser:  '@typescript-eslint/parser', //定义ESLint的解析器
    extends: [
        'plugin:react/recommended' ,       //用于检测tsx文件
        'plugin:@typescript-eslint/recommended'
    ],//定义文件继承的子规范
    plugins: ['@typescript-eslint'],//定义了该eslint文件所依赖的插件
    env:{                          //指定代码的运行环境
        browser: true,
        node: true,
    },
    settings: {             //自动发现React的版本，从而进行规范react代码
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }, 
    parserOptions: {        //指定ESLint可以解析JSX语法
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures":{
            jsx:true
        }
    }                         
}

在 VSCode 中集成 ESLint 检查

在编辑器中集成 ESLint 检查，可以在开发过程中就发现错误，极大的增加了开发效率。

要在 VSCode 中集成 ESLint 检查，我们需要先安装 ESLint 插件，点击「扩展」按钮，搜索 ESLint，然后安装即可。

VSCode 中的 ESLint 插件默认是不会检查 .ts 以及.tsx后缀的,需打开vscode的配置文件setting.json手动设置
通过快捷键（cmd + shift + P）输入settings，可以快速打开

在配置文件中加入下列内容

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ]
}

这时再打开一个 .ts 或.tsx文件，将鼠标移到红色提示处，即可看到这样的报错信息了：

image.png

二、在 TypeScript 中使用 TSLint

TSLint 的使用比较简单，参考官网的步骤安装到本地即可：

npm install --save-dev tslint

创建配置文件 tslint.json

{
    "rules": {
        // 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
        "triple-equals": [
            true,
            "allow-null-check"
        ]
    },
    "linterOptions": {
        "exclude": [
            "**/node_modules/**"
        ]
    }
}

为 package.json 添加 tslint 脚本

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

此时执行 npm run tslint 即可检查整个项目。

在 VSCode 中集成 TSLint 检查

在 VSCode 中安装 tslint 插件即可，安装好之后，默认是开启的状态。

最后编辑于：2019.07.22 18:31:12