Vue 3 项目中实现一致代码格式：ESLint、Prettier 与 VS Code 配置实战（2026 版）

在 Vue 3 + Vite 项目中，确保代码风格一致仍然是团队协作的常见挑战。Prettier 的格式化规则、ESLint 的 lint 规则、Volar 的语言服务以及 VS Code 的内置格式化器之间很容易产生冲突，导致保存时属性被意外合并、缩进反复变化、或出现 localStorage 未定义等警告。

本文基于实际项目调试经验，总结出 2026 年最稳定的配置方案，帮助你快速建立可靠的格式化与 lint 流程。

常见问题回顾

手动将标签属性拆成每行一个，保存后又自动合并成一行
行首缩进在 Tab 与空格之间切换，触发 Insert ·· / Replace ·· with ···· 错误
ESLint 报 'localStorage' is not defined (no-undef)，尽管浏览器环境中明显可用

这些问题本质上是工具链配置未对齐。

推荐配置（Vue 3 + Vite + TypeScript，2026 年主流实践）

1. Prettier 配置（.prettierrc.json）

JSON

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "vueIndentScriptAndStyle": true,
  "singleAttributePerLine": true
}

核心选项说明：

singleAttributePerLine: true —— 强制 Vue / HTML / JSX 标签每个属性独占一行，提升可读性
printWidth: 100 —— 平衡窄屏与长行的折中方案
useTabs: false —— 统一使用空格，避免 Tab/空格混用冲突

2. VS Code 工作区设置（.vscode/settings.json）

JSON

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2
  },

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "html.format.wrapAttributes": "force-expand-multiline",

  "eslint.validate": ["javascript", "typescript", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  "vetur.format.enable": false
}

关键点：

明确指定 [vue] 文件使用 Prettier，避免 Volar 或内置 HTML 格式化器干扰
editor.insertSpaces 与 tabSize 确保缩进一致
source.fixAll.eslint 实现保存时自动修复可修复的 lint 问题

3. ESLint 平面配置（eslint.config.js，ESLint v9+）

JavaScript

// eslint.config.js
import pluginVue from 'eslint-plugin-vue'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
import globals from 'globals'

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}']
  },
  {
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**']
  },

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,

  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  }
)

说明：

skipFormatting —— 关闭 ESLint 中与 Prettier 重叠的格式规则（现代替代 eslint-config-prettier）
globals.browser —— 解决 localStorage、window 等浏览器全局对象的 no-undef 警告

问题排查速查表

问题描述	可能原因	优先解决顺序
属性保存后自动合并成一行	.vue 文件格式化器非 Prettier	1. settings.json 中为 [vue] 指定 Prettier 2. 重载 VS Code 窗口
缩进反复报错（·· vs ····）	Tab 与空格混用 + 编辑器设置不一致	1. 执行“Convert Indentation to Spaces” 2. settings.json 强制 insertSpaces 3. npx prettier --write . 全项目格式化
Prettier 未强制单属性一行	配置未加载或 printWidth 过大	1. 确认 .prettierrc 存在并正确 2. printWidth 建议设为 100
'localStorage' is not defined	未声明 browser 环境	eslint.config.js 中添加 globals.browser
保存时 ESLint 未自动修复	未开启 codeActionsOnSave	添加 "source.fixAll.eslint": "explicit"

最佳实践建议

将 .prettierrc、eslint.config.js 和 .vscode/settings.json 全部提交到 Git 仓库，确保团队成员与 CI 环境一致
采用 ESLint v9 平面配置 + @vue/eslint-config-* 系列包，这是 Vue 3 项目的当前标准
定期运行 npx prettier --write "src/**/*.{js,ts,vue}" 或集成到 pre-commit hook 中统一代码库
新项目可直接使用 npm create vue@latest 并启用 ESLint + Prettier，通常只需少量微调

配置对齐后，保存文件时格式化与 lint 将变得可靠，编辑器真正成为辅助工具而非干扰源。

如果你在实际项目中采用了不同的组合方案，欢迎在评论区分享配置细节。