PyCharm 2025.3 Help

TypeScript 代码检查

针对 TypeScript 代码的推荐代码检查工具是 ESLint ,它提供了广泛的代码检查规则,并且可以通过插件扩展。 PyCharm 会在编辑器中直接显示 ESLint 报告的警告和错误,您在输入时即可看到。 详细了解请参阅 ESLint

当在项目的 ESLint 配置中将 @typescript-eslint/parser 设置为解析器时,PyCharm 会高亮显示 .ts .tsx 文件中由 ESLint 报告的错误。 详细了解请参阅 typescript-eslint 存储库中的 README 文件

开始之前

  1. 请确保您的计算机上已安装 Node.js

  2. 配置本地 Node.js 解释器在 Windows Subsystem for Linux 上使用 Node.js配置远程 Node.js 运行时 中所述,在您的项目中配置 Node.js 运行时。

安装 ESLint

ESLint 9 及更高版本

  • 在嵌入的 终端Alt+F12 )中,键入:

    npm install --save-dev eslint @eslint/js typescript typescript-eslint

    pnpm add --save-dev eslint @eslint/js typescript typescript-eslint

    yarn add --dev eslint @eslint/js typescript typescript-eslint

详细了解请参阅 typescript-eslint 官方网站

ESLint 8 及更早版本

  • 在嵌入的 终端Alt+F12 )中,键入:

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

    pnpm add --save-dev eslint @eslint/js typescript-eslint

    yarn add --dev eslint @eslint/js typescript-eslint

详细了解请参阅 typescript-eslint 官方网站

配置文件

根据您使用的 ESLint 版本,PyCharm 可在以下文件类型中识别配置:

ESLint 9 及更高版本

eslint.config.js eslint.config.mjs eslint.config.cjs (扁平格式),详细了解请参阅 ESLint 官方网站

您还可以使用用 TypeScript 编写的配置文件,例如 eslint.config.ts eslint.config.mts eslint.config.cts 。 为此,您需要指定 unstable_ts_config 标志。

  1. Ctrl+Alt+S 打开设置,然后选择 语言与框架 | JavaScript | 代码质量工具 | ESLint

  2. 选择 手动 ESLint 配置

  3. 额外的 eslint 选项 字段中,输入 --flag unstable_ts_config

  4. 点击 应用 以保存更改并关闭对话框。

ESLint 8 及更早版本

  • .eslintrc.* .eslintrc .eslintrc.json .eslintrc.yaml 文件,或其他受支持格式的文件)。

  • .eslintignore

  • package.json ,其中包含 eslintIgnoreeslintConfig 属性。 此配置系统已弃用,详细了解请参阅 ESLint 官方网站

请参阅 ESLint 配置迁移指南 ,了解如何切换到扁平格式。

创建并编辑配置文件

  • 打开配置文件,或在项目根目录中创建一个新配置文件。 根据您使用的 ESLint 版本填写配置文件:

    // @ts-check import eslint from '@eslint/js'; import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended, tseslint.configs.recommended, );

    详细了解请参阅 typescript-eslint 官方网站。

    /* eslint-env node */ module.exports = { extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], root: true, };

    详细了解请参阅 typescript-eslint 官方网站

在 PyCharm 中配置 ESLint

默认情况下,ESLint 会 自动配置。 您也可以选择 手动指定所有配置设置,或禁用 ESLint。

详细了解请参阅 ESLint

使用 ESLint 抑制对 TypeScript 代码的检查

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

检查您的代码

安装并启用后,ESLint 会在您每次打开 TypeScript 文件时自动激活。 您还可以将 ESLint 配置为 在保存时自动检测并修复问题

默认情况下,PyCharm 会根据 ESLint 配置中的严重性级别标记检测到的问题。 请参阅 配置 ESLint 高亮显示 以了解如何覆盖这些设置。

当前文件中检测到的错误的描述及其快速修复可在编辑器中以及在 问题 工具窗口的 文件 选项卡中查看。

所有先前打开的文件中的错误及其快速修复将显示在 问题 工具窗口的 项目错误 选项卡中。 要打开该工具窗口,请点击编辑器右上角的 检查 小部件:

检查小部件

有关更多信息,请参阅 在编辑器中查看问题并应用快速修复“问题” 工具窗口

  • 要在编辑器中查看问题的描述,请将鼠标悬停在高亮显示的代码上。

    ESLint:突出显示错误和警告,并在工具提示中显示问题描述。

    要解决检测到的问题,请点击 ESLint:修复 '<rule name>' 或按 Alt+Shift+Enter

    要解决当前文件中检测到的所有问题,请点击 更多操作Alt+Enter ),然后在列表中选择 ESLint:修复当前文件

    ESLint:解决问题
  • 或者,打开 问题 工具窗口的 文件 选项卡 Alt+6 ,在其中您可以查看问题描述、应用快速修复、导航到源代码中出现错误的片段,并且无需离开该工具窗口即可在 编辑器预览 窗格中修复它们。

    问题工具窗口中的快速修复

    详细了解请参阅 “问题” 工具窗口

  • 您还可以将 ESLint 配置为在保存文件时修复该文件中的所有问题。 要配置此行为,请在 设置 对话框的 ESLint 页面上选择 在保存时运行 eslint --fix 复选框,如 在 PyCharm 中激活并配置 ESLint 中所述。

详细了解请参阅 在编辑器中查看问题并应用快速修复 以及 ESLint

TSLint

