Vue 3 项目初始化 EditorConfig 的核心是在根目录新建 .editorconfig 文件并启用编辑器插件,统一缩进、换行、空格等基础风格;推荐配置 root = true、indent_style = space、indent_size = 2,并按文件类型差异化设置;需安装对应编辑器插件(如 VS Code 官方插件)并验证生效;应与 Prettier、ESLint 协同分工,避免规则冲突。

Vue 3 项目初始化时配置 EditorConfig,核心是**在根目录新建 .editorconfig 文件,并确保团队成员的编辑器启用了对应插件**。它不依赖构建工具或运行时,而是在编码阶段就统一缩进、换行、空格等基础风格,避免因编辑器默认设置不同导致的协作干扰。
1. 创建 .editorconfig 文件
在项目根目录(与 package.json 同级)新建文件 .editorconfig,内容推荐如下(适配 Vue + TypeScript 主流实践):
# https://editorconfig.org
root = true
<p>[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true</p><p>[*.md]
insert_final_newline = false
trim_trailing_whitespace = false</p><p>[*.{yml,yaml,json,ts,js,vue}]
indent_size = 2
-
indent_size = 2是 Vue 官方推荐和多数 TS 项目采用的缩进宽度 -
[*.md]单独关闭 Markdown 的末尾换行和空格清理,避免文档渲染异常 -
[*.{yml,...}]显式声明配置范围,增强可读性和可维护性
2. 编辑器插件支持
EditorConfig 配置本身不会自动生效,需编辑器支持:
- VS Code:安装官方插件 EditorConfig for VS Code(微软维护,启用即生效)
- WebStorm / IntelliJ:内置支持,无需额外安装,但需在 Settings → Editor → Code Style 中确认 “Enable EditorConfig support” 已勾选
- 其他编辑器:访问 editorconfig.org/download 查找对应插件
3. 验证是否生效
最直接的方式是手动测试:
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
立即学习“前端免费学习笔记(深入)”;
- 新建一个
test.js,输入几行代码后保存,观察缩进是否为 2 个空格 - 在行尾加空格再保存,检查是否被自动删除(
trim_trailing_whitespace = true) - 打开任意
.md文件,确认末尾不会多出空行
若未生效,优先检查插件是否启用、文件是否放在项目根目录、配置语法是否有拼写错误(如 root = true 必须小写且无空格)。
4. 与其他规范工具协同
EditorConfig 是基础层,建议与 Prettier、ESLint 分工协作:
- EditorConfig:管编辑器行为(缩进宽度、换行符、空格清理)
- Prettier:管代码格式(括号位置、引号类型、函数换行等)
- ESLint:管代码质量(潜在 bug、未使用变量、TS 类型错误等)
三者共存时,建议在 Prettier 配置中关闭与 EditorConfig 重叠的选项(如 tabWidth),避免冲突。

















