Vue3 前端开发配置指南：VSCode settings.json 与 Prettier

本文提供 Vue3 + Vite + JavaScript/TypeScript 项目的 VSCode 环境配置方案，解决格式化冲突、缩进、引号及换行等问题。

一、安装必要插件

打开 VSCode 扩展面板（Ctrl+Shift+X），安装以下插件：

1. Vue Language Features (Volar) → Vue3 官方必备插件
2. Prettier - Code formatter → 代码格式化核心插件

二、VSCode settings.json 配置

打开方式

Ctrl+Shift+P → 输入 Open Settings (JSON) → 回车，替换为以下内容：

{
  "// ==================== Vue3 核心格式化配置 ====================",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSelection": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "// ==================== 分语言指定格式化器 ====================",
  "[vue]"