每次保存文件时，VScode会自动格式化文档，但是标签中的属性都会被强制换行，对于强迫症的我来说，神烦，尝试了N种方法后，终于知道了最完美的解决办法，可以愉快地Ctrl+s啦~

❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀更新——新增prettier代码格式化配置❀❀❀❀❀❀❀❀❀❀❀❀❀

❀  好多小伙伴反应，使用的prettier进行代码格式化，之前记录的只是針對vetur格式化代碼    ❀

❀  新增进行一下补充，亲测有效~~~~~~ 欢迎大家继续指正~~~~                                             ❀

❀  更新时间：2024/3/26                                                                                                             ❀

❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀

一、查看VSCode所使用代码格式化插件

1.下载插件，在扩展商店搜索 Vetur   Prettier

2.配置默认格式化插件

任意文件右键选择使用...格式化代码，点击配置默认格式化程序，选择需要的格式化插件，二选一

 3.打开设置setting.json

 点击VScode左下角管理，找到设置，如下如所示，点击 settings.json 并编辑。

二、使用Vetur格式化插件

 1.在settings.json 中添加如下代码

 "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 240,
            "wrap_attributes": "auto",
            "end_with_newline": false
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },

2.重启VSCode ！！！

三、使用Prettier格式化插件

1.用法一 在setting.json中配置

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.alwaysShowStatus": true, // 总是显示eslint状态
  "prettier.printWidth": 500, // 超过最大值换行
  "prettier.tabWidth": 4, // 缩进字节数
  "prettier.useTabs": false, // 缩进不使用tab，使用空格
  "prettier.semi": true, // 句尾添加分号
  "prettier.singleQuote": true, // 使用单引号代替双引号
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.bracketSameLine": true, // 在jsx中把'>' 是否单独放一行 true--不会单独占一行，false--折行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  // "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  "prettier.trailingComma": "none", // 属性值es5表示在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.tslintIntegration": false,
  "notebook.codeActionsOnSave": {}, // 不让prettier使用tslint的代码格式进行校验

2.使用.prettierrc文件

在项目根目录新建.prettierrc文件，文件格式可为json/js/yml 格区别，json格式不允许添加注释，js/yml可添加注释，更灵活一点。

关键点：

• 通过printWidth设置行容量，目前没找到其他方式
• 在setting.json中配置.prettierrc路径  "prettier.configPath": ".prettierrc.js",

module.exports = {
    printWidth: 500, // 指定行的最大长度
    eslintIntegration: true, //不让prettier使用eslint的代码格式进行校验,
    stylelintIntegration: true, //不让prettier使用stylelint的代码格式进行校验
    tabWidth: 4, // 指定缩进的空格数
    useTabs: false, // 是否使用制表符进行缩进，默认为 false
    singleQuote: true, // 是否使用单引号，默认为 false
    quoteProps: 'as-needed', // 对象属性是否使用引号，默认为 "as-needed"
    trailingComma: 'none', // 是否使用尾随逗号（末尾的逗号），可以是 "none"、"es5"、"all" 三个选项
    bracketSpacing: true, // 对象字面量中的括号是否有空格，默认为 true
    bracketSameLine: true, // JSX 标签的右括号是否与前一行的末尾对齐，默认为 false
    arrowParens: 'always', // 箭头函数参数是否使用圆括号，默认为 "always"
    rangeStart: 0, // 指定格式化的范围的起始位置
    rangeEnd: Infinity, // 指定格式化的范围的结束位置
    requirePragma: false, // 是否需要在文件顶部添加特殊的注释才能进行格式化，默认为 false
    insertPragma: false, // 是否在格式化后的文件顶部插入特殊的注释，默认为 false
    proseWrap: 'preserve', // 是否保留 markdown 文件中的换行符，默认为 "preserve"
    htmlWhitespaceSensitivity: 'ignore', // //html存在空格是不敏感的
    vueIndentScriptAndStyle: false, // 是否缩进 Vue 文件中的 <script> 和 <style> 标签，默认为 false
    endOfLine: 'auto', // 指定换行符的风格，可以是 "auto"、"lf"、"crlf"、"cr" 四个选项
    ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    semi: true, // 行末是否添加分号，默认为 true
    usePrettierrc: true, // 是否使用项目根目录下的 .prettierrc 文件，默认为 true
    overrides: [
        // 针对特定文件或文件类型的格式化配置
        {
            files: '*.json', // 匹配的文件或文件类型
            options: {
                tabWidth: 4 // 针对该文件类型的配置选项
            }
        },
        {
            files: '*.md',
            options: {
                printWidth: 100
            }
        }
    ]
};

3. 使用.prettierrcignore文件排除不想格式化的文件

    项目根目录新建.prettierrcignore，作用于  gitignore相同，添加在其中的文件将不会被格式化

# 忽略的文件夹:
dist/
node_modules/
.vscode/
.idea/

 4.重启VSCode ！！！

四、特别说明

1.支持代码折行

若想支持代码自动折行，不仅需要配置 printWidth: 80（值自定义），还需要配置 

singleAttributePerLine，为了避免设置宽度后，不符合宽度的不会折行，添加该命令后，会强制每一个属性都独占一行

singleAttributePerLine: true, //该选项将强制在 HTML、Vue 和 JSX 中每一个属性在一行，反之属性独占一行

2.关闭prettier插件格式化标签 >会单独成一行

有时会发现代码中，尾标签会独占一行，即使设置了"jsxBracketSameLine": true,也无效？

原因是prettier插件版本较高，原来的尾标签属性无效了，新的属性是

"bracketSameLine": true // 在jsx中把'>' 是否单独放一行 true--不会单独占一行，false--折行

配置完后一定要重启VSCode ！！！重启VSCode ！！！重启VSCode ！！！

保存试一下，大功告成啦~ 撒花花❀❀❀