代码样式。 TypeScript

使用 tab 字符

• 如果选中此复选框，则使用 tab 字符：

  • 按下 Tab 键时

  • 用于缩进

  • 用于重新格式化代码

• 如果未选中此复选框，则 WebStorm 会使用空格代替 tab。

智能 tab

缩进由两部分组成。 一部分由嵌套代码块形成，另一部分由对齐方式决定。

• 如果选中此复选框，由嵌套形成的部分将包含 tab 和空格（如有必要），而由对齐方式定义的部分仅由空格组成。

• 如果未选中此复选框，则仅使用 tab。这意味着在重新格式化后，符合指定 tab 大小的空格组将自动替换为 tab，从而可能破坏精确的对齐。 这意味着在重新格式化后，符合指定 tab 大小的空格组将自动替换为 tab，从而可能破坏精确的对齐。

Tab 大小

在此字段中指定适用于一个 tab 的空格数。

缩进

在此字段中指定每个缩进级别应插入的空格数。

续行缩进

在此字段中指定应在数组元素、表达式、方法声明和方法调用之间插入的空格数。

在空行中保留缩进

如果选中此复选框，WebStorm 会在空行中保留缩进，就像这些行包含代码一样。 如果未选中此复选框，WebStorm 会删除空行中的 tab 字符和空格。

缩进链式方法

在函数声明中，链式中的第二个以及后续方法将显示在单独的行上。

• 选中此复选框时，链式中的第二个以及后续方法将与第一次调用对齐。

• 未选中此复选框时，链式中的第二个以及后续方法将与被调用的对象对齐。

缩进组中的所有链式调用

选中此复选框时，第一个及后续调用的方法将进行缩进。

仅在选中 缩进链式方法 复选框时，该复选框才可用。

强制换行位置

在此字段中，指定元素右侧所需的空格数。 如果您接受 默认 选项，则会使用 全局设置 中的值。

键入时换行

在此字段中，指定编辑后的文本如何适配指定的 强制换行位置 字段。

• 默认 ：选择此选项以使用 键入时换行 值来自 全局设置。

• 是 ：选择此选项以使用 右边距 字段中的值。

• 否 ：选择此选项后，某行可以超过右边距中指定的值。

可视化参考线

在此字段中，指定多个右边距。 您可以保留默认值或者输入边距的空格数。 如需指定多个边距，请输入用逗号分隔的数字。

重新格式化时保留

使用复选框配置在重新格式化源代码时 WebStorm 应保留的例外情况。 例如，默认情况下选中 换行符 复选框。

如果您的代码包含短于标准约定的行，则可以在重新格式化前取消选中 换行符 复选框以进行转换。

换行选项

换行样式适用于左侧窗格中指定的各种代码结构（如方法调用参数或赋值语句）。

• 不换行 ：选择此选项后，将不应用特殊的换行样式，嵌套对齐和大括号设置将被忽略。

• 较长时换行 ：选择此选项可对超出右边距的行进行换行并适当缩进。

• 始终换行 ：选择此选项可对列表中的所有元素进行换行，使每行包含一个元素并适当缩进。

• 较长时拆行 ：选择此选项可将超出右边距的列表元素进行换行，使每行包含一个元素并适当缩进。

对齐选项

• 多行时对齐 ：选中此复选框后，每一行上的代码结构都将从相同列开始。 否则，代码结构的位置由当前缩进级别决定。

• <字符> 换至下一行 ：选中此复选框可在换行时将指定字符（或字符序列）移动到下一行。

• 'else' 换行 ：使用此复选框可将对应语句或字符移动到下一行。

• <字符> 后换行 ：选中此复选框将在指定字符后的代码移至新行。

• 特殊 else if 处理 ：选中此复选框后， else if 语句将位于同一行。

  否则， else if 语句将被移至下一行，保持相应的缩进级别。

• 缩进 case 分支 ：选中此复选框后， case 语句将位于对应的缩进级别。 否则， case 语句将与 switch 处于相同的缩进级别。

• 对象 ：从列表中选择对象的对齐方式：

  • 不对齐 ：连续行中的属性将不会对齐。

  • 对齐冒号 ：连续行中的属性将相对于冒号对齐。

  • 对齐值 ：连续行中的属性将相对于值进行对齐。

• 变量声明 ：选择以下任一选项来配置等号的对齐方式：

  • 不对齐 ：等号不进行对齐。

  • 多行时对齐 ：多行 var 语句中的等号将通过插入额外空格对齐。

  • 分组时对齐 ：多个 var 语句中的等号将通过插入额外空格对齐。

• ES6 import/export 选中 对齐 'from' 子句： 复选框时，WebStorm 会在 ECMAScript 6 代码中自动对齐 import 和 export 语句，从而使您的代码更易于阅读和维护。 在 预览 窗格中比较对齐与未对齐状态下的代码片段外观。

  

  启用此选项后，WebStorm 将在输入时即时对齐新代码。 在按下 Ctrl+Alt+L 以 重新格式化代码后，现有的 import 和 export 语句将被对齐。

