TypeScript 语法检查
推荐的 TypeScript 代码检查工具是 ESLint ,它提供了广泛的检查规则,并且可以通过插件进行扩展。 CLion 在编辑器中直接显示 ESLint 报告的警告和错误,实时更新。 从 ESLint 了解更多。
当 @typescript-eslint/parser 设置为您项目的 ESLint 配置中的解析器时,CLion 会在 .ts 和 .tsx 文件中突出显示 ESLint 报告的错误。 了解更多信息,请参阅 typescript-eslint 仓库中的 readme 文件。
在开始之前
下载并安装 Node.js。
按照 配置本地 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-eslintpnpm add --save-dev eslint @eslint/js typescript typescript-eslintyarn 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 typescriptpnpm add --save-dev eslint @eslint/js typescript-eslintyarn add --dev eslint @eslint/js typescript-eslint
了解更多信息,请参阅 typescript-eslint 官方网站。
配置文件
根据您使用的 ESLint 版本,CLion 能识别以下文件类型中的配置:
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 标志。
按下 Ctrl+Alt+S 打开设置,然后选择 。
请选择 手动 ESLint 配置。
在 额外的 eslint 选项 字段中,输入
--flag unstable_ts_config。点击 Apply 保存更改并关闭对话框。
ESLint 版本 8 及更早版本
.eslintrc.* ( .eslintrc 、 .eslintrc.json 或 .eslintrc.yaml 文件,或其他支持的格式文件)。
.eslintignore
package.json 具有
eslintIgnore或eslintConfig属性。 此配置系统已被弃用,了解更多信息,请访问 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 官方网站。
在 CLion 中配置 ESLint
默认情况下,ESLint 被配置为 自动。 您可以选择 手动 指定所有配置设置或禁用 ESLint。
了解更多信息,请参阅 ESLint。
使用 ESLint 抑制 TypeScript 代码的检查
如果您已经在使用
@typescript-eslint/parser,但不想使用 ESLint 检查 TypeScript 代码,请将 .ts 或 .tsx 添加到 .eslintignore 文件。
检查您的代码
安装并启用后,每次打开 TypeScript 文件时,ESLint 会自动激活。 您还可以配置 ESLint 以 在保存时自动检测并修复问题。
默认情况下,CLion 会根据 ESLint 配置中的严重性级别标记检测到的问题。 请参阅 配置 ESLint 高亮显示 ,了解如何重写这些设置。
当前文件中检测到的错误描述及其快速修复方法可在编辑器和 Problems 工具窗口的 文件 选项卡中查看。
所有之前打开的文件中的错误及其快速修复会显示在 项目错误 选项卡的 问题 工具窗口中。 若要打开工具窗口,请点击编辑器右上角的 检查 小组件:

有关详情,请参阅 在编辑器中查看问题并应用快速修复以及 问题工具窗口。
要在编辑器中查看问题的描述,请将鼠标悬停在高亮显示的代码上。

要解决检测到的问题,请点击 ESLint:修复“<rule name>” 或按 Alt+Shift+Enter。
要解决当前文件中的所有检测到的问题,请点击 更多操作 (Alt+Enter )并从列表中选择 。

或者,打开 文件 选项卡的 问题 工具窗口 Alt+6 ,您可以在其中查看问题描述、应用快速修复、导航到发生错误的源代码片段,并在 编辑器预览 面板中修复它们,而无需离开工具窗口。

了解更多信息,请参阅 问题工具窗口。
您还可以配置 ESLint 在保存文件时修复文件中的所有问题。 要配置此类行为,请在 保存时运行 eslint --fix 复选框,在 ESLint 页面的 设置 对话框中,如 在 CLion 中激活和配置 ESLint 所述。
了解更多信息,请参阅 在编辑器中查看问题并应用快速修复 和 ESLint。
TSLint
您也可以在 CLion 内使用 TSLint 代码验证工具,无需运行应用程序即可检查您的 TypeScript 代码中最常见的错误。 当工具激活时,它会对所有打开的 TypeScript 文件进行检查并标记检测到的问题。
要查看问题描述,请将鼠标悬停在高亮代码上。 默认情况下,CLion 根据 TSLint 配置文件中的严重性级别标记检测到的问题。 请参阅 配置 TSLint 突出显示以了解如何覆盖这些设置。

在开始之前
下载并安装 Node.js。
确保在项目中配置了本地 Node.js 解释器:打开 设置 对话框(Ctrl+Alt+S ),然后转到 。 Node 解释器(I) 字段显示默认项目 Node.js 解释器。 了解更多,见 配置本地 Node.js 解释器。
请确保在 JavaScript and TypeScript和 TSLint必需插件在 设置 | 插件 页面的 已安装 标签上已启用。 如需了解更多信息,请参阅 管理插件。
安装 TSLint
在嵌入的 终端 (Alt+F12 )中,输入:
npm install tslint typescript --save-dev可以从 TSLint 官方网站了解更多信息。
创建 TSLint 配置文件
在嵌入的 终端 (Alt+F12 )中,输入:
cd <project root> tslint --init
在 CLion 中激活并配置 TSLint
默认情况下,CLion 使用项目 node_modules 文件夹中的 TSLint 包以及当前文件所在文件夹中的 tslint.json 配置文件。 如果在当前文件文件夹中未找到 tslint.json 配置文件,CLion 将在其父文件夹中查找,直到项目根目录。
如果您有多个 package.json 文件,其中列出了 TSLint 作为依赖项,CLion 将为每个 package.json 启动一个单独的进程,并处理其下的所有内容。 此功能使您可以将特定的 TSLint 版本或一组特定插件应用于 monorepo 或具有多个 TSLint 配置的项目中的每条路径。
这种行为是所有新 CLion 项目的默认设置。 要在先前创建的项目中启用此功能,请转到 的 设置 对话框(Ctrl+Alt+S )并选择 自动 TSLint 配置 选项。
您还可以手动配置 TSLint 以使用自定义的 TSLint 包和 tslint.json ,并指定一些附加规则。
在 设置 对话框(Ctrl+Alt+S )中,前往 。
请选择 手动配置 选项。
请指定 TSLint 包的路径。
在 配置文件 区域,指定要使用的配置。
默认情况下,CLion 会首先查找 tslint.json 、 tslint.yaml 或 tslint.yml 配置文件。 CLion 从要检查的文件所在的文件夹开始搜索,然后在上级文件夹中搜索,依此类推直到到达项目根目录。 如果未找到 tslint.json 、 tslint.yaml 或 tslint.yml 配置文件,TSLint 将使用其默认的嵌入式配置文件。 因此,您必须定义要应用的配置,可以在 tslint.json 、 tslint.yaml 或 tslint.yml 配置文件中,或者在自定义配置文件中,或者依赖默认的嵌入式配置。
若要使 CLion 查找 tslint.json 、 tslint.yaml 或 tslint.yml 文件,请选择 自动搜索 选项。
要使用自定义文件,请选择 配置文件 选项,并在 路径 字段中指定文件的位置。 从列表中选择路径,或手动输入路径,或点击
并从打开的对话框中选择相关文件。
了解更多关于从 TSLint 官方网站配置 TSLint 的信息。
如有必要,请在 附加规则目录 字段中指定包含附加代码验证规则的文件位置。 这些规则将在 tslint.json 、 tslint.yaml 、 tslint.yml 或上述指定的自定义配置文件中的规则之后应用,并将相应地重写它们。
为 TSLint 配置高亮显示
默认情况下,CLion 会根据 TSLint 配置文件中的严重级别标记检测到的错误和警告。 例如,错误会用红色波浪线突出显示,而警告则会用黄色背景标记。 如需更多信息,请参阅 静态代码分析 和 检查严重性。
在 TSLint 配置中更改规则的严重级别
在 TSLint 配置文件中,找到您要编辑的规则,并将其 ID 设置为
warning或error。 请访问 TSLint 官方网站 了解更多信息。
您可以重写 TSLint 配置文件中的严重性等级,使 CLion 忽略它们,将 linter 报告的所有内容显示为错误、警告或自定义颜色。
忽略配置中的严重级别
在 设置 对话框(Ctrl+Alt+S )中,转到 。 Inspections 页 打开。
在中央窗格中,转到 JavaScript 和 TypeScript | 代码质量工具 | TSLint。
在右侧窗格中,清除 从配置文件中使用规则严重性 复选框并选择要使用的严重级别,而不是默认级别。

从 TSLint 配置文件导入代码样式
CLion 能理解在 tslint.json 、 tslint .yaml 或 tslint.yml 配置文件中描述的一些 TSLint 规则,并允许您将其应用到项目中的 TypeScript 代码样式配置。
当您第一次打开项目时,CLion 会自动从项目 tslint.json , tslint.yaml 或 tslint.yml 导入代码风格。
如果 tslint.json 、 tslint.yaml 或 tslint.yml 被更新(手动或通过版本控制),请在编辑器中打开它并从上下文菜单中选择 应用 TSLint 代码样式规则。

TSLint 快速修复
CLion 允许您自动修复 TSLint 报告的一些问题。

要修复特定错误,请将文本光标放置在高亮代码处,按 Alt+Enter ,然后从列表中选择 TSLint:修复“<current error>”。
要修复文件中检测到的所有问题,请选择 TSLint:修复当前文件。
您可以为当前文件甚至当前行抑制 TSLint 规则。 CLion 会自动生成格式为 /* tslint:disable:<rule name> 或 // tslint:disable-next-line:<rule name> 的禁用注释,并分别将其放置在文件顶部或当前行上方。

临时禁止 TSLint 规则
将文本光标置于 TSLint 报告的错误或警告处,然后按 Alt+Enter。
请选择您要禁用的规则的快速修复并按 Right。
从列表中选择 为当前文件抑制“<rule name>” 或 为当前行抑制“<rule name>”。