当前位置:   article > 正文

【编码效率】VS Code配置 JavaScript、HTML 自动化格式_vscode javascript 格式化

vscode javascript 格式化

目录

插件准备

标准格式配置


插件准备

  1. ESlint检查javascript语法检查和代码规范
  2. Prettier - Code formatter 各种代码格式化

标准格式配置

设置Settings → 插件Extensions → JOSN → Edit in settings.json

 输入以下配置代码,即可完成配置。代码源于:VS Code配置自动格式化,统一代码规范

 (我学习用 VS Code 写前端没几天,所以一开始没找到代码填入的位置,所以就在这篇文章的基础上加上了具体的位置,希望给和我一样的新手菜鸟们帮助。)

  1. {
  2. // 使用vscode-icons主题
  3. "workbench.iconTheme": "vscode-icons",
  4. // 每次保存的时候将代码按格式进行修复
  5. "editor.formatOnSave": true,
  6. "editor.codeActionsOnSave": {
  7. "source.fixAll": true
  8. },
  9. "eslint.validate": ["javascript", "javascriptreact", "vue"],
  10. "[javascript]": {
  11. "editor.defaultFormatter": "esbenp.prettier-vscode"
  12. },
  13. "[vue]": {
  14. "editor.defaultFormatter": "octref.vetur"
  15. },
  16. "[jsonc]": {
  17. "editor.defaultFormatter": "esbenp.prettier-vscode"
  18. },
  19. "[html]": {
  20. "editor.defaultFormatter": "esbenp.prettier-vscode"
  21. },
  22. "[css]": {
  23. "editor.defaultFormatter": "esbenp.prettier-vscode"
  24. },
  25. // 默认使用prettier格式化支持的文件
  26. "vetur.format.defaultFormatter.js": "prettier",
  27. "vetur.format.defaultFormatter.html": "prettyhtml",
  28. "vetur.format.defaultFormatterOptions": {
  29. "prettier": {
  30. // 结尾无分号
  31. "semi": false,
  32. // 超过140个字符换行
  33. "printWidth": 140,
  34. // 使用单引号
  35. "singleQuote": true,
  36. // 无尾随逗号
  37. "trailingComma": "none",
  38. // 箭头函数单个参数不加分号
  39. "arrowParens": "avoid"
  40. },
  41. "prettyhtml": {
  42. "printWidth": 140
  43. }
  44. },
  45. // 同上prettier格式化代码
  46. "prettier.semi": false,
  47. "prettier.printWidth": 140,
  48. "prettier.trailingComma": "none",
  49. "prettier.singleQuote": true,
  50. "prettier.arrowParens": "avoid",
  51. "files.associations": {
  52. "*.cjson": "jsonc",
  53. "*.wxss": "css",
  54. "*.wxs": "javascript"
  55. },
  56. // 指定wxml的格式化
  57. "minapp-vscode.wxmlFormatter": "prettyHtml",
  58. "minapp-vscode.disableAutoConfig": true,
  59. "json.schemas": [
  60. ]
  61. }

最后实现效果:

编码时,变量之间空格,排版等问题没有注意:

Ctrl+S 保存后,代码会自动调整为:

  • javascript细节调整

    • 结尾无分号
    • 超过140个字符换行
    • 使用单引号
    • 无尾随逗号
    • 箭头函数单个参数不加分号
    • 函数声明时禁止圆括号前有空格
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/863163
推荐阅读
相关标签
  

闽ICP备14008679号