大括号位置选项

保留最多空行数

在此区域指定重新格式化后要保留的额外空行数。

最少空行数

在此区域可配置是否在 import 语句块之后及类、字段、方法或函数周围添加额外空行。 在每个选项旁的字段中，指定要保留的额外空行的最小数量。

使用分号结束语句

• 使用 使用分号结束语句 在新代码中

• 使用 使用分号结束语句 始终

• 不使用 使用分号结束语句 在新代码中

• 不使用 使用分号结束语句 始终

引号

• 使用 双引号 引号 在新代码中

• 使用 双引号 引号 始终

• 使用 单引号 引号 在新代码中

• 使用 单引号 引号 始终

尾随逗号

使用此列表可配置是否在对象、数组，以及方法定义和调用的参数中使用 尾随逗号。 可用的选项包括：

• 保留

• 移除

• 多行时添加

使用 'public' 修饰符

使用此复选框可选择在生成的代码中插入或省略 public 访问修饰符。

例如，从以下内容生成 public 方法时：

• 如果选中此复选框，会在生成的代码中自动插入 public 访问修饰符：

  class Test { public test():void { this.extracted(); } public extracted() { var x = 1; } }

• 如果未选中此复选框，代码生成时将省略 public 访问修饰符：

  class Test { public test():void { this.extracted(); } extracted() { var x = 1; } }

请参见 TypeScript 语言手册中“Private/Public 修饰符”章节。

命名约定

在此区域：

• 配置或接受将自动添加到生成字段和属性名称中的默认前缀。

• 选择生成文件名称的样式。 例如，当 WebStorm 建议将一个类移动到新生成的文件中时，该文件的建议名称会根据所选样式由类名生成。 请参阅 类名与包含文件名称保持一致了解更多信息

注释代码

在此区域配置生成注释的代码风格。

• 在 JSDoc 中包含类型 ：选中此复选框以自动为 @param、 @return 和其他标签添加类型。 请注意，类型信息对 TypeScript 来说是多余的，因为类型会从代码本身中提取。 因此，默认不选中该复选框。

• 行注释在第一列 ：选中此复选框可将行注释从第一列开始。 未选中复选框时，行注释将与代码对齐。

• 在行注释开始处添加空格 ：选中此复选框将在行注释字符和注释行首字符之间插入空格。

  

  

• 在块注释周围添加空格 ：选中此复选框可在块注释中添加前导和尾随空格。

  默认情况下，当将代码片段包裹为块注释时，注释文本紧跟在起始 /* 字符后，无空格。 在结束 */ 字符前也不会插入空格。 此默认代码风格可能与某些 linter 工具（例如 ESLint）的规则冲突。

  

  

合并来自同一模块的成员导入

• 选中此复选框时，来自同一模块的导入符号会列在一个 import 语句中，以逗号分隔。 成员会按照其导入顺序进行排列。 要按字母顺序排列这些成员，请勾选 对导入成员排序 复选框并运行 代码 | 优化导入。

• 未选中此复选框时，每个导入符号都会生成单独的 import 语句。

使用相对于tsconfig.json 的路径

选中此复选框后，WebStorm 会将 tsconfig.json 文件作为根目录计算导入路径。 未选中此复选框时，WebStorm 会相对于项目根目录计算导入路径。

例如，若您的项目结构如下：

选中复选框后，WebStorm 将生成如下导入语句：

未选中此复选框时，将生成如下导入语句：

当 index.js 可用时使用目录导入（Node 风格模块解析）

假设您的项目具有以下结构：

• 取消选中此复选框时，例如，文件 src/lib/index.js 将被导入为 ./src/lib/index.js。

• 选中此复选框时，文件 src/lib/index.js 将被导入为 ./src/lib。

请从 TypeScript 官方网站 了解更多有关 TypeScript 模块解析的信息。

使用文件扩展名

在该字段中配置 import 语句中的文件扩展名。

• 自动——使用此选项时，WebStorm 始终会将扩展名添加到以下文件名称中：

  • .vue 文件。

  • 具有 .mts 扩展名的文件。

  • 在 package.json 中包含 "type":"module" ，并在 tsconfig.json 中包含 "module":"node16" 或 "module":"nodenext" 的项目中的文件。

• 始终使用 .js——使用此选项时，WebStorm 会在 import 语句中的文件名称中自动添加扩展名。 这在使用需要完整文件名的浏览器中导入 ES6 模块时非常重要（例如 Chrome）。 WebStorm 会在自动生成 import 语句、进行代码补全时或在通过 Alt+Enter 生成 import 时应用此设置。

• 从不——使用此选项时，WebStorm 在生成 import 语句时始终插入不包含扩展名的文件名称。

在导入中使用 type 修饰符

在该字段中，配置在用于类型的 import 语句中使用 type 修饰符。 请注意，设置仅适用于类型，对于非类型，无论选择哪种选项，都不会插入 type 修饰符。

