首頁>網頁設計教程>Javascript教程

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

作者：Eve Cole 更新時間：2022-09-13 09:27:28
這篇文章帶大家繼續angular的學習，比較一下tslint和eslint，介紹一下Angular中怎麼將遷移tslint至eslint，希望對大家有幫助！

如何快速入門VUE3.0：進入學習

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

tslint vs eslint

lint類型用處現狀
tslint用來檢查ts語法規範的插件已經不再維護；Angular從11起棄用
eslint檢查js/ts代碼規範仍在維護，官方推薦

如何遷移

1. 安裝eslint依賴，執行以下指令：

 ng add @angular-eslint/schematics

運行結果：

  • .eslintrc.json檔案自動在root生成，預設使用@angular-eslint eslint外掛程式。
 {
  "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相關配置，如

1.png

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

原始tslint配置：

2.png

修改後的eslint配置（eg配置為在projects/lint-test目錄下執行lint）：

3.png

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插件

4.png

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

在.vscode/settings.json中設置

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

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

5.png

相關文章