本文提供 Vue3 + Vite + JavaScript/TypeScript 项目的 VSCode 环境配置方案,解决格式化冲突、缩进、引号及换行等问题。
一、安装必要插件
打开 VSCode 扩展面板(Ctrl+Shift+X),安装以下插件:
- Vue Language Features (Volar) → Vue3 官方必备插件
- 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]"


