使用類型資料進行 Linting
一些 typescript-eslint 規則利用了 TypeScript 類型檢查 API 的強大功能,能對你的程式提供更深入的深入見解。若要運用 TypeScript 的附加功能,你需要對組態檔做兩項輕微的變更。
- 平面組態
- 舊版組態
- 將
TypeChecked
新增到任何你使用的預設組態檔的名稱,特別是recommended
、strict
和stylistic
。 - 新增
languageOptions.parserOptions
來告知我們的解析器如何找到每個原始檔的 TSConfig。
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
...tseslint.configs.recommendedTypeChecked,
{
languageOptions: {
parserOptions: {
project: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
);
import.meta.dirname
僅存在於 Node.js 20.11.0 / 21.2.0 以上版本的 ESM 檔案中。
對於 CommonJS 模組和/或較舊版本的 Node.js,使用 __dirname
或其他替代方案。
更多詳情
tseslint.configs.recommendedTypeChecked
是我們提供的另一個 共用設定。此設定包含其他額外需要類型資訊的推薦規則。parserOptions.project: true
表示尋找每個原始檔案最接近的tsconfig.json
(請參閱 Parser#project)。parserOptions.tsconfigRootDir
告知我們的剖析器專案根目錄的絕對路徑(請參閱 Parser#tsconfigRootDir)。
- 將
-type-checked
新增到目前使用的任何預設設定名稱,也就是recommended
、strict
和stylistic
。 - 新增
parserOptions
以告知我們的剖析器,如何尋找每個原始檔案的 TSConfig。
/* eslint-env node */
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-type-checked',
],
plugins: ['@typescript-eslint'],
parser: '@typescript-eslint/parser',
parserOptions: {
project: true,
tsconfigRootDir: __dirname,
},
root: true,
};
更多詳情
plugin:@typescript-eslint/recommended-type-checked
是我們提供的另一個 共用設定。此設定包含其他額外需要類型資訊的推薦規則。parserOptions.project: true
表示尋找每個原始檔案最接近的tsconfig.json
(請參閱 Parser#project)。parserOptions.tsconfigRootDir
告知我們的剖析器專案根目錄的絕對路徑(請參閱 Parser#tsconfigRootDir)。
ESLint 設定檔可能會開始收到關於類型資訊的剖析錯誤訊息。請參閱 我們的 TSConfig 加入常見問答。
完成後,執行您之前執行相同的 lint 指令。您可能會看到新規則根據類型資訊回報錯誤!
共用設定
如果您在之前的步驟啟用了 strict
共用設定 和/或 stylistic
共用設定,請務必將它們分別替換為 strictTypeChecked
和 stylisticTypeChecked
,以新增它們經過類型檢查的規則。
- 平面組態
- 舊版組態
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.strict,
...tseslint.configs.stylistic,
...tseslint.configs.strictTypeChecked,
...tseslint.configs.stylisticTypeChecked,
// ...
);
/* eslint-env node */
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/strict',
'plugin:@typescript-eslint/stylistic',
'plugin:@typescript-eslint/strict-type-checked',
'plugin:@typescript-eslint/stylistic-type-checked',
],
// ...
};
您可以在我們的 規則文件 和 共用設定檔文件 中深入了解 typescript-eslint 提供的規則。
常見問題
我可以自訂用於類型化程式檢查的 TSConfig 嗎?
project
選項可以使用以下任一種方式開啟
true
:永遠使用最接近來源檔案的tsconfig.json
字串 | 字串陣列
:任意數量的 glob 路徑,以比對相對於parserOptions.tsconfigRootDir
的 TSConfig 檔案,或如果沒有提供的話,比對目前的作業目錄
例如,如果您使用特定的 tsconfig.eslint.json
進行程式檢查,您會指定
- 平面組態
- 舊版組態
export default tseslint.config({
// ...
languageOptions: {
parserOptions: {
project: './tsconfig.eslint.json',
tsconfigRootDir: import.meta.dirname,
},
},
// ...
});
module.exports = {
// ...
parserOptions: {
project: './tsconfig.eslint.json',
tsconfigRootDir: __dirname,
},
// ...
};
請參閱 @typescript-eslint/parser
文件 以取得更多詳細資訊。
如果您的專案是一個多套件單一存放庫,請參閱 關於設定單一存放庫的文件。
如何為檔案子集停用類型感知程式檢查?
您可以結合 ESLint 的 覆寫 設定檔與我們的 disable-type-checked
設定檔來針對特定檔案子集關閉類型感知程式檢查。
- 平面組態
- 舊版組態
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommendedTypeChecked,
...tseslint.configs.stylisticTypeChecked,
{
languageOptions: {
parserOptions: {
project: true,
},
},
},
{
files: ['**/*.js'],
...tseslint.configs.disableTypeChecked,
},
);
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended-type-checked',
'plugin:@typescript-eslint/stylistic-type-checked',
],
plugins: ['@typescript-eslint'],
parser: '@typescript-eslint/parser',
parserOptions: {
project: true,
tsconfigRootDir: __dirname,
},
root: true,
overrides: [
{
files: ['*.js'],
extends: ['plugin:@typescript-eslint/disable-type-checked'],
},
],
};
如果您從其他外掛程式使用類型感知規則,您需要手動停用這些規則或使用它們提供的預先設定好的設定檔來停用它們。
效能如何?
類型化的規則會帶來一個缺點。在您的設定檔中包含 parserOptions.project
時,您會遭到效能損失的懲罰,因為您要求 TypeScript 在 ESLint 進行程式檢查之前,針對您的專案執行建置。對於小型專案而言,這個過程所需時間可以忽略(幾秒或更短的時間);對於大型專案而言,則可能需要較長的時間。
大多數我們的使用者都不介意這個損失,因為類型感知靜態分析規則的強大功能和安全性非常值得這個代價。此外,大多數使用者會主要透過快取的 IDE 外掛程式來使用程式檢查錯誤,因此並不會受到相同的懲罰。這表示他們通常只會在執行推播之前或透過持續整合來執行完整的程式檢查,這時額外的時間通常不重要。
我們強烈建議您使用有型別提示的 linting,但提供上述資訊讓您可以自行做出明智的決定。
疑難排解
如果您在執行此操作時遇到問題,請參閱我們的 疑難排解和常見問題集頁面。