如何为IntelliJ的.vue文件配置导入语句空格的.editorconfig规则

数据老陈

2026-10-4

结论

目前IntelliJ生态不存在ij_vue_spaces_within_imports这类专门针对Vue文件导入空格控制的.editorconfig配置项。你之前的配置不生效有两个原因：一是该配置未显式赋值，二是低版本IDE未兼容.vue文件内嵌TS脚本的editorconfig规则继承逻辑。

可行解决方案

方案1：升级IDE+调整editorconfig配置
将WebStorm/IDEA升级到2023.2及以上版本，补全配置项的赋值，高版本IDE会自动将TS相关的editorconfig规则应用到.vue文件的script块中，配置示例：

[*.{ts,tsx,vue}]
# 需显式指定布尔值，true代表导入大括号内加空格，false代表不加
ij_typescript_spaces_within_imports = true
ij_typescript_force_quote_style = true
ij_typescript_use_double_quotes = false

方案2：修改IDE代码风格配置
打开设置路径编辑器 > 代码风格 > TypeScript > 空格，找到导入语句括号内的配置项，按需求勾选是否加空格，该配置默认对.vue文件内的TS代码生效，不需要额外适配。
方案3：用ESLint规则统一控制（跨IDE兼容性最好）
安装eslint、eslint-plugin-import、eslint-plugin-vue相关依赖后，在ESLint配置文件中添加对应规则：
```
// .eslintrc.cjs 示例
module.exports = {
  rules: {
    // 导入大括号内空格规则，第二个参数可选'always'（加空格）/'never'（不加空格）
    'import/space-in-brackets': ['error', 'always'],
    // 配合vue单文件组件校验
    'vue/script-indent': ['error', 2]
  }
}
```
开启IDE的「保存时自动执行ESLint修复」选项后，所有.vue和.ts文件的导入空格规则都会自动对齐。