TypeScript ESLint Prettier 配置指南与GitLab CI集成

正文

在TypeScript项目的编码规范实践中，主要存在两种工具选择：ESLint和TSLint。ESLint不仅适用于JavaScript代码规范，通过配置相应的解析器，同样能够有效规范TypeScript代码。鉴于性能考量，TypeScript官方已决定全面转向采用ESLint，并将其仓库作为测试平台。与此同时，ESLint的TypeScript解析器也已成为独立项目，专门致力于解决两者的兼容性问题。

近期，我在项目中全面使用ESLint替代了TSLint，并针对实施过程中遇到的问题进行了记录与总结。

使用ESLint规范TypeScript代码
使用ESLint规范React代码
结合Prettier与ESLint进行代码规范
在VSCode中集成ESLint
利用Husky和lint-staged构建代码工作流
通过GitLab CI/CD实施代码规范

原文发布于我的博客：https://github.com/forthealll...

欢迎Star和收藏

一、使用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代码规范检测规则。

安装完上述三个依赖包后，在项目根目录下新建.eslintrc.js文件，用于定义ESLint的基础配置。一个最简配置示例如下：

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

在TypeScript项目中，必须指定解析器为@typescript-eslint/parser，才能正确检测并规范TypeScript代码。
env环境变量配置用于指定代码运行环境。例如，console属性仅在browser环境下存在，若未设置支持browser环境，可能会报错console is undefined。

二、使用ESLint规范React代码

如果在TypeScript项目中同时使用了React，为了检测并规范React代码的书写，必须安装插件eslint-plugin-react，并增加相应配置：

module.exports = {
    parser:  '@typescript-eslint/parser',
    extends: [
    'plugin:react/recommended'  
    'plugin:@typescript-eslint/recommended'
    ],                              //使用推荐的React代码检测规范
    plugins: ['@typescript-eslint'],
    env:{                         
        browser: true,
        node: true,
    },
    settings: {             //自动发现React的版本，从而进行规范react代码
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }, 
    parserOptions: {        //指定ESLint可以解析JSX语法
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures":{
            jsx:true
        }
    }
    rules: {
    }
}

在Rules配置中，可以自定义针对React代码的编码规范。

三、结合Prettier与ESLint进行代码规范

Prettier意为“漂亮的”，是一款流行的代码格式化工具。接下来介绍如何将其与ESLint结合使用。首先需安装三个依赖：

npm i -g prettier eslint-config-prettier eslint-plugin-prettier

其中各依赖的作用如下：

prettier：Prettier插件的核心代码。
eslint-config-prettier：用于解决ESLint中的样式规范与Prettier中样式规范的冲突，以Prettier的样式规范为准，使ESLint中的相关样式规范自动失效。
eslint-plugin-prettier：将Prettier作为ESLint的规范来使用。

随后，在项目根目录下创建.prettierrc.js文件：

module.exports =  {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": false,
    "jsxBracketSameLine": true,
    "arrowParens": "avoid",
    "insertPragma": true,
    "tabWidth": 4,
    "useTabs": false  
  };

接着，修改.eslintrc.js文件以引入Prettier：

module.exports = {
    parser:  '@typescript-eslint/parser',
    extends:[ 
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
    ],
    settings: {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    },
    parserOptions: {
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures":{
            jsx:true
        }
    },
    env:{
        browser: true,
        node: true,
    }

上述新增的extends配置中：

prettier/@typescript-eslint：使得@typescript-eslint中的样式规范失效，遵循Prettier中的样式规范。
plugin:prettier/recommended：使用Prettier中的样式规范，且若ESLint检测到Prettier的格式问题，同样将其以error形式抛出。

四、在VSCode中集成ESLint配置

为方便开发，我们可以在VSCode中集成ESLint配置，使得代码在保存或变动时自动执行ESLint的fix过程。

首先安装VSCode的ESLint插件，安装完毕后，在settings.json文件中修改其配置如下：

{
       "eslint.enable": true,  //是否开启vscode的eslint
       "eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint
       "eslint.options": {    //指定vscode的eslint所处理的文件的后缀
           "extensions": [
               ".js",
               ".vue",
               ".ts",
               ".tsx"
           ]
       },
       "eslint.validate": [     //确定校验准则
           "javascript",
           "javascriptreact",
           {
               "language": "html",
               "autoFix": true
           },
           {
               "language": "vue",
               "autoFix": true
           },
           {
               "language": "typescript",
               "autoFix": true
           },
           {
               "language": "typescriptreact",
               "autoFix": true
           }
       ]
}

主要注意以下两点：

eslint.options中可通过configFile属性指定eslint规范的绝对路径，默认会向上查找并在根路径中指定。
eslint.validate中必须通过{ language: XXX}的形式来指定typescript和typescriptreact。

五、利用Husky和lint-staged构建代码工作流

首先来看Husky，Husky能够帮助阻挡不良代码的提交和推送。首先我们在package.json中定义如下script：

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

接着在package.json中定义Husky的配置：

"husky": {
   "hooks": {
      "pre-commit": "npm run lint"
    }
},

我们在git的hook阶段执行相应命令，例如上述例子是在pre-commit这个hook（即提交之前）进行lint检测。

接着来看lint-staged，上述我们通过Husky的pre-commit hook执行npm命令来做lint校验。除了定义npm lint命令外，也可以直接使用lint-staged，在提交前检测代码规范。

使用lint-staged规范代码的方式如下，我们修改package.json文件为：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{.ts,.tsx}": [
      "eslint",
      "git add"
    ]
  }
}

同样，在git commit时会执行lint检测。

六、通过GitLab CI/CD实施代码规范

仅通过git hook执行代码规范检测存在一个问题：我们可以在git commit时通过--no-verify来跳过代码规范检测。但在某些情况下，对于某个重要分支，该分支上的代码必须完整通过代码规范检测，此时可以使用GitLab的CI/CD。

同样在package.json中增加一个lint的npm命令：

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

然后在根目录增加.gitlab-ci.yml文件，该文件中的配置为：

stages:
  - lint
before_script:
  - git fetch --all
  - npm install 
lint:
  stage: lint
  script:
    - npm run lint
  only
    - 特定分支1
    - 特定分支2

随后配置相应的GitLab Runner，此处不具体详述。最终结果是，在我们指定的分支上的提交或merge都会进行所配置的命令检测。这样保证了特定分支不受git commit跳过操作--no-verify的影响。

以上就是TypeScript编码规范ESLint和Prettier使用示例详解的详细内容，更多关于TypeScript使用ESLint Prettier的资料请关注本站其它相关文章！

TypeScript项目ESLint与Prettier配置及工作流实战

正文

一、使用ESLint规范TypeScript代码

二、使用ESLint规范React代码

三、结合Prettier与ESLint进行代码规范

五、利用Husky和lint-staged构建代码工作流

六、通过GitLab CI/CD实施代码规范

实用工具推荐