vscode "prettier" 格式化不生效

问题现象：

配置本地setting 里面的各种不生效代码样式还是写的乱七八糟的样子

解决路程：

各种百度各种搜，包括升级vscode重新卸载eslint及prettier插件
最后发现vscode软件下方每次保存的时候下方有提示报错
如下图：点击红框内的花括号{} 会显示“x prettier view logs” 点击view logs后会出现保存失败的原因

1744345852931.jpg

解决方案：

给项目添加一个.prettierrc.json文件

{
  "printWidth": 180,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "singleAttributePerLine": false
}

因为json无法配置注释，所以对应翻译为

{
  "printWidth": 180,    //每行最多显示的字符数
  "tabWidth": 2,//tab的宽度 2个字符
  "useTabs": false,//禁止使用tab代替空格
  "semi": true,//结尾使用分号
  "singleQuote": true,//使用单引号代替双引号
  "trailingComma": "all",//结尾是否添加逗号 all添加，none不添加
  "bracketSpacing": true,//对象括号俩边是否用空格隔开
  "bracketSameLine": true,;//组件最后的尖括号不另起一行
  "arrowParens": "always",//箭头函数参数始终添加括号
  "htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的
  "vueIndentScriptAndStyle": false,//vue 的script和style的内容是否缩进
  "endOfLine": "auto",//行结尾形式 mac和linux是\n  windows是\r\n 
  "singleAttributePerLine": false //组件或者标签的属性是否控制一行只显示一个属性
}

参考文档

前端代码统一格式化=》Prettier配置指南