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, // 匿名函數后面加空格