聊聊Angular中怎么將遷移tslint至eslint

本篇文章帶大家繼續angular的學習，對比一下tslint和eslint，介紹一下Angular中怎么將遷移tslint至eslint，希望對大家有所幫助！

大家好，最近做了Angular從12到13的升級，官方自動把angular.json中的tslint配置去除了，那么咱也最好遵從官方安排用起了eslint。【相關教程推薦：《angular教程》】

tslint vs eslint

如何遷移

1. 安裝eslint依賴，運行以下命令：

ng add @angular-eslint/schematics

運行結果：

• .eslintrc.json文件自動在root生成，默認使用@angular-eslinteslint插件。

{   "root": true,   "ignorePatterns": [     "projects/**/*"   ],   "overrides": [     {       "files": [         "*.ts"       ],       "parserOptions": {         "project": [           "tsconfig.json"         ],         "createDefaultProgram": true       },       "extends": [         "plugin:@angular-eslint/recommended",         "plugin:@angular-eslint/template/process-inline-templates"       ],       "rules": {         "@angular-eslint/directive-selector": [           "error",           {             "type": "attribute",             "prefix": "app",             "style": "camelCase"           }         ],         "@angular-eslint/component-selector": [           "error",           {             "type": "element",             "prefix": "app",             "style": "kebab-case"           }         ]       }     },     {       "files": [         "*.html"       ],       "extends": [         "plugin:@angular-eslint/template/recommended"       ],       "rules": {}     }   ] }

• 以下eslint相關的cli配置被添加至angular.json，今后如果通過ng命令行生成lib或者application，將會自動在該模塊下生成.eslintrc.json

"cli": { 	    "defaultCollection": "@angular-eslint/schematics"   }

2. 移除或替換tslint相關文件或者配置

• 刪除根目錄或模塊下的tslint.json
• 刪除tslint相關dev依賴包，如tslint或者typescript-tslint-plugin等
• （如有）在tsconfig.json中刪除tslint-plugin相關配置，如

• 將angular.json下的tslint配置（如有）改為eslint，可能需要手動修改

原始tslint配置：

修改后的eslint配置（e.g.配置為在projects/lint-test目錄下執行lint）：

3. 如需暫時關閉一些代碼或者文件的eslint檢查

• 在代碼上方添加以下注釋可暫時關閉該代碼eslint檢查

/* eslint-disable */ const some_un_used_var;

• 可以在注釋中加入eslint檢查報錯時的rule以表明暫時關閉檢查的原因。例如以下代碼，不希望某未用變量被eslint檢查出來而拋錯

/* eslint-disable @typescript-eslint/no-unused-vars */ const some_un_used_var;

• 需要關閉某些文件的eslint檢查，可添加.eslintignore文件在root下
• 可在.eslintrc中配置需要lint檢查的pattern（本文不贅述，官方介紹）

4. 檢驗是否可以使用

運行lint命令

ng lint

如運行成功，那么恭喜你遷移完成！

（可選）其他可配套的eslint插件

• eslint-plugin-deprecation：驗證代碼是否過時
• eslint-plugin-header：驗證文件頭部注釋是否遵循一定規則（可用于版本，專利校驗等）
• eslint-plugin-import：驗證import地址拼寫或者名字錯誤，語法等
• eslint-plugin-prefer-arrow：驗證使用箭頭函數
• eslint-plugin-unicorn：驗證js，ts語法相關
• eslint-plugin-jsdoc：文檔相關
• …

可在.eslintrc.json中配置（官方文檔）

（可選）配置VS code

安裝eslint插件

保存時VS code自動修正eslint相關問題

在.vscode/settings.json中設置

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

或者在File->Preferences->Settings下搜索onsave設置，可找到eslint相關設置