VScode js 格式化异常

你好_百度
  • 20

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

【现象截图】

正常的代码格式

image.png

格式化后的代码格式

image.png

【配置截图】
image.png
image.png

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

回复
阅读 1.5k
2 个回答

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

你在settting.json里面设置了JavaScript的格式化为lonefy.vscode-JS-CSS-HTML-formatter
image.png
对于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了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