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

大家好，最近做了Angular從12到13的升級(jí)，官方自動(dòng)把a(bǔ)ngular.json中的tslint配置去除了，那么咱也最好遵從官方安排用起了eslint?！鞠嚓P(guān)教程推薦：《angular教程》】

tslint vs eslint

如何遷移

1. 安裝eslint依賴(lài)，運(yùn)行以下命令：

ng add @angular-eslint/schematics

運(yùn)行結(jié)果：

• .eslintrc.json文件自動(dòng)在root生成，默認(rèn)使用@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相關(guān)的cli配置被添加至angular.json，今后如果通過(guò)ng命令行生成lib或者application，將會(huì)自動(dòng)在該模塊下生成.eslintrc.json

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

2. 移除或替換tslint相關(guān)文件或者配置

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

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

原始tslint配置：

修改后的eslint配置（e.g.配置為在projects/lint-test目錄下執(zhí)行l(wèi)int）：

3. 如需暫時(shí)關(guān)閉一些代碼或者文件的eslint檢查

• 在代碼上方添加以下注釋可暫時(shí)關(guān)閉該代碼eslint檢查

/* eslint-disable */ const some_un_used_var;

• 可以在注釋中加入eslint檢查報(bào)錯(cuò)時(shí)的rule以表明暫時(shí)關(guān)閉檢查的原因。例如以下代碼，不希望某未用變量被eslint檢查出來(lái)而拋錯(cuò)

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

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

4. 檢驗(yàn)是否可以使用

運(yùn)行l(wèi)int命令

ng lint

如運(yùn)行成功，那么恭喜你遷移完成！

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

• eslint-plugin-deprecation：驗(yàn)證代碼是否過(guò)時(shí)
• eslint-plugin-header：驗(yàn)證文件頭部注釋是否遵循一定規(guī)則（可用于版本，專(zhuān)利校驗(yàn)等）
• eslint-plugin-import：驗(yàn)證import地址拼寫(xiě)或者名字錯(cuò)誤，語(yǔ)法等
• eslint-plugin-prefer-arrow：驗(yàn)證使用箭頭函數(shù)
• eslint-plugin-unicorn：驗(yàn)證js，ts語(yǔ)法相關(guān)
• eslint-plugin-jsdoc：文檔相關(guān)
• …

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

（可選）配置VS code

安裝eslint插件

保存時(shí)VS code自動(dòng)修正eslint相關(guān)問(wèn)題

在.vscode/settings.json中設(shè)置

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

或者在File->Preferences->Settings下搜索onsave設(shè)置，可找到eslint相關(guān)設(shè)置