代码风格。打字稿

使用制表符

• 如果选中此复选框，则使用制表符：

  • 按键Tab时

  • 用于缩进

  • 用于重新格式化代码

• 如果清除该复选框，WebStorm 将使用空格而不是制表符。

智能标签

缩进由两部分组成。一部分是嵌套代码块的结果，另一部分是由对齐决定的。

• 如果选中此复选框，则嵌套生成的部分包含制表符和空格（如果需要），而对齐定义的部分仅包含空格。

• 如果清除此复选框，则仅使用选项卡。这意味着在重新格式化适合指定制表符大小的一组空格后，会自动将其替换为制表符，这可能会导致精细对齐中断。

标签大小

在此字段中，指定适合制表符的空格数。

缩进

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

继续缩进

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

在空行上保留缩进

如果选中此复选框，WebStorm 会在空行上保留缩进，就好像它们包含一些代码一样。如果清除该复选框，WebStorm 将删除空行上的制表符和空格。

缩进链式方法

在函数声明中，链中的第二个和更多方法显示在单独的行上。

• 当复选框被选中时，链中的第二个和更多方法与第一个调用对齐。

• 当复选框被清除时，链中的第二个和更多方法将与调用它们的对象对齐。

缩进组中的所有链接调用

只有在选择缩进链接方法复选框时，才可使用复选框。

硬包装在

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

打字时换行

在此字段中，指定编辑后的文本如何适合指定的Hard wrap at字段。

• 默认值：选择此选项以使用全局设置中的“键入时换行”值。

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

• 否：如果您选择此选项，则一行可以超过右边距中指定的值。

视觉指南

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

重新格式化时保留

使用复选框配置 WebStorm 在重新格式化源代码时将产生的异常。例如，默认情况下，换行复选框处于选中状态。

如果您的代码包含比标准约定短的行，您可以在重新格式化之前通过禁用换行符复选框来转换它们。

包装选项

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

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

• 长时换行 - 选择此选项以使用适当的缩进换行超出右边距的行。

• Wrap always - 选择此选项以将所有元素包装在列表中，以便每行有一个元素具有适当的缩进。

• Chop down if long - 选择此选项以将元素包裹在超出右边距的列表中，以便每行有一个元素具有适当的缩进。

对齐选项

• 多行时对齐- 如果选中此复选框，则代码构造从下一行的同一列开始。否则，代码结构的位置由当前缩进级别决定。

• <character(s)> on next line - 选中此复选框可在换行时将指定的一个或多个字符移动到下一行。

• 'else' on new line - 使用此复选框将相应的语句或字符移动到下一行。

• <character> 之后的新行- 选中此复选框可将指定字符之后的代码移动到新行。

• Special else if treatment - 如果选中此复选框，则else if语句位于同一行。

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

• 缩进 case 分支- 如果选中此复选框，则case语句位于相应的缩进级别。否则，case语句将与 . 放在同一缩进级别switch。

• 对象- 从列表中选择如何对齐对象：

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

  • 在冒号上：连续行中的属性将与冒号对齐。

  • On value：连续行中的属性将与该值对齐。

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

  • 不对齐：等号不对齐。

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

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

• ES6导入/导出当'来自'子句'：复选框是选中，WebStorv在ECMAScript 6import代码中对齐和export语句自动使您的代码更容易阅读和维护。在“预览”窗格中比较代码片段的外观是否对齐。

  

  启用此选项后，WebStorm 将动态对齐新代码。按 重新格式化代码后，现有import和export语句将对齐，有关详细信息Ctrl+Alt+L，请参阅 重新格式化源代码部分。

大括号放置选项

保留最大空白行

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

最少空行

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

分号终止语句

• 使用分号终止新代码中的语句

• 始终使用分号终止语句

• 不要使用分号来终止新代码中的语句

• 不要总是使用分号来终止语句

引号

• 在新代码中使用双引号

• 始终使用双引号

• 在新代码中使用单引号

• 始终使用单引号

尾随逗号

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

• 保持

• 消除

• 多行时添加

使用“公共”修饰符

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

例如，在从以下生成公共方法期间：

• 如果选中该复选框，则公共访问修饰符会自动插入到生成的代码中：

  类测试 { public test():void { this.extracted(); } 公共提取（） { var x = 1; } }

• 如果清除该复选框，则在代码生成期间将省略公共访问修饰符：

  类测试 { public test():void { this.extracted(); } 提取（） { var x = 1; } }

请参阅TypeScript 语言手册，私有/公共修饰符一章。

命名约定

在这个领域：

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

• 选择生成文件名称的样式。例如，当 WebStorm 建议将一个类移动到一个新的自动生成的文件时，该文件的建议名称是根据所选样式从类名生成的。从保持类的名称和包含文件的合规性中了解更多信息

评论代码

在此区域中，为生成的注释配置代码样式。

