vs code 代码保存自动格式化

步骤一：安装 Prettier 插件

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

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

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

javascript 复制代码

module.exports = {
    printWidth: 160, // 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行。默认为80
    tabWidth: 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 文件（项目根目录），如果没有的话手动创建

javascript 复制代码

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

步骤三：忽略特定文件

创建 .prettierignore 文件

javascript 复制代码

node_modules/
dist/
*.min.js

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

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

vs code 代码保存自动格式化

步骤一：安装 Prettier 插件

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

步骤三：忽略特定文件

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

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