在WebStorm中，在导入和大括号之间添加空格

Question

在WebStorm的自动导入功能中，是否可以在引入和花括号之间添加空格？

目前自动导入的样子：

import {AbstractControl} from '@angular/forms';

我想将其改变为：

import { AbstractControl } from '@angular/forms';

- Runtime Terror

---

然后您需要相应地设置TypeScript代码样式；生成的代码将使用当前设置。请参阅https://www.jetbrains.com/help/webstorm/2016.3/code-style.html。 - jonrsharpe

Answer 1

是的。前往WebStorm -> 首选项 -> 编辑器 -> 代码样式 -> JavaScript -> 空格（第二个选项卡），滚动到“Within”部分并勾选ES6导入/导出括号。

- yivo

---

请注意，根据Mehul对此问题的回答，您可能要查找的是TypeScript（而不是JavaScript）设置。 我最初也遇到了这个问题。 - Daniel Willis

关于 v2018.2 版本设置位置的更新。前往 WebStorm -> 文件 -> 新项目设置 -> 编辑器 -> 代码样式 -> JavaScript -> 空格（第二个选项卡），滚动到“Within”部分，勾选 ES6 import/export 大括号。 - dbinott

Answer 2

• 对于JavaScript项目：

打开 WebStorm > 文件 > 设置 > 编辑器 > 代码样式 > JavaScript > 空格（第二个标签页），滚动到“在……内部”一节，勾选 ES6 import/export 大括号。

• 对于TypeScript项目：

打开 WebStorm > 文件 > 设置 > 编辑器 > 代码样式 > TypeScript > 空格（第二个标签页），滚动到“在……内部”一节，勾选 ES6 import/export 大括号。

- Mehul Mali

Answer 3

虽然其他答案是正确的，但是它们并不具有可移植性。
您必须记得在运行项目的所有计算机上更改IntelliJ设置。

还有更好的替代方案！
将.editorconfig文件添加到您的项目中。

根据您的具体请求，“IntelliJ/WebStorm”可以通过将以下内容放入.editorconfig来实现：

ij_typescript_spaces_within_brackets = true

---

为了更好地向您展示 .editorconfig 文件的作用，以下是一个例子：

• 将其标记为根目录（以便编辑器不会查找其他位置）
• 确保所有文件都是 utf-8 格式
• 如果文件与给定扩展名匹配，则赋予其一些额外属性

root = true

[*]
charset = utf-8
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
ij_typescript_spaces_within_brackets = true

- Frankie

---

这是特别针对ES6导入吗？还是适用于任何括号？ - azerafati

@azerafati，这适用于所有代码；您可以在https://editorconfig.org/上了解更多信息。不知道ES6导入是否有任何例外。 - Frankie

它只需要针对导入(import)进行定位。 - azerafati

@azerafati 或许你最终可以考虑强制整个代码库采用一种代码风格。如果有多人在开发，这绝对是一个好习惯。我认为始终遵循（并强制执行）某种代码风格都是一个好习惯。 - Frankie

Answer 4

更新 .editorconfig，为 TypeScript 和 JavaScript 文件添加属性。

[{*.ats,*.cts,*.mts,*.ts}]
ij_typescript_spaces_within_imports = true

[{*.cjs,*.js,*.jsx}]
ij_javascript_spaces_within_imports = true

- Cassius

---

这个答案最适合，因为它只针对导入中的空格，而不是代码中的其他位置。 - Rhythm Ruparelia

Answer 5

您可能想要检查“空格”选项卡中“其他”部分中的“插值表达式内部”的设置。

- sum