跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

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

Vue3 项目的 VSCode 开发环境配置方案。主要包含两个核心配置文件：VSCode 的 settings.json 用于全局格式化设置，以及项目根目录的 .prettierrc 用于统一代码风格。配置涵盖插件安装（Volar, Prettier）、保存自动格式化、缩进规范、引号样式及 ESLint 兼容性处理。通过上述配置可实现 Vue3 + Vite + JS/TS 项目的代码格式统一，解决格式化冲突问题。

PgDevote发布于 2026/4/6更新于 2026/5/2029 浏览
Vue3 前端配置指南：VSCode settings.json 与 Prettier

一、先确认你已安装这 2 个插件

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

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

二、VSCode settings.json 配置（Vue3 专用）

打开方式：

Ctrl+Shift+P → 输入 Open Settings (JSON) → 回车，全选替换下面代码：

{
  "// ==================== Vue3 核心格式化配置 ====================" ,
  "// 默认格式化工具 = Prettier",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "// 保存文件时自动格式化（最实用）",
  "editor.formatOnSave": true,
  "// 粘贴代码自动格式化",
  "editor.formatOnPaste": true,
  "// 选中代码可手动格式化",
  "editor.formatOnSelection": true,
  "// 自动修复 ESLint 错误（配合格式化）",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
,
"// ==================== 分语言指定格式化器 ===================="
,
"[vue]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[javascript]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[typescript]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[html]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[css]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[scss]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[json]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"// ==================== Vue3 语法优化 ===================="
,
"// Volar 插件格式化支持"
,
"vue.autoInsertParentheses"
:
true
,
"// 关闭 VSCode 自带的格式化冲突"
,
"javascript.format.enable"
:
false
,
"typescript.format.enable"
:
false
,
"// 缩进统一为 2 个空格（Vue3 标准）"
,
"editor.tabSize"
:
2
,
"editor.insertSpaces"
:
true
}

三、.prettierrc 配置文件（Vue3 团队标准）

使用方式：

在你的 Vue3 项目根目录，新建一个文件，命名为 .prettierrc，复制以下内容：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css"
}

四、格式化快捷键（Vue3 一键格式化）

  1. 格式化整个文件：Shift + Alt + F（Windows）/ Shift + Option + F（Mac）
  2. 自动格式化：直接按 Ctrl + S 保存文件，自动格式化代码
  3. 格式化选中代码：选中代码 → 按 Shift + Alt + F

五、额外优化（可选，解决 ESLint 冲突）

如果你的 Vue3 项目用了 ESLint，执行这行命令安装兼容包：

npm install eslint-config-prettier eslint-plugin-prettier -D

然后在 .eslintrc.cjs 中添加：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ]
};

总结

  1. 复制 settings.json → 配置 VSCode 格式化行为
  2. 项目根目录新建 .prettierrc → 统一 Vue3 代码风格
  3. 保存文件自动格式化，快捷键一键格式化
  4. 完美支持 Vue3 <script setup> 语法、CSS/Scss、TS/JS

目录

  1. 一、先确认你已安装这 2 个插件
  2. 二、VSCode settings.json 配置（Vue3 专用）
  3. 打开方式：
  4. 三、.prettierrc 配置文件（Vue3 团队标准）
  5. 使用方式：
  6. 四、格式化快捷键（Vue3 一键格式化）
  7. 五、额外优化（可选，解决 ESLint 冲突）
  8. 总结
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • Whisper 语音识别模型定制化训练与部署指南
  • 从猎豹到机器人：脊柱仿生学如何重塑四足机器人的运动极限
  • PyWebView 轻量级跨平台桌面应用开发简介
  • NLP 自然语言处理 TextRank 算法详解：文本摘要与关键词提取
  • HID Remapper 实现手柄到鼠标的精准转换
  • 前端水印技术与反爬策略实现方案
  • B 站生态观察：从二次元社区到 AI 创新孵化器
  • 《自然语言处理：大模型理论与实践》：大模型核心技术与实战指南
  • Counterfeit-V3.0 AI 绘画模型技术与应用指南
  • Android 开发环境搭建教程
  • OpenClaw 机器人抓取平台搭建全流程详解
  • Google Antigravity AI 编程工具下载与安装指南
  • 昇腾 NPU 部署 CodeLlama 大模型实战指南
  • OpenClaw 高级配置与云端本地协同实战
  • 50 人广告公司低代码数字化突围：从 Excel 到敏捷中台实战
  • Django Web 框架入门与核心使用
  • 前端状态管理方案对比与选型指南
  • 归并排序详解：分治策略与 C 语言实现
  • HTML5 Web Workers 详解：提升网页性能的关键技术
  • Anthropic Claude Code 源码因 Source Map 配置失误泄露事件复盘

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online