WebStorm缩进不生效主因是.editorconfig或EditorConfig插件覆盖设置，需同步调整语言级、项目级配置并禁用插件，且须关闭Detect and use existing file indents选项。
WebStorm 的缩进不生效，大概率不是没设对，而是被 .editorconfig 或插件覆盖了。 直接改 Settings 里的 Tab size 和 Indent 常常没用，必须同步处理三处：语言级设置、项目级配置、插件干扰。
为什么改了 Settings 还是 2 格缩进？
WebStorm 会按优先级依次读取：文件内已有缩进格式 → .editorconfig → 语言专属 Code Style 设置 → 全局默认。哪怕你在 Editor > Code Style > JavaScript 里把 Indent 改成 4，只要项目根目录有 .editorconfig 且里面写了 indent_size=2，它就无视你手动设的值。
- 打开项目根目录，检查是否存在
.editorconfig文件 - 如果存在，确认其中是否有
indent_size、tab_width或indent_style字段 - 修改后必须关闭项目再重新打开，或重启 WebStorm，否则缓存不刷新
如何正确设置 JavaScript/HTML/Vue 模板统一为 4 空格？
不同文件类型要分别设置，不能只调一个地方。Vue 单文件组件（.vue）默认继承 HTML + JavaScript 双重规则，但模板部分（<template>）走的是 HTML 风格，脚本部分（<script>）走 JavaScript 风格。
- 进
Settings > Editor > Code Style > JavaScript：设Tab size、Indent、Continuation indent全为4，取消勾选Use tab character - 进
Settings > Editor > Code Style > HTML：同样设Tab size和Indent为4，并确保Use tab character未勾选 - Vue 文件中的
<style>块属于 CSS/SCSS，需额外去Code Style > CSS或SCSS里同步设置
EditorConfig 插件是“静默覆盖者”，必须关掉
WebStorm 自带的 EditorConfig 插件（默认启用）会强制读取 .editorconfig 并覆盖你所有手动设置，哪怕你根本没写这个文件——它也会按内置 fallback 规则执行（比如默认 indent_size=2）。
- 进
Settings > Plugins - 搜索
EditorConfig - 取消勾选，点
Apply，然后**完全退出 WebStorm 再重开** - 此时 Settings 里的缩进设置才真正起效
Tab 键输出空格还是 Tab 字符？关键在这一项
很多人以为改了 Tab size 就够了，其实真正决定按下 Tab 后插入什么内容的，是 Use tab character 这个开关。
- 如果勾选了
Use tab character，按 Tab 插入的是 \t 字符，宽度由终端/编辑器渲染决定，容易错乱 - 如果不勾选，按 Tab 插入的是空格，数量等于你设的
Indent值（如 4），这才是团队协作和 ESLint 兼容的稳妥做法 - 该选项在每种语言的
Tabs and Indents页面里独立存在，JavaScript、HTML、CSS 都要单独关掉
最容易被忽略的一点：WebStorm 默认开启 Detect and use existing file indents for editing（在 Settings > Editor > General > Smart Keys 下），它会偷偷记住你当前文件的历史缩进风格，并优先采用。哪怕你全局设成 4，打开一个老项目里 2 空格缩进的文件，它仍会沿用 2 格——得手动右下角点击缩进指示器，选 “Reformat with 4 spaces” 才能真正切换过来。
