IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. TypeScript
  3. 检查 TypeScript

最终的
检查 TypeScript

最后修改时间：2023 年 10 月 11 日

所需插件：

Javascript and TypeScript - 该插件仅在 IntelliJ IDEA Ultimate 中可用，默认情况下启用。

TypeScript 代码推荐的 linter 是ESLint，它带来了广泛的 linting 规则，也可以通过插件进行扩展。当您键入时，IntelliJ IDEA 会直接在编辑器中显示 ESLint 报告的警告和错误。从ESLint了解更多信息。

笔记

您还可以按如下所述使用 TSLint 。请注意，TSLint 自 2019 年起已被弃用。有关更多信息，请参阅TSLint 官方网站。

当在项目 ESLint 配置中设置为解析器时，IntelliJ IDEA 会突出显示.ts和.tsx文件中 ESLint 报告的错误。@typescript-eslint/parser从typescript-eslint repo 中的自述文件了解更多信息。

安装和配置 ESLint

  1. 在嵌入式终端( ) 中，键入以下命令之一：AltF12

    • npm install --g eslint用于全局安装。

    • npm install --save-dev eslint安装 ESLint 作为开发依赖项。

  2. 默认情况下，ESLint 处于禁用状态。在设置 |中启用它 语言和框架 | JavaScript | 代码质量工具| ESLint如在 IntelliJ IDEA 中激活和配置 ESLint中所述。

在新项目中使用 ESLint for TypeScript

  1. 在嵌入式终端( ) 中，键入：AltF12

    npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

    笔记

    如果您全局安装了 ESLint，@typescript-eslint/eslint-plugin也请全局安装。从@typescript-eslint/eslint-plugin官方文档了解有关安装和版本兼容性的更多信息。

  2. 在.eslintrc配置文件或 package.json 下eslintConfig， 添加：

    {
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "plugin:@typescript-eslint/recommended"
    ]
}

使用 ESLint 抑制 TypeScript 代码的 linting

  • 如果您已经在使用@typescript-eslint/parser但不想使用 ESLint 检查 TypeScript 代码，请将.ts或.tsx添加到.eslintignore文件中。

ESLint 4.0

如果您使用的是 ESLint 的早期版本，则必须安装babel-eslint、typescript-eslint-parser、 或eslint-plugin-typescript因为 ESLint 4.0 及更早版本不支持作用域包。

使用 babel-eslint

  1. 在嵌入式终端( ) 中，键入：AltF12

    npm install eslint babel-eslint --save-dev

    从babel-eslint官方文档了解有关安装和版本兼容性的更多信息。

  2. 在.eslintrc配置文件或 package.json 下eslintConfig， 添加：

    {
    "parser": "babel-eslint"
}

使用 typescript-eslint-parser

  1. 在嵌入式终端( ) 中，键入：AltF12

    npm install typescript-eslint-parser --save-dev

    从typescript-eslint-parser官方文档了解更多信息。

  2. 在.eslintrc配置文件或 package.json 下eslintConfig， 添加：

    {
    "parser": "typescript-eslint-parser"
}

使用 eslint-plugin-typescript

  1. 在嵌入式终端( ) 中，键入：AltF12

    npm install typescript-eslint-parser eslint-plugin-typescript --save-dev

    笔记

    如果您全局安装了 ESLint，请同时全局安装 eslint-plugin-typescript。从eslint-plugin-typescript官方文档了解更多信息。

  2. 在.eslintrc配置文件或 package.json 下eslintConfig， 添加：

    {
    "parser": "typescript-eslint-parser",
    "plugins": [
        "eslint-plugin-typescript"
    ]
}

TSLint

您还可以使用IntelliJ IDEA 内部的TSLint代码验证工具，在不运行应用程序的情况下检查 TypeScript 代码中最常见的错误。当该工具激活时，它会检查所有打开的 TypeScript 文件并标记检测到的问题。

警告

TSLint 自 2019 年起已被弃用。有关更多信息，请参阅TSLint 官方网站。

建议您如上所述使用 ESLint 检查 TypeScript 代码。

