步骤一：安装 Prettier 插件

• 打开 VS Code
• 点击左侧 扩展 图标（或按 Ctrl+Shift+X ）
• 在搜索框输入 Prettier - Code formatter
• 点击 安装 按钮
• 安装npm包：npm install prettier --save-dev

步骤二：验证项目配置文件

• 检查.prettierrc.js文件（项目根目录），如果没有的话手动创建

module.exports={printWidth:160,// 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行。默认为80tabWidth:4,//指定每个缩进级别的空格数useTabs:false,// 使用制表符 (tab) 缩进行而不是空格 (space)semi:true,//在语句结尾处自动添加分号,false就是不添加singleQuote:true,// 字符串是否使用单引号，默认为false，使用双引号quoteProps:'as-needed',//仅在需要时在对象属性周围添加引号jsxSingleQuote:false,//在JSX中使用单引号而不是双引号trailingComma:'es5',// 是否使用尾逗号，有三个可选值"<none|es5|all>"bracketSpacing:true,// 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }bracketSameLine:true,//将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。arrowParens:'always',//在单个箭头函数参数周围加上括号。htmlWhitespaceSensitivity:'ignore',//指定 HTML 文件的全局空白区域敏感度："css"-遵守CSS display属性的默认值,"strict" - 空格被认为是敏感的，"ignore" - 空格被认为是不敏感的。vueIndentScriptAndStyle:true,endOfLine:'lf',};

• 检查.vscode/settings.json文件（项目根目录），如果没有的话手动创建

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

步骤三：忽略特定文件

创建.prettierignore文件

node_modules/dist/*.min.js

步骤 四：验证自动格式化是否生效

• 打开任意 Vue 文件
• 修改代码格式（例如故意增加多余空格）
• 按 Ctrl+S 保存文件
• 观察文件是否自动格式化