对于Typescript项目的编码标准，主要有两种选择：ESLint和TSLint。ESLint不仅可以规范js代码，还可以通过配置解析器来规范TS代码。此外，由于性能问题，TypeScript官方决定全面采用ESLint，甚至将仓库作为测试平台，而ESLint的TypeScript解析器也成为了一个独立的项目，重点解决双方的兼容性问题。最近在自己项目的编码规范中使用ESLint替代TSLint，遇到的问题记录一下。使用ESLint规范Typescript代码使用ESLint规范React代码结合Prettier和ESLint规范代码在VSCode中使用ESLinthusky和lint-staged构建代码工作流GitlabCI/CD规范代码原文在我的博客：https://github.com/forthealll...欢迎star和收藏1.使用ESLint规范Typescript代码首先安装依赖：npmi-deslint@typescript-eslint/parser@typescript-eslint/eslint-plugin这三个依赖是：eslint：ESLint的核心code@typescript-eslint/parser:ESLint的解析器，用于解析typescript，检查和规范Typescriptcode@typescript-eslint/eslint-plugin:这是一个ESLint插件，里面包含了各种定义一个很好的检测Typescript代码的规范安装了这三个依赖包之后,在根目录下新建一个.eslintrc.js文件，里面定义了ESLint的基本配置。最简单的配置如下：module.exports={parser:'@typescript-eslint/parser',//定义ESLint的parserextends:['plugin:@typescript-eslint/recommended'],//定义继承的子规范byfilesplugins:['@typescript-eslint'],//定义eslint文件依赖的插件env:{//指定代码的运行环境browser:true,node:true,}}解析器ts项目中必须执行的是@typescript-eslint/parser，为了正确检测和规范ts代码env环境变量配置，console属性只存在于浏览器环境中，如果不设置浏览器支持,然后它可能会报告控制台未定义错误2.使用ESLint规范React代码如果你的TS项目中同时使用了React，那么为了检测和规范React代码的编写，你必须安装插件eslint-plugin-react，并且然后添加配置：module.exports={parser:'@typescript-eslint/parser',extends:['plugin:react/recommended''plugin:@typescript-eslint/recommended'],//使用推荐的React代码检测specificationplugins:['@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代码定义你的编码约定。3.结合Prettier和ESLint规范代码?Prettier中文意思是漂亮漂亮。它是一种流行的代码格式化工具。让我们看看如何结合ESLint使用它。首先我们需要安装三个依赖：npmi-gprettiereslint-config-prettiereslint-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：{“反应”：{“pragma”：“反应”，“版本”：“检测”}}，parserOptions：{“ecmaVersion”：2019，“sourceType”：'module'，“ecmaFeatures”：{jsx：true}},恩v:{browser:true,node:true,}在上面新增的extends的配置中：prettier/@typescript-eslint：使@typescript-eslint中的样式规范失效，按照prettierplugin:prettier/中的样式规范推荐：使用prettier中的样式规范，如果ESLint检测到prettier的格式问题，也会以error的形式抛出格式问题##4.在VSCode中集成ESLint配置为了方便开发，我们可以集成ESLint在VSCodeConfiguration中，以便在保存代码或更改代码时自动执行ESLint修复过程首先需要安装VSCode的ESLint插件。安装插件后，在settings.json文件中修改其配置文件如下：{"eslint.enable":true,//是否启用vscode的eslint"eslint.autoFixOnSave":true,//是否自动fixeslintwhensaving"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中，typescript和typescriptreact必须以{language:XXX}的形式指定。五、husky和lint-staged构建代码工作流程先来看husky，Husky可以帮你屏蔽不好的代码提交和推送，首先我们在package.json中定义如下脚本："scripts":{"lint":"eslintsrc--fix--ext.ts,.tsx"}然后在package.json中定义husky配置："husky":{"hooks":{"pre-commit":"npmrunlint"}}，我们执行git的hook阶段对应的命令，比如上面的例子是pre-commithook中的，也就是提交前的lint检测。接下来，让我们看看lint-staged。上面我们在huskypre-comithook中执行了一条npm命令来进行lint验证。除了定义一个npmlint命令，我们还可以直接使用lint-staged在提交前检测代码规范。使用lint-staged规范代码的方式如下。我们修改package.json文件如下：{"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{.ts,.tsx}":["eslint","gitadd"]}}也会在git提交时进行lint检测。6、Gitlab的CI/CD对代码进行规范化只使用githooks进行代码规范化检测是有问题的。我们可以通过--no-verify来跳过gitcommit时的代码标准化检测。但在某些情况下，对于一个重要的分支，分支上的代码必须完全通过代码规范检查。这时候我们可以使用gitlab的CI/CD。还要在package.json中添加lintnpm命令："scripts":{"lint":"eslintsrc--fix--ext.ts,.tsx"}然后将.gitlab-ci.yml文件添加到根目录directory，这个文件里的配置是：stages:-lintbefore_script:-gitfetch--all-npminstalllint:stage:lintscript:-npmrunlintonly-specificbranch1-specificbranch2然后配置对应的gitlabrunner，这里不做详细描述，最终的结果是我们指定的分支上的commit或者merge会被配置的命令检测到。这确保特定分支不受gitcommitskip操作--no-verify的影响。
