VS Code中Vue.js自动缩进失效问题求助

一、调整VS Code核心缩进设置 #

• 打开设置界面（快捷键Ctrl+,/Cmd+,），搜索并配置以下选项：
  • 将Editor: Auto Indent设为full
  • 勾选Editor: Detect Indentation，让编辑器自动识别文件缩进规则
  • 搜索[vue]前缀的缩进配置，确保Editor: Tab Size和Editor: Insert Spaces与项目规范匹配（通常设为2）

二、优化Vue-Official插件配置 #

• 打开插件设置面板，找到Vue-Official的相关选项：
  • 勾选Vue > Format: Enable，开启插件格式化能力
  • 将Vue > Format: Default Formatter设为vue.volar（若已安装Volar）或vscode.html-language-features

三、切换为Volar插件（推荐） #

Vue-Official已逐步被Volar替代，Volar对Vue 3语法支持更完善，缩进逻辑更精准：

• 在扩展商店搜索安装Vue Language Features (Volar)
• 禁用旧的Vue-Official插件避免冲突
• 打开Volar设置，勾选Volar > Formatting: Enable，缩进规则会自动适配Vue文件语法结构

四、修正Vue文件类型关联 #

若VS Code未正确识别Vue文件类型，会导致缩进失效：

• 打开任意.vue文件，点击右下角的语言模式标识（如显示Plain Text）
• 在弹出菜单中选择Vue，或通过Configure File Association for '.vue'将.vue文件默认关联到Vue语言模式

五、排查代码规范工具配置冲突 #

如果项目使用ESLint或Prettier，配置不一致会引发缩进异常：

• 检查.eslintrc.js或.prettierrc中的缩进规则，确保indent（ESLint）或tabWidth（Prettier）与VS Code设置一致
• 安装ESLint和Prettier插件，开启Editor: Format On Save，让保存时自动修正缩进

内容的提问来源于stack exchange，提问作者none