Vue3 中配置 EditorConfig

团队开发最烦啥？代码风格不统一。你俩空格他四个，合并代码时 git diff 里净是格式改动，真想把同事拖出去。EditorConfig 就是干这个的------在项目根目录扔个 .editorconfig 文件，告诉所有编辑器「按这个来」。

它跟语言、框架没关系，纯纯的格式约定，VSCode、WebStorm、Sublime 都吃这套。

什么时候用

• 多人协作，要统一缩进、换行、编码
• 团队里有人用 VSCode，有人用 WebStorm，有人用 vim
• 项目大了，每次 commit 有一半改动是格式修复
• 想省点精力，让工具自动帮你对齐

踩坑提醒

1. 编辑器要装插件------VSCode 需要装「EditorConfig for VS Code」，WebStorm 自带，Sublime 也需要装一个。
2. EditorConfig 的优先级比编辑器本地设置低 ------如果你编辑器里写死了 indent_size=4，那项目配置不会覆盖它。所以最好让团队统一编辑器设置。
3. 它只管基础的格式------像缩进大小、换行符、末尾空行这些。真要深度格式化（比如自动排序 import、统一分号），还得靠 Prettier 或 ESLint。三者不冲突，能配合着来。
4. 对 .vue 文件，不能按 template/script/style 块单独设 ------EditorConfig 只认文件后缀，不认文件内部的语法块。所以 [*.vue:template] 这种写法是无效的，别信网上那些乱七八糟的教程。

配置走一遍

1. 创建 .editorconfig

在 Vue3 项目根目录新建一个 .editorconfig 文件，内容如下：

# Editor configuration, see http://editorconfig.org

# 告诉编辑器：这是最顶层的 EditorConfig 配置

root = true

# 所有文件适用

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

# Markdown 文件单独处理

[*.md]
max_line_length = off
trim_trailing_whitespace = false

# 常见文件类型，缩进统一 2 格

[*.{vue,js,html,css,scss}]
indent_size = 2

注意 ：trim_trailing_whitespace​ 是去掉行尾的空白字符，不是行首。原文瞎写了，我帮你改过来。

如果需要配合 ESLint 在保存时自动格式化，可以在 VSCode 的 settings.json 里加这个（和 EditorConfig 无关，但几乎是标准操作）：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

2. 编辑器插件

编辑器	插件名
VSCode	EditorConfig for VS Code
WebStorm	内置支持，不用装
Sublime Text	EditorConfig Sublime Text

常见玩法

覆盖某个文件类型

[*.{js,ts,vue}]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

多语言项目

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2

[*.{css,scss,less}]
indent_size = 2

[*.json]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

特定目录下特殊缩进

[src/components/**/*.vue]
indent_size = 2

[tests/**]
indent_size = 4

高级玩法：跟 Prettier 搭伙

如果你用了 Prettier，可以让 EditorConfig 和 Prettier 的规则尽量保持一致，省得打架：

[*.{js,ts,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Prettier 那边也设一样的，完事。

一句话总结 ：.editorconfig 是团队协作的基操，花五分钟配好，以后烦你的格式问题至少少一半。

‍