对于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,才能正确的检测和规范TS代码
- env环境变量配置,形如console属性只有在browser环境下才会存在,如果没有设置支持browser,那么可能报console is undefined的错误。
二、用ESLint来规范React代码
如果在你的TS项目中同时使用了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