您还可以在 PyCharm 中使用 TSLint 代码验证工具,在不运行应用程序的情况下检查 TypeScript 代码中的最常见错误。 启用该工具后,它会对所有已打开的 TypeScript 文件进行检查,并标记检测到的问题。

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

TSLint:突出显示错误和警告,并在工具提示中显示问题描述。

开始之前

  1. 请确保您的计算机上已安装 Node.js

  2. 请确保在您的项目中配置了本地 Node.js 运行时:打开 设置 对话框(Ctrl+Alt+S ),然后转到 语言和框架 | JavaScript 运行时Node 运行时 字段显示项目的默认 Node.js 运行时。 详细了解请参阅 配置本地 Node.js 解释器

  3. 请确保在 设置 | 插件 页面, 已安装 选项卡上已启用必需的 JavaScript and TypeScriptTSLint 插件。 有关详细信息,请参阅 管理插件

安装 TSLint

  • 在嵌入的 终端Alt+F12 )中,键入:

    npm install tslint typescript&#xa0;--save-dev

    详细了解请参阅 TSLint 官方网站

创建 TSLint 配置文件

  • 在嵌入的 终端Alt+F12 )中,键入:

    cd <project root> tslint --init

在 PyCharm 中启用并配置 TSLint

默认情况下,PyCharm 会使用项目 node_modules 文件夹中的 TSLint 包,以及存储当前文件的文件夹中的 tslint.json 配置文件。 如果在当前文件所在的文件夹中找不到 tslint.json 配置文件,PyCharm 会在其父文件夹中继续查找,直至项目根目录。

如果您有多个 package.json 文件将 TSLint 列为依赖项,PyCharm 会为每个 package.json 启动一个单独的进程,并处理其下的所有内容。 这使您能够将特定的 TSLint 版本或特定的一组插件应用到单一存储库或具有多个 TSLint 配置的项目中的每个路径。

在所有新的 PyCharm 项目中,此行为为默认设置。 要在先前创建的项目中启用它,请在 设置 对话框(Ctrl+Alt+S )中转到 语言与框架 | TypeScript | TSLint ,并选择 自动 TSLint 配置 选项。

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

  1. 设置 对话框(Ctrl+Alt+S )中,转到 语言与框架 | TypeScript | TSLint

  2. 选择 手动配置 选项。

  3. 指定 TSLint 包的路径。

  4. 配置文件 区域,指定要使用的配置。

    默认情况下,PyCharm 会首先查找一个 tslint.json tslint.yaml tslint.yml 配置文件。 PyCharm 会从要检查的文件所在的文件夹开始查找,然后在父文件夹中继续查找,直至项目根目录。 如果未找到 tslint.json tslint.yaml tslint.yml 配置文件,TSLint 会使用其默认的内置配置文件。 因此,您必须在 tslint.json tslint.yaml tslint.yml 配置文件中,或在自定义配置文件中定义要应用的配置,或者依赖默认的内置配置。

    • 要让 PyCharm 查找一个 tslint.json tslint.yaml tslint.yml 文件,请选择 自动搜索 选项。

    • 要使用自定义文件,请选择 配置文件 选项,并在 路径 字段中指定该文件的位置。 从列表中选择路径,或手动输入,或者点击 浏览按钮 ,然后在打开的对话框中选择相应的文件。

    了解有关配置 TSLint 的更多信息,请参阅 TSLint 官方网站

  5. 如有必要,请在 附加规则目录 字段中指定附加代码验证规则文件的位置。 这些规则将在来自 tslint.json tslint.yaml tslint.yml 或上述指定的自定义配置文件的规则之后应用,并相应地覆盖它们。

为 TSLint 配置高亮显示

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

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

  • 在 TSLint 配置文件中,找到您要编辑的规则,并将其 ID 设置为 warningerror。 详细了解请参阅 TSLint 官方网站

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

忽略配置中的严重性级别

  1. 设置 对话框(Ctrl+Alt+S )中,转到 编辑器 | 检查检查页面 将打开。

  2. 在中央窗格中,转到 JavaScript 和 TypeScript | 代码质量工具 | TSLint

  3. 在右侧窗格中,清除 使用配置文件中的规则严重性 复选框,并选择用于替代默认级别的严重性级别。

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

从 TSLint 配置文件导入代码风格

PyCharm 能够识别在 tslint.json tslint .yaml tslint.yml 配置文件中描述的某些 TSLint 规则,并让您将其应用到项目中的 TypeScript 代码风格配置

  • 当您首次打开项目时,PyCharm 会自动从项目 tslint.json tslint.yaml tslint.yml 导入代码风格。

  • 如果 tslint.json tslint.yaml tslint.yml 已更新(手动或通过您的版本控制),请在编辑器中将其打开,并在上下文菜单中选择 应用 TSLint 代码样式规则

    从编辑器导入 TSLint 代码风格规则:上下文菜单

TSLint 快速修复

PyCharm 让您可以自动修复 TSLint 报告的某些问题。

ws_tslint_quick_fixes.png
  • 要修复特定错误,请将插入符号置于高亮显示的代码处,按 Alt+Enter ,然后在列表中选择 TSLint:修复 '<current error>'

  • 要修复文件中检测到的所有问题,请选择 TSLint:修复当前文件

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

通过添加禁用注释即时禁用 TSLint 规则

即时抑制 TSLint 规则

  1. 将插入符号置于 TSLint 报告的错误或警告处,按 Alt+Enter

  2. 选择要禁用的规则的快速修复,并按 Right

  3. 从列表中选择 在当前文件中抑制 <rule name>在当前行中抑制 <rule name>

最后修改日期: 2025年 12月 2日