代码样式。 JavaScript

使用制表符字符

• 选中该复选框后，将使用制表符字符：

  • 按下 Tab 键时

  • 用于缩进

  • 用于重新格式化代码

• 清除此复选框后，WebStorm 将使用空格而非制表符。

智能制表符

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

• 选中该复选框后，由嵌套产生的部分将包含制表符和必要时的空格，而对齐部分仅包含空格。

• 清除此复选框后，仅使用制表符。也就是说，重新格式化后，一组符合指定制表符大小的空格会被自动替换为制表符，这可能会破坏精细的对齐。 也就是说，重新格式化后，一组符合指定制表符大小的空格会被自动替换为制表符，这可能会破坏精细的对齐。

制表符大小

在此字段中，指定一个制表符所代表的空格数。

缩进

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

续行缩进

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

在空行中保留缩进

选中该复选框后，WebStorm 将在空行中保留缩进，就像这些行包含代码一样。 清除该复选框后，WebStorm 会删除空行中的制表符和空格。

缩进链式方法

在函数声明中，链中第二个及后续方法显示在单独一行。

• 选中该复选框时，链中第二个及后续方法与首次调用对齐。

• 清除该复选框时，链中第二个及后续方法与调用它们的对象对齐。

缩进组中的所有链式调用

选中该复选框时，首次和后续调用的方法将缩进。

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

强制换行位置

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

键入时换行

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

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

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

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

可视化参考线

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

重新格式化时保留

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

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

换行选项

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

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

• 过长时换行 ：选择此选项将在行超出右边距时进行换行，并进行适当的缩进。

• 始终换行 ：选择此选项将列表中所有元素换行，每行一个元素，并进行适当缩进。

• 过长时分行 ：选择此选项将在列表中元素超出右边距时对其进行换行，每行一个元素，并进行适当缩进。

对齐选项

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

• <字符>在下一行 ：选中此复选框可在换行时将指定字符移到下一行。

• 'else' 换行显示 ：使用此复选框将相关语句或字符移至下一行。

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

• 特殊的 else if 处理 ：如果选中此复选框， else if 语句与其他代码位于同一行。

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

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

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

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

  • 对齐冒号 ：连续行中的属性将根据冒号对齐。

  • 对齐值 ：连续行中的属性将根据值对齐。

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

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

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

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

• ES6 import/export 当选中 对齐 'from' 子句： 复选框时，WebStorm 会自动对 import 与 export 语句在 ECMAScript 6 代码中进行对齐，使代码更易阅读与维护。 比较在 预览 面板中对齐与非对齐代码片段的外观区别。

  

  启用此选项后，WebStorm 将实时对新代码进行对齐。 已有的 import 与 export 语句将在您按下 重新格式化代码 并执行 Ctrl+Alt+L 后进行对齐。

大括号位置选项

保留最大空行数

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

最小空行数

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

以分号结束语句

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

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

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

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

引号

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

• 使用 双引号 引号 始终

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

• 使用 单引号 引号 始终

尾随逗号

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

• 保留

• 移除

• 多行时添加

命名规范

在此区域：

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

• 选择生成文件名称的样式。 例如，当 WebStorm 建议将类移动到新的自动生成文件中时，该文件的建议名称将按所选样式根据类名生成。 请参阅 使类和其所在文件的命名保持一致 了解详情

注释代码

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

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

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

  

  

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

  默认情况下，当将代码片段包裹在块注释中时，文本会紧接着 /* 起始字符，无任何空格。 在 */ 结束字符之前也不会插入空格。 此默认代码样式可能与某些 linter 规则（例如 ESLint）冲突。

  

  

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

• 选中此复选框后，来自同一模块的导入符号将在一个 import 语句中列出，使用逗号分隔。 成员按导入顺序列出。 若需按字母顺序排列，请选中 对导入成员排序 复选框并运行 代码 | 优化导入。

• 清除此复选框时，每个导入符号将创建一个单独的 import 语句。

使用相对于项目、资源或源根目录的路径

此选项适用于 JavaScript 代码中自动生成的导入语句。

• 选中此复选框后，WebStorm 会建议基于项目根目录、 资源根或 源文件根的相对路径。

• 默认情况下，此复选框未选中，WebStorm 会建议相对于当前文件的路径。

使用目录导入（Node 风格模块解析）

假设，项目具有以下结构：

• 勾选 使用目录导入 复选框后，文件 src/lib/index.js 将被导入为 ./src/lib。

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

使用文件扩展名

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

• 自动 ：选择此选项后，WebStorm 始终会为以下文件添加扩展名：

  • .vue 文件。

  • 具有 .mjs 或 .cjs 扩展名的文件。

  • 项目中的文件，其 "type":"module" 在 package.json 中。

• 始终使用 .js ：选中此选项后，WebStorm 会在 import 语句中自动为文件名添加扩展名。 当您在需要完整文件名的浏览器（例如 Chrome）中使用 ES6 模块时，此设置非常重要。 WebStorm 会在自动生成 import 语句时、代码补全时，或当您使用 Alt+Enter 触发 import 生成时应用此设置。

• 从不 - 启用该选项后，WebStorm 在生成 import 语句时始终插入不带扩展名的文件名。

使用路径别名

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

• 始终 - 启用该选项后，WebStorm 始终使用来自 webpack.config.js 、 system.js 或 jsconfig.json 配置文件中的 别名。

• 从不 - 启用该选项后，WebStorm 在生成 import 时始终使用相对路径。

• 仅对不在指定路径中的文件 - 启用该选项后，WebStorm 在为定义了相同别名的文件之间生成 import 时使用相对路径。 在其他文件中将使用路径映射。

在下面的示例中，文件 Animal.js 和 Bird.js 存储在已在 webpack.config.js 中指定别名的 animated 文件夹下的文件夹中。 文件 Dog.js 位于别名之外。

别名 Lib 的配置如下：

因此， 始终 和 从不 中的每个选项都会以相同方式应用于 Bird.js 和 Dog.js 。 选择 仅对不在指定路径中的文件 选项后，WebStorm 会生成不同样式的 import 语句：在 Bird.js 中使用相对路径，在 Dog.js 中使用别名。

Import 语句使用 Lib 别名。

Import 语句使用相对路径。

WebStorm 会生成不同样式的 import 语句：在 Bird.js 中使用相对路径，在 Dog.js 中使用 Lib 别名。

不要从以下路径精确导入

在此字段中，指定 WebStorm 在自动导入符号时应跳过的精确路径。 WebStorm 会寻找其他路径来导入该符号。

对于支持只导入其子模块而无需导入整个模块的模块，此功能尤为有用。 例如，如需优先使用类似 import {Observable} from 'rxjs/Observable' 的导入，而非更通用的 import {Observable} from 'rxjs' ，请将 rxjs 添加到列表中。

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

1. 单击字段右侧的 。

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

排序导入的成员

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

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

按模块排序 import

• 选中此复选框后，运行 代码 | 优化导入 时， import 语句将按模块名称进行字母排序。

• 清除此复选框后， import 语句始终按生成顺序显示，并在您运行 代码 | 优化导入 后也不会改变。

分组规则

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

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

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

• 保持重写方法在一起

  选中此复选框以按类和接口将覆盖方法分组。 在 顺序 列表中，选择 保持排序 或 按名称排序 选项。

匹配规则

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

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

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

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

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

空规则

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

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

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

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

  请注意，双击修饰符关键字将使条件失效。

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

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

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