要查看问题的描述，请将鼠标悬停在突出显示的代码上。默认情况下，IntelliJ IDEA 根据 TSLint 配置文件中的严重性级别标记检测到的问题。请参阅配置 TSLint 突出显示以了解如何覆盖这些设置。

TSLint：突出显示错误和警告，问题的描述显示在工具提示中。

在你开始之前

安装 TSLint

在 IntelliJ IDEA 中激活和配置 TSLint

默认情况下，IntelliJ IDEA 使用项目node_modules文件夹中的 TSLint 包以及存储当前文件的文件夹中的tslint.json配置文件。如果在当前文件夹中未找到tslint.json，IntelliJ IDEA 将在其父文件夹中查找，直到项目根目录。

如果您有多个package.json文件，其中 TSLint 被列为依赖项，IntelliJ IDEA 会为每个package.json启动一个单独的进程，并处理其下面的所有内容。这使您可以将特定的 TSLint 版本或一组特定的插件应用到 monorepo 或具有多个 TSLint 配置的项目中的每个路径。

此行为在所有新的 IntelliJ IDEA 项目中都是默认行为。要在以前创建的项目中启用它，请转到语言和框架| TypeScript | “设置”对话框 ( )中的TSLint并选择“自动 TSLint”配置选项。CtrlAlt0S

您还可以手动配置 TSLint 以使用自定义 TSLint 包和tslint.json并指定一些附加规则。

为 TSLint 配置突出显示

默认情况下，IntelliJ IDEA 根据 TSLint 配置文件中的严重性级别标记检测到的错误和警告。例如，错误用红色波浪线突出显示，而警告则用黄色背景标记。有关更多信息，请参阅代码检查和更改检查严重性。

更改 TSLint 配置中规则的严重性级别

  • 在 TSLint 配置文件中，找到要编辑的规则并将其 ID 设置为warning或error。从TSLint 官方网站了解更多信息。

您可以覆盖 TSLint 配置文件中的严重性，以便 IntelliJ IDEA 忽略它们并将 linter 报告的所有内容显示为错误、警告或以自定义颜色。

忽略配置中的严重性级别

  1. 在“设置”对话框 ( ) 中，转到编辑器 | 检查。检查页面打开。CtrlAlt0S

  2. 在中央窗格中，转到TypeScript | TSLint。

  3. 在右窗格中，清除“使用配置文件中的规则严重性”复选框，然后选择要使用的严重性级别而不是默认级别。

    为 TSLint 指定自定义严重性级别

从 TSLint 配置文件导入代码样式

IntelliJ IDEA 了解tslint.json、tslint .yaml或tslint.yml配置文件中描述的一些 TSLint 规则，并允许您将它们应用到项目中的TypeScript 代码样式配置。

  • 当您第一次打开项目时，IntelliJ IDEA 会自动从项目tslint.json、tslint.yaml或tslint.yml导入代码样式。

  • 如果tslint.json、tslint.yaml或tslint.yml已更新（手动或通过版本控制），请在编辑器中将其打开，然后从上下文菜单中选择“应用 TSLint 代码样式规则” 。

    从编辑器导入 TSLint 代码样式规则：上下文菜单

    或者，只需对“应用 TSLint 的代码样式？”回答“是”即可。问题位于文件顶部。

    IntelliJ IDEA 建议从 tslint.json 导入代码样式

TSLint 快速修复

IntelliJ IDEA 允许您自动修复 TSLint 报告的一些问题。

您可以抑制当前文件甚至当前行的 TSLint 规则。IntelliJ IDEA 自动生成格式为/* tslint:disable:<rule name>或 的禁用注释// tslint:disable-next-line:<rule name>，并将它们分别放置在文件顶部或当前行上方。

动态抑制 TSLint 规则

  1. 将插入符号放在 TSLint 报告的错误或警告处，然后按。AltEnter

  2. 选择您要禁用的规则的快速修复，然后按。0→

  3. 从列表中，选择抑制当前文件的 <规则名称>或抑制当前行的 <规则名称>。

    通过添加禁用注释来动态禁用 TSLint 规则

也可以看看

程序

外部链接