JavaScript大前端
Vue3 项目 VSCode 配置指南：settings.json 与 Prettier
Vue3 项目开发需统一代码风格，通过配置 VSCode settings.json 和 .prettierrc 文件，结合 Volar 与 Prettier 插件，实现保存自动格式化、缩进统一及 ESLint 兼容。配置涵盖默认格式化工具指定、分语言格式化器设置、ESLint 冲突解决及快捷键操作，确保多语言混合项目的一致性。
Vue3 项目开发需统一代码风格，通过配置 VSCode settings.json 和 .prettierrc 文件，结合 Volar 与 Prettier 插件，实现保存自动格式化、缩进统一及 ESLint 兼容。配置涵盖默认格式化工具指定、分语言格式化器设置、ESLint 冲突解决及快捷键操作，确保多语言混合项目的一致性。
本文介绍如何配置 VSCode 以适配 Vue3 + Vite + JavaScript/TypeScript 项目，解决格式化冲突、缩进、引号、换行等问题。
打开 VSCode 扩展面板 Ctrl+Shift+X，安装以下插件：
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
}
在您的 Vue3 项目根目录，新建一个文件，命名为 .prettierrc，复制以下内容：
{
"printWidth": 120,
// 一行最大字符数（Vue3 推荐）
"tabWidth": 2,
// 缩进 2 空格（强制标准）
"useTabs": false,
// 禁用 Tab，用空格缩进
"semi": true,
// 语句末尾加分号
"singleQuote": true,
// 使用单引号（Vue3 标准）
"quoteProps": "as-needed",
// 对象属性仅必要时加引号
"jsxSingleQuote": true,
// JSX 使用单引号
"trailingComma": "es5",
// 末尾逗号（数组/对象保留）
"bracketSpacing": true,
// 对象大括号内保留空格 { name: xxx }
"bracketSameLine": false,
// HTML 标签反尖括号单独一行（Vue 标准）
"arrowParens": "avoid",
// 箭头函数单参数省略括号
"endOfLine": "lf",
// 换行符统一为 LF（避免 Windows/Mac 冲突）
"htmlWhitespaceSensitivity": "css"
// HTML 空格敏感度（不破坏布局）
}
Shift + Alt + F（Windows）/ Shift + Option + F（Mac）Ctrl + S 保存文件，自动格式化代码Shift + Alt + F如果您的 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'
// 关键：Prettier+ESLint 兼容
]
};
settings.json → 配置 VSCode 格式化行为.prettierrc → 统一 Vue3 代码风格<script setup> 语法、CSS/Scss、TS/JS
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online