• 在 JSDoc 中包含类型：选中此复选框可自动添加@param、@return和其他标签的类型。请注意，类型信息对于 TypeScript 来说是无关紧要的，因为类型是从代码本身中检索的。因此，默认情况下清除该复选框。

• 第一列的行注释：选中此复选框可在第一列开始行注释。当复选框被清除时，行注释在代码中对齐。

• 在行注释开始处添加空格：选中此复选框时，将在行注释字符和注释行的第一个字符之间插入一个空格。

  

  

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

  默认情况下，当您将代码片段包含在块注释中时，文本会在开始/*字符之后开始，没有任何空格。在结束*/字符之前也没有插入空格。此默认代码样式可能与某些 linter 的规则冲突，例如 ESLint。

  

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

• 选中此复选框时，来自同一模块的导入符号将在一个导入语句中列出，并以逗号作为分隔符。成员按导入顺序列出。要按字母顺序排列它们，请选中排序导入的成员复选框并运行代码 | 优化导入。

• 清除此复选框后，将为每个导入的符号生成单独的导入语句。

使用相对于 tsconfig.json 的路径

选中此复选框时，WebStorm 使用tsconfig.json文件作为根来计算导入路径。清除此复选框后，WebStorm 会计算相对于项目根目录的导入路径。

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

选中复选框后，WebStorm 会生成以下导入语句：

如果清除该复选框，则会生成以下导入语句：

当index.js可用时使用目录导入（节点式模块解析）

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

• 当此复选框被清除时，例如，文件src/lib/index.js将被导入为./src/lib/index.js.

• 如果选中该复选框，文件src/lib/index.js将被导入为./src/lib.

从TypeScript 官网了解更多关于 TypeScript 模块解析的信息。

使用文件扩展名

选择此复选框后，WebStorv会自动将.js扩展添加到导入语句中的ES6模块的名称。当您在需要完整文件名的浏览器（例如，在 Chrome 中）中使用 ES6 模块时，这一点很重要。WebStorm 在自动生成导入语句、代码完成或调用导入生成时都会应用此设置Alt+Enter。

使用来自tsconfig.json的路径映射

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

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

• 从不- 使用此选项，WebStorm 始终在生成的导入中使用相对路径。

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

在下面的示例中，文件animal.ts和bird.ts存储在动画文件夹下的文件夹中，在tsconfig.json中为其指定了路径映射。文件dog.ts在路径映射之外。

路径映射@Lib配置如下：

因此，Always和Never选项中的每一个都以相同的方式应用于bird.ts和dog.ts。选中Only in files outside specified paths选项后，WebStorm 会生成不同样式的语句：在bird.tsimport中具有相对路径，在dog.ts中具有路径映射。

导入语句使用@Lib路径映射。

导入语句使用相对路径。

WebStorm 生成不同风格的语句：在bird.tsimport中使用相对路径，在dog.ts中使用@Lib路径映射。

不要完全从

在此字段中，指定 WebStorm 在自动导入符号期间应跳过的确切路径。相反，WebStorm 将寻找替代路径来导入符号。

这对于允许导入其子模块而不是整个模块的模块特别有用。例如，要更喜欢import {Observable} from 'rxjs/Observable'更一般的导入import {Observable} from 'rxjs'，请添加rxjs到列表中。

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

1. 单击该字段的右侧。

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

对导入的成员进行排序

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

• 清除此复选框后，合并导入语句中的成员始终按导入顺序以逗号分隔列出。

按模块对导入进行排序

• 选中此复选框后，当您运行Code |时，导入语句将按模块名称的字母顺序重新排序。优化导入。

• 清除此复选框后，导入语句始终按照它们生成的顺序显示，并且在运行Code |后此顺序不会更改。优化导入。

分组规则

使用该区域设置分组规则。

• 使用相应的 getter/setter 分组属性字段

• 用箭头函数和方法初始化的组字段

• 将被覆盖的方法放在一起

  选中此复选框可按类和接口将覆盖的方法组合在一起。在订单列表中，选择保持订单或按名称排序选项。

匹配规则

使用此区域将元素顺序定义为规则列表，其中每个规则都有一组匹配项，例如修饰符或类型。

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

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

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

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

空规则

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

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

  请注意，单击类型关键字两次会否定该条件。

• 修饰符：使用此过滤器选择规则的修饰符类型。

  请注意，单击修饰符关键字两次会否定该条件。

• 名称：使用此字段指定规则中的条目名称。此过滤器仅匹配条目名称，例如字段名称、方法名称、类名称等。该过滤器支持正则表达式并使用标准语法。匹配是针对整个名称执行的。

• 顺序：使用此列表选择规则的排序顺序。当多个元素使用相同的匹配规则时，此选项很有用。在这种情况下，选择Keep order将保持与重新排列之前设置的顺序相同，选择Order by Name将按照名称对具有相同匹配规则的元素进行排序。

当您从Order列表中选择Order by Name时，会出现此图标。图标表示此规则中的项目按字母顺序排序。