vscode 格式化 vue 和 js代码 vetur prettier beautify

HK酋长 lv.1

发布时间：2022-10-18 02:54:18 461

相关标签： # css# less# java# json# 工具

这个文档不涉及eslint 只专注自动格式化

格式化个性化需求：

js中自动去分号
js中双引号变单引号
最大空换行数是2
vue template中属性自动折行

vue 的自动格式化需要用到vetur插件，它可以对vue的 template script css 单独进行设置

settings.json 中

"editor.formatOnSave": true, // 开启后，自动进行格式化，下一步选择哪种文件的哪种格式化工具
"[vue]": {
    "editor.defaultFormatter": "octref.vetur" // vue文件格式化选择 vetur
  },

// vetur 设置
  "vetur.format.enable": true, 
  "vetur.validation.template": true,
  "vetur.validation.script": true,
  "vetur.validation.style": true,
  "vetur.format.options.tabSize": 2, // 每个缩进级别的空格数，由所有格式化程序继承
  "vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
  "vetur.format.defaultFormatter.js": "vscode-typescript", // prettier 会使javascript.format 失效
  "vetur.format.defaultFormatter.html": "js-beautify-html", // 这句是重点 template部分用 beautify设置
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned", // 这句是重点 属性折行对齐方式 
      "wrap_line_length": 120, // 设置一行多少字符换行
      "end_with_newline": false
    }
  },

js-beautify-html 的一个bug,开始是在.jsbeautifyrc 设置的，发现用vetur调用的时候，就得写在他这个设置里面。
vetur这里设置的格式化工具有2个一个是 beautify 还有 prettier
prettier的设置放在了项目根目录的 .prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "parser": "vue-eslint-parser"
}

下面是设置js的格式化，这里只实现了自动去分号用的 vscode.typescript-language-features
beautify 不能自动去分号
prettier 设置semi不起作用不知道为什么

setting.json

"[javascript]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
  }
"javascript.format.semicolons": "remove", // 要设置 vscode.typescript-language-features

还有一些之前设置的 format 就不整理了，贴出来

"javascript.format.enable": true,
  "javascript.format.insertSpaceAfterConstructor": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数名和后面的括号之间加个空格
  "javascript.format.insertSpaceAfterCommaDelimiter": true, // 逗号后面有空格
  "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true, // 运算符前后有空格
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true, // 大括号前面插空格
  "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true, // 关键字后面加空格
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true, // 匿名函数后面加空格

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

文章来源： https://blog.51cto.com/u_15770151/5630302

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。