VScode js 格式化异常

Question

【问题】用Vscode格式化保存js文件的时候，会将原本正常的文件格式化成乱七八糟的，虽然可以运行，但是属实是难以阅读

【现象截图】

正常的代码格式

格式化后的代码格式

【配置截图】

【诉求】
希望能有大佬仗义援手，帮我解决下这个问题，虽然我可以用ts改写这个，但是我还是想弄明白这个问题出现在哪，感谢！

Answer 1

好像和 "htmlWhitespaceSensitivity": "ignore" 这个有关 .prettierrc 文件中，你可以试试

Answer 2

你在settting.json里面设置了JavaScript的格式化为lonefy.vscode-JS-CSS-HTML-formatter

对于javascript格式化一般多用beautify和prettier。

我使用的是prettier
方法为：
(1)先安装Prettier - Code formatter
(2)然后在setting里面设置

//  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  "prettier.printWidth": 120, // 超过最大值换行
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.requirePragma": false, // 不需要写文件开头的 @prettier
  "prettier.useEditorConfig": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

基本就ok了。