启用此选项时，如果您的 tsconfig.json 中指定了 "importsNotUsedAsValues": "error" 或 "verbatimModuleSyntax": true ，则会添加 type 修饰符。

否则，如果没有偏好 import 类型，则不会插入 type 修饰符。

启用此选项时，无论是否在您的 tsconfig.json 中指定了 "importsNotUsedAsValues": "error" 或 "verbatimModuleSyntax": true ，都始终会插入 type 修饰符：

启用此选项时，无论您的 tsconfig.json 中设置了 "importsNotUsedAsValues": "error" 或 "verbatimModuleSyntax": true 标志，WebStorm 始终不会使用 type 修饰符：

使用 tsconfig.json 中的路径映射

在该字段中配置 import 语句中的路径样式。

• 始终——使用此选项时，WebStorm 始终使用来自 tsconfig.json 的 路径映射。

• 从不——使用此选项时，WebStorm 始终在生成的 import 中使用相对路径。

• 仅在指定路径以外的文件中——使用此选项时，WebStorm 在为定义了相同路径映射的文件之间生成 import 时使用相对路径。 在所有其他文件中将使用路径映射。

在以下示例中，文件 animal.ts 和 bird.ts 存储在 animated 文件夹下的文件夹中，并且在 tsconfig.json 中为其指定了路径映射。 文件 dog.ts 位于路径映射之外。

路径映射 @Lib 配置如下：

因此，每个 始终 与 从不 选项都以相同方式应用于 bird.ts 与 dog.ts 。 选中 仅在指定路径外的文件中 选项后，WebStorm 会生成不同样式的 import 语句：在 bird.ts 中使用相对路径，在 dog.ts 中使用路径映射。

import 语句使用 @Lib 路径映射。

import 语句使用相对路径。

WebStorm 会生成不同样式的 import 语句：在 bird.ts 中使用相对路径，在 dog.ts 中使用 @Lib 路径映射。

不要从以下位置精确导入

在该字段中，指定 WebStorm 在自动导入符号时应跳过的精确路径。 WebStorm 将查找替代路径以导入该符号。

这对于支持导入子模块而非整个模块的模块特别有用。 例如，为了优先使用类似 import {Observable} from 'rxjs/Observable' 的导入，而不是更通用的 import {Observable} from 'rxjs' ，请将 rxjs 添加到列表中。

要管理要跳过的模块列表：

1. 单击字段右侧的 。

2. 在打开的 更改模块 对话框中，单击 并在 添加模块 对话框中指定模块名称。 要从列表中移除模块，请选中它并单击 。

对导入的成员进行排序

• 选中此复选框时，WebStorm 会将合并的 import 语句中的导入成员按字母顺序排列。 请注意，成员以逗号分隔，按导入顺序排列，只有在运行 代码 | 优化导入 时才会重新排序。

• 取消选中此复选框时，合并的 import 语句中的成员始终以导入顺序、逗号分隔的方式列出。

按模块对 import 语句进行排序

• 选中此复选框时，在运行 代码 | 优化导入 时会根据模块名称按字母顺序重新对 import 语句进行排序。

• 取消选中该复选框时， import 语句将始终以生成时的顺序显示，并且该顺序在运行 代码 | 优化导入 后不会更改。

分组规则

请在此区域设置分组规则。

• 将属性字段按相应getter/setter 分组

• 使用包含方法的箭头函数初始化的组字段

• 保持重写方法在一起

  选中此复选框可按类和接口将重写的方法分组显示。 在 顺序 列表中，选择 保持排序 或 按名称排序 选项。

匹配规则

请在此区域将元素顺序定义为规则列表，其中每条规则包含匹配项集，例如修饰符或类型。

• ：使用此按钮添加规则。 将打开 空规则 区域。

• ：使用此按钮从列表中移除规则。

• ：使用此按钮编辑现有规则。 要查看该按钮，请导航至要编辑的规则并单击该按钮。 在弹出的窗口中，修改规则字段。

• ：使用这些按钮向上或向下移动所选规则。

空规则

请在此区域创建新的匹配规则或编辑现有规则。 您可以从以下筛选器中进行选择：

• 类型 ：使用此筛选器为您的规则选择构造函数、方法、字段或属性。

  请注意，双击类型关键字将反转条件。

• 修饰符 ：使用此筛选器为规则选择修饰符类型。

  请注意，双击修饰符关键字将反转条件。

• 名称 ：使用此字段在规则中指定条目名称。 此筛选器仅匹配条目名称，例如字段名、方法名、类名等。 该筛选器支持正则表达式，并使用 standard syntax。 将根据完整名称执行匹配。

• 顺序 ：使用此列表为规则选择排序顺序。 当多个元素使用相同的匹配规则时，该选项非常有用。 在此情况下，选择 Keep order 将保留重新排列前的顺序，选择 Order by Name 将根据名称对具有相同匹配规则的元素进行排序。

当您从 顺序 列表中选择 Order by Name 时，将显示此图标。 该图标表示此规则中的条目已按字母顺序排序。