# 代码样式。 JavaScript > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). > **TL;DR** > `文件 | 设置 | 编辑器 | 代码样式 | JavaScript` 适用于 Windows 和 Linux > > > > `%instance% | 设置 | 编辑器 | 代码样式 | JavaScript` 适用于 macOS > > > > `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) !["设置"图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.settings.svg) 使用此页面配置 JavaScript 文件的格式选项。 当您更改这些设置时， 预览 面板将显示这将如何影响您的代码。 ## 制表符和缩进 | 使用制表符 | * 如果选中此复选框，将使用制表符： * 按下 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) 键时 * 对于缩进 * 对于代码重排格式 * 如果取消勾选复选框，IntelliJ IDEA 将使用空格代替制表符。 | | 智能制表符 | 一个缩进包含两部分。 一部分来自于嵌套代码块，另一部分由对齐确定。 * 如果选中此复选框，嵌套产生的部分将同时包含制表符和空格（如果有必要），而对齐定义的部分则仅由空格组成。 * 如果此复选框未选中，将只使用选项卡。 这意味着，在重新格式化后，适应指定制表符大小的一组空格将自动被替换为一个制表符，这可能导致微调对齐的破坏。 > **Tip:** > 如果选中了 使用制表符 复选框，那么 智能缩进 复选框将可用。 | | 选项卡大小 | 在此字段中，指定一个制表符中能容纳的空格数。 | | 缩进 | 在此字段中，指定为每个缩进级别插入的空格数量。 | | 连续缩进 | 在此字段中，指定在数组元素、表达式、方法声明和方法调用之间插入的空格数量。 | | 保持空行的缩进 | 如果选中此复选框，IntelliJ IDEA 会保留空行上的缩进，就像它们包含了一些代码一样。 如果取消选中该复选框，IntelliJ IDEA 将删除空行上的制表符和空格。 | | 缩进链式方法 | 在函数的声明中，链中的第二个及更后续的方法会在单独的行中显示。 * 当选中复选框时，链中的第二个和更多的方法将与第一次调用对齐。 * 当取消选中复选框时，链中的第二个及后续方法将与调用它们的对象对齐。 | | 缩进组内所有链式调用。 | 当选中此复选框时，首个和后续调用的方法将被缩进。 复选框只有在选中 缩进链式方法 复选框时才可用。 所有链接调用不缩进: ![所有链接调用不缩进](https://resources.jetbrains.com/help/img/idea/2026.3/js_indent_all_chained_calls_off.png) 将所有链式调用的缩进打开: ![缩进所有链式调用已开启](https://resources.jetbrains.com/help/img/idea/2026.3/js_indent_all_chained_calls_on.png) | ## 空格 使用此选项卡指定希望 IntelliJ IDEA 自动插入 Space 的位置。 选择描述相关位置的复选框，并在 预览 面板中检查结果。 ## 换行和大括号 在此选项卡中，自定义 IntelliJ IDEA 将在 [重新格式化源代码](reformat-and-rearrange-code.html) 对各种代码结构应用的异常，括号位置和对齐选项。 在 预览 面板中检查结果。 > **Note:** > 对齐设置优先于缩进选项。 | 硬换行位置 | 在此字段中，指定元素右侧所需的 Space 数。 如果您接受 默认 选项，则会使用 [全局设置](settings-code-style.html#rightMargin)中的值。 | | 在输入时换行 | 在此字段中，指定编辑过的文本如何适应指定的 硬换行位置 字段。 * 默认 ：选择此选项以使用 在输入时换行 值， 该值来自 [全局设置](settings-code-style.html#wrapOnTyping)。 * 是 ：选择此选项以使用 右边距 字段中的值。 * 否 ：如果您选择此选项，一行可以超过右边距中指定的值。 | | 可视化参考线 | 在此字段中，指定多个右边距。 您可以保留默认值，或者输入您的边距所需的空格数。 如果您想要指定多个边距，请输入由顿号分隔的数字。 | | 重新格式化时保留 | 使用复选框配置 IntelliJ IDEA 在重新格式化源代码时的例外情况。 例如，默认情况下， 换行 复选框被选中。 如果您的代码包含的行长度短于标准规定，您可以通过在重新格式化之前取消勾选 换行 复选框来进行转换。 | | 包装选项 | 换行样式适用于左侧窗格中指定的各种代码结构（例如，方法调用参数或赋值语句）。 * 不换行 - 当选中此选项时，不会应用任何特殊的换行样式，嵌套对齐和大括号设定将被忽略。 * 过长时换行 - 选择此选项可使用适当的缩进来换行超出右边距的行。 * 始终换行 - 选择此选项以将列表中的所有元素进行换行处理，使每行有一个元素，并具有适当的缩进。 * 过长时分行 - 选择此选项可将超出右边距的列表中的元素进行包装，以便每行有一个元素并且缩进适当。 | | 对齐选项 | * 多行时对齐 - 如果选中此复选框，代码结构将从每个下一行的同一列开始。 否则，代码结构的位置由当前的缩进级别确定。 * <字符(s)> 在下一行 - 选中此复选框，当行换行时，将指定的字符或字符移至下一行。 * 'else' 在新行 - 使用此复选框将相应的声明或字符移动到下一行。 * <字符> 后换行 - 选中此复选框以将指定字符后的代码移至新行。 * 对 else if 的特殊处理 - 如果选中此复选框， `else if` 语句将位于同一行。 否则， `else if` 语句将移动到下一行的相应缩进级别。 * 缩进 case 分支 - 如果选中此复选框， `case` 语句将位于相应的缩进级别。 否则， `case` 语句应与 `switch` 放置在相同的缩进级别。 * 对象 - 从列表中选择如何对齐对象： * 不对齐 ：顺序行中的属性将不会对齐。 * 按冒号 ：顺序行中的属性将根据冒号对齐。 * 按值 ：顺序行中的属性将与值对齐。 * 变量声明 - 选择以下选项之一来配置等号的对齐方式： * 不对齐 ：等号没有对齐。 * 多行时对齐 ：多行 `var` 语句中的相等符号会通过插入额外的 Space 进行对齐。 * 分组时对齐 ：多个 `var` 语句中的相等符号会通过插入额外的 Space 进行对齐。 * ES6 import/export 当选中 对齐 'from' 子句： 复选框时，IntelliJ IDEA 会自动对齐 `import` 和 `导出` 语句（位于 [ECMAScript 6](http://www.ecma-international.org/ecma-262/6.0/) 代码中），使代码更易于阅读和维护。 比较带对齐和不带对齐的代码片段在 预览 面板中的显示差异。 开启此选项后，IntelliJ IDEA将实时对新代码进行对齐。 现有的 `import` 和 `导出` 语句将在您 [重新格式化代码](reformat-and-rearrange-code.html#reformat_code)（通过按 `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS))）后对齐。 | | 大括号放置选项 | \| 大括号放置风格 \| 使用此列表指定 类声明 、 方法声明 、 函数声明 以及其他类型声明中开括号的位置。 可用选项包括： * 行尾 ：选择此选项以将起始大括号放置在声明行的末尾。 * 下一行如果换行 ：选择此选项将在多行声明行后的行开始处放置开括号。 * 下一行 ：选择此选项将在声明行之后的行首放置左大括号。 * 下一行已移动 ：选择此选项，将左大括号放在声明行之后的一行，并将该行 Shift 到相应的缩进级别。 * 每行均已移位 ：选择此选项可将开括号放置在声明行之后的行上，并偏移至相应的缩进级别，然后将下一行偏移至下一个缩进级别。 \| \| 强制使用大括号 \| 从这个列表中，为 `if` ， `for` ， `while` 和 `do () while` 语句选择大括号介绍方法。 可用选项包括： * 不要强迫 ：选择此选项以自动抑制引入大括号。 * 在多行时 ：如果一个语句占据多于一行，选择此选项以自动插入括号。 请注意，IntelliJ IDEA 分析的是整个声明中的行数，而非仅其条件。 ```PHP if (true) return false; ``` IntelliJ IDEA 将自动插入大括号： ```PHP if (true) { return false; } ``` * 始终 ：当选中此复选框时，IntelliJ IDEA 将始终自动插入括号。 \| | ## 空行 使用此选项卡定义在重新格式化后，您希望 IntelliJ IDEA 保留并在您的代码中插入多少空行以及在何处插入。 结果显示在 预览 面板上。 > **Tip:** > 此选项卡上的设置不影响第一项前和最后一项后的空行数量。 | 保持最大空白行数量 | 在此区域中，指定在重新格式化后要保留的额外空行的数量。 | | 最小空白行数 | 在此区域中，配置是否在 `import` 语句的块后以及类、字段、方法或函数周围有额外的空行。 在每个选项旁边的字段中，指定要留下的额外空白行的最小数量。 | ## 标点符号 使用此选项卡中的列表来形成自动插入终止分号、单引号和双引号以及末尾逗号的指令。 | 使用分号来终止语句 | * 使用 用分号来终止语句 在新代码中 * 使用 用分号来终止语句 始终 * 不要使用 用分号来终止语句 在新代码中 * 不要使用 用分号来终止语句 始终 | | 引用 | * 使用 按两次 引号 在新代码中 * 使用 按两次 引号 始终 * 使用 单引号 引号 在新代码中 * 使用 单引号 引号 始终 | | 尾随逗号 | 使用此列表配置您是否希望在对象、数组以及方法定义和调用的参数中使用 [尾逗号](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas)。 可用选项包括： * 保留 * 移除 * 添加时换行 | ## 代码生成 在此选项卡中，可以配置生成代码的代码样式。 | 命名约定 | 在这个区域： * 配置或接受将自动添加到生成字段和属性名称的默认前缀。 * 选择生成文件名称的样式。 例如，当 IntelliJ IDEA 建议将一个类移动到一个新的自动生成的文件时，该文件的建议名称是根据所选风格从类名生成的。 从 [保持类名和包含文件名的一致性](specific-javascript-refactorings.html#ws_js_rename_refactoring_keep_names_in_compliance) 中学习更多信息。 | | 评论代码 | 在此区域，配置生成注释的代码样式。 * 行注释位于首列 ：选中此复选框，以在第一列开始行评论。 当复选框未选中时，代码中的行注释将会对齐。 * 在行注释开头添加 Space。 ：选中此复选框时，将在行注释字符与被注释行的第一个字符之间插入一个 Space。 在行注释开始处添加一个空格: ![在行注释开始处添加一个空格](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_js_line_comment_space_off.animated.gif) 开启在行注释开头添加 Space。: ![开启在行注释开头添加 Space。](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_js_line_comment_space_on.animated.gif) * 在块注释周围添加 Space ：勾选此复选框以在块注释中添加前导和尾随空格。 默认情况下，当您在块注释中封闭一个代码片段时，文本会在打开 `/*` 字符后立即开始，没有任何空格。 在关闭 `*/` 字符前都没有插入空格。 这种默认的代码样式可能与一些代码检查工具的规则发生冲突，例如，ESLint。 在块注释两侧添加空格: ![在块注释两侧添加空格](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_block_comment_spaces_off.animated.gif) 在块注释上添加空格: ![在块注释上添加空格](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_block_comment_spaces.animated.gif) | ## 导入 | 合并同一模块中成员的导入 | * 选中此复选框后，来自同一模块的导入符号会列在一个以逗号分隔的 import 语句中。 成员是按照他们被导入的顺序进行列出的。 要按字母顺序排列它们，选择 对导入的成员进行排序 复选框并运行 `代码 \| 优化导入` 。 * 清除此复选框后，将为每个导入的符号生成单独的 import 语句。 | | 使用相对于项目、资源或源码根目录的路径。 | 此选项在 JavaScript 代码自动生成导入语句时使用。 * 当选中此复选框时，IntelliJ IDEA 会建议相对于项目根目录、 资源 根目录，或 源文件 根目录的路径。 * 默认情况下，此复选框未选中，且 IntelliJ IDEA 建议的路径是相对于当前文件的。 | | 使用目录导入（Node 风格的模块解析） | 假设您的项目具有以下结构： ![目录导入：项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/index.js` 。 | | 使用文件扩展名 | 在此字段中，配置导入语句中的文件扩展名。 * 自动 - 使用此选项后，IntelliJ IDEA 总是会在以下文件的名称中添加扩展名： * `.vue` 文件。 * 具有 `.mjs` 或 `.cjs` 扩展名的文件。 * 带有 `"type":"module"` 的项目中的文件位于 `package.json` 。 * 总是 .js – 使用此选项后，IntelliJ IDEA 会自动向导入语句中的文件名称添加扩展程序。 当您在需要完整文件名的浏览器中使用 ES6 模块时（例如，在 Chrome 中），这一点非常重要。 IntelliJ IDEA 在自动生成导入声明、进行代码补全，或者当您使用 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) 调用导入生成时，均会应用此设置。 * 从不 - 使用此选项，IntelliJ IDEA 在生成导入语句时始终插入不带扩展名的文件名。 | | 使用路径别名 | 在此字段中，配置 `import` 或 `require` 语句中路径的样式。 * 始终 - 有了这个选项，IntelliJ IDEA 总是使用来自您的 [别名](https://webpack.js.org/configuration/resolve/)，无论是在 `webpack.config.js` ， `system.js` ，还是 `jsconfig.json` 配置文件中。 * 从不 - 使用此选项，IntelliJ IDEA始终在生成的导入中使用相对路径。 * 仅在指定路径之外的文件中 - 使用此选项，IntelliJ IDEA 在生成具有相同别名的文件之间的导入时，使用相对路径。 在所有其他文件中，将使用路径映射。 在下面的示例中，文件 `Animal.js` 和 `Bird.js` 存储在 `animated` 文件夹下的文件夹中，该文件夹在 `webpack.config.js` 中指定了别名。 文件 `Dog.js` 不在别名之外。 ![ JavaScript：样例项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_code_style_use_path_mappings_project_webpack.png) 别名 `Lib` 的配置如下： ```JAVASCRIPT resolve: { alias: { Lib: path.resolve(__dirname, './lib/objects/earth/animated/') } } ``` 因此，每个 始终 和 从不 选项都以相同的方式应用于 `Bird.js` 和 `Dog.js` 。 在选择了 仅在指定路径之外的文件中 选项后，IntelliJ IDEA 会生成具有不同风格的 `import` 语句：在 `Bird.js` 中使用相对路径，在 `Dog.js` 中使用别名。 始终: 导入语句使用 `Lib` 别名。 ![选项“始终”：使用别名](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_code_style_import_alias_always.png) 从不: 导入声明使用相对路径。 ![选项“从不”：使用相对路径](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_code_style_import_alias_never.png) 仅在指定路径之外的文件中: IntelliJ IDEA 生成了不同样式的 `import` 语句：在 `Bird.js` 中带有相对路径和在 `Dog.js` 中带有 `Lib` 别名。 ![导入声明：使用别名或相对路径](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_code_style_use_path_mappings_import.png) | | 不从指定路径或路径模式导入 | 在此字段中，指定 IntelliJ IDEA 在自动导入符号期间应跳过的确切路径。 相反，IntelliJ IDEA 将寻找导入符号的其他路径。 这对于允许导入其子模块而不是整个模块的模块特别有用。 例如，若要优先考虑像 `import {Observable} from 'rxjs/Observable'` 这样的导入，而不是更通用的 `import {Observable} from 'rxjs'` ，请将 `rxjs` 添加到列表中。 要管理要跳过的模块列表： 1. 点击字段右侧的 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.expandComponent.svg)。 2. 在打开的 更改模块 对话框中，点击 ![添加图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) 并在 添加模块 对话框中指定模块名称。 要从列表中移除一个模块，选择它并点击 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)。 | | 对导入的成员进行排序 | * 当选中此复选框时，IntelliJ IDEA 将在合并的 import 语句中按字母顺序列出导入的成员。 请注意，成员是按照导入的顺序列出的，只有在您运行 `代码 \| 优化导入` 时才会重新排序。 * 当此复选框未选中时，合并的 import 语句中的成员总是按照它们被导入的顺序以逗号分隔的形式列出。 | | 按模块对导入排序 | * 选中此复选框后， import 语句将在运行 `代码 \| 优化导入` 时按模块名称的字母顺序重新排序。 * 当此复选框未选中时， import 声明总是按照生成的顺序显示，并且在您运行 `代码 \| 优化导入` 后，该顺序不会改变。 | ## 排列 在此选项卡中，按照您的偏好设定一组规则，以重新排列您的 JavaScript 代码。 | 分组规则 | 使用此区域来设置分组规则。 * 将具有对应 getter/setter 的属性字段分组。 * 将用箭头函数初始化的字段与方法分组。 * 将重写的方法放在一起 选择此复选框以按类和接口将重写的方法分组。 在 订单 列表中，选择 保持顺序 或 按名称排序 选项。 | | 匹配规则 | 使用此区域将元素顺序定义为规则列表，其中每条规则都有一个匹配项设置，例如修饰符或类型。 * !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)：使用此按钮来添加规则。 空规则 区域已打开。 * !["移除"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)：使用此按钮从列表中移除规则。 * ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)：使用此按钮编辑现有规则。 要查看此按钮，请导航至您想要编辑的规则并点击按钮。 在弹出的窗口中，修改规则字段。 * ![上移按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.moveUp.svg) ![下移按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.moveDown.svg)：使用这些按钮将选定的规则上移或下移。 | | 空规则 | 使用此区域创建新的匹配规则或编辑现有规则。 您可以从以下筛选器中选择： * 类型 ：使用此筛选器为规则选择类或方法。 请注意，双击类型关键字将否定条件。 * 修饰符 ：使用此筛选器选择规则的修饰符类型。 请注意，点击两次修饰符关键字会否定该条件。 * 名称 ：使用此字段来在规则中指定条目名称。 此筛选器仅匹配条目名称，例如字段名称、方法名称、类名称等。 该过滤器支持正则表达式，并使用 [标准语法](http://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html)。 匹配是针对整个名称进行的。 * 订单 ：使用此列表来选择规则的排序顺序。 当多个元素使用相同的匹配规则时，此选项非常有用。 在这种情况下，选择 保持顺序 将保持在重排之前设置的相同顺序，选择 按名称排序 将按照它们的名称对相同匹配规则的元素进行排序。 * 别名 ：此选项显示在 规则别名定义 对话框中定义的别名。 您可以删除不需要的部分。 | | ![按字母顺序排序" 按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.objectBrowser.sorted.svg) | 当从 订单 列表中选择 按名称排序 时，会显示此图标。 图标表示此规则中的项目按字母顺序排序。 | ## 设置从 当适用时，链接将出现在页面的右上角。 点击此链接并选择要作为当前语言代码样式基础的语言。 要返回到初始的代码样式设置，并丢弃更改，请点击 重置 。 ## See also ### 过程 [重新格式化代码](reformat-and-rearrange-code.html) [代码样式](settings-code-style.html) [代码样式方案](configuring-code-style.html)