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

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

格式化个性化需求：

1. js中 自动去分号
2. js中 双引号变单引号
3. 最大空换行数 是2
4. 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, // 匿名函数后面加空格