在TS项目中，如何优雅的使用ESLint和Prettier构建代码工作流

对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint，甚至把仓库作为测试平台，而 ESLint 的 TypeScript 解析器也成为独立项目，专注解决双方兼容性问题。  最近在我的项目的编码规范中全量的用ESLint代替了TSLint,针对其中遇到的问题做一个记录。

• 用ESLint来规范Typescript代码

• 用ESLint来规范React代码

• 结合Prettier和ESLint来规范代码

• 在VSCode中使用ESLint

• husky和lint-staged构建代码工作流

• gitlab的CI/CD来规范代码

一、用ESLint来规范Typescript代码

首先安装依赖：

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

这三个依赖分别是：

• eslint: ESLint的核心代码

• @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码

• @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,
    }                               
}

• 在ts项目中必须执行解析器为@typescript-eslint/parser，才能正确