vs code 代码保存自动格式化
步骤一：安装 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 保存文件
- 观察文件是否自动格式化