告别代码乱糟糟：VSCode + Prettier + Vetur 三件套配置全攻略（含Vue项目实战）-CSDN博客

告别代码乱糟糟：VSCode + Prettier + Vetur 三件套配置全攻略（含Vue项目实战）

当你接手一个Vue项目时，是否曾被团队成员五花八门的代码风格搞得头晕目眩？有人喜欢单引号，有人坚持双引号；有人写JSX时属性换行对齐，有人则全部挤在一行。这种风格混乱不仅影响代码可读性，还会在代码评审时引发无意义的争论。本文将带你用VSCode+Prettier+Vetur搭建一套"零争议"的自动化代码格式化流水线，特别针对Vue单文件组件的特殊需求提供完整解决方案。

1. 环境准备：基础工具链配置

1.1 必备插件安装

首先确保你的VSCode已安装以下核心插件：

Prettier - Code formatter：代码格式化核心引擎
Vetur：Vue单文件组件支持
ESLint：代码质量检查（可选但推荐）

安装完成后，在项目根目录创建.prettierrc配置文件，这是比直接修改VSCode设置更可维护的方式：

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "bracketSameLine": true
}

1.2 关键VS Code设置

在用户设置中(settings.json)添加以下配置：

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