WebStorm 2021.1 Help

整理打字稿

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

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

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

您还可以使用 ESLint 检查您的 TypeScript 代码,请参阅Lint TypeScript with ESLint

在你开始前

  1. 确保您的计算机上有Node.js。

  2. 确保在您的项目中配置了本地 Node.js 解释器:打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Languages and Frameworks | 节点.jsNode Interpreter字段显示默认项目 Node.js 解释器。

    从配置本地 Node.js 解释器了解更多信息。

  3. 确保在Settings/Preferences |上启用了JavaScript 和 TypeScript以及TSLint所需的插件。插件页面,选项卡Installed,有关详细信息,请参阅管理插件

安装 TSLint

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

    npm install tslint typescript --save-dev

    TSLint 官方网站了解更多信息。

在 WebStorm 中激活和配置 TSLint

默认情况下,WebStorm 使用项目node_modules文件夹中的 TSLint 包和存储当前文件的文件夹中的tslint.json配置文件。如果在当前文件夹中没有找到tslint.json,WebStorm 将在其父文件夹中查找一个直到项目根目录。

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

此行为是所有新 WebStorm 项目中的默认行为。要在之前创建的项目中启用它,请转到Languages and Frameworks | 打字稿 | 设置/首选项对话框 ( )中的TSLintCtrl+Alt+S,然后选择自动 TSLint 配置选项。

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

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Languages and Frameworks | 打字稿 | TSLint

  2. 选择手动配置选项。

  3. 指定 TSLint 包的路径。

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

    默认情况下,WebStorm 首先查找tslint.jsontslint.yamltslint.yml配置文件。WebStorm 从存储要检查的文件的文件夹开始搜索,然后在父文件夹中搜索,依此类推,直到到达项目根目录。如果找不到tslint.jsontslint.yamltslint.yml配置文件,则 TSLint 使用其默认的嵌入式配置文件。因此,您必须定义配置以在tslint.jsontslint.yamltslint.yml配置文件或自定义配置文件中应用,或依赖默认的嵌入式配置。

    • 要让 WebStorm 查找tslint.jsontslint.yamltslint.yml文件,请选择自动搜索选项。

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

    从TSLint 官方网站了解更多关于配置 TSLint 的信息。

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

为 TSLint 配置突出显示

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

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

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

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

忽略配置中的严重级别

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 检查检查页面打开。

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

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

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

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

WebStorm 了解tslint.jsontslint.yamltslint.yml配置文件中描述的一些 TSLint 规则,并允许您将它们应用于项目中的TypeScript 代码样式配置

  • 首次打开项目时,WebStorm 会自动从项目tslint.jsontslint.yamltslint.yml导入代码样式。

  • 如果tslint.jsontslint.yamltslint.yml已更新(手动或从您的版本控制),请在编辑器中打开它并从上下文菜单中选择Apply TSLint Code Style Rules 。

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

    或者,只需对“从 TSLint 应用代码样式?”回答“是”即可。文件顶部的问题。

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

TSLint 快速修复

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

  • 要修复特定错误,请将光标放在突出显示的代码上,按Alt+Enter,然后从列表中选择TSLint:修复当前错误

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

    ws_tslint_quick_fixes.png

    有关详细信息,请参阅应用快速修复

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

动态抑制 TSLint 规则

  1. 将光标置于 TSLint 报告的错误或警告处,然后按Alt+Enter

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

  3. 从列表中,选择Suppress <rule name> for current fileSuppress <rule name> for current line

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

使用 ESLint 对 TypeScript 代码进行 Lint

使用 WebStorm,您还可以使用 ESLint 检查您的 TypeScript 代码,它带来了广泛的 linting 规则,这些规则也可以通过插件进行扩展WebStorm 在您键入时直接在编辑器中显示 ESLint 报告的警告和错误。从ESLint了解更多信息。

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

安装和配置 ESLint

  1. 在嵌入式终端( Alt+F12) 中,键入以下命令之一:

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

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

  2. 默认情况下,ESLint 是禁用的。按照在 WebStorm 中激活和配置 ESLint 中的描述启用它。

在新项目中为 TypeScript 使用 ESLint

  1. 在嵌入式终端( Alt+F12) 中,键入:

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

  2. .eslintrc配置文件或 package.jsoneslintConfig下,添加:

    { “解析器”:“@typescript-eslint/parser”,“插件”:[“@typescript-eslint”],“扩展”:[“插件:@typescript-eslint/recommended”]}

使用 ESLint 抑制 linting TypeScript 代码

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

ESLint 4.0

如果您使用的是以前版本的 ESLint,则必须安装babel-eslinttypescript-eslint-parsereslint-plugin-typescript因为 ESLint 4.0 及更早版本不支持作用域包。

使用 babel-eslint

  1. 在嵌入式终端( Alt+F12) 中,键入:

    npm install eslint babel-eslint --save-dev

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

  2. .eslintrc配置文件或 package.jsoneslintConfig下,添加:

    {“解析器”:“babel-eslint”}

使用 typescript-eslint-parser

  1. 在嵌入式终端( Alt+F12) 中,键入:

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

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

  2. .eslintrc配置文件或 package.jsoneslintConfig下,添加:

    {“解析器”:“打字稿-eslint-解析器”}

使用 eslint-plugin-typescript

  1. 在嵌入式终端( Alt+F12) 中,键入:

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

  2. .eslintrc配置文件或 package.jsoneslintConfig下,添加:

    {“解析器”:“typescript-eslint-parser”,“插件”:[“eslint-plugin-typescript”]}
最后修改:2021 年 9 月 23 日