vscode下的vue文件格式化

我相信基本上每個在vscode上面碼Vue代碼的都會下載Vetur插件用來格式化等操做，今天Vetur更新了0.14.2版本，最近在使用的時候，感受格式化老是出問題，去Vetur上面看了下，發現Vetur的配置作了下面的改動，看到幾個社區都沒有人說明，我就先說下，默認的格式化配置是：

{
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"
}
複製代碼

不須要修改的話就無論他，個人建議是跟着使用默認的格式化工具就行

默認的html格式化工具變爲prettyhtml

下面是原來使用js-beautify-html格式化的配置，如今官方已經不推薦了，我準備跟着變爲prettyhtml

原來的：

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 160,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
複製代碼

新的配置：

"vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      // 單行超過160個長度的時候開始換行顯示各類參數和事件
      "printWidth": 160
    }
  },
複製代碼

關於prettier的設置規則改變

1. 項目的根目錄不能有.prettierrc、.prettierrc.js等配置文件，不然會覆蓋掉vscode上面的配置
2. 新的配置項寫法變化： 原來只能設置全局js的配置的：

"prettier.singleQuote": true,
  "prettier.disableLanguages": [ "vue" ]
複製代碼

能夠設置vue文件裏面的，和js文件不衝突：

// js文件
  "prettier.singleQuote": true,
  "prettier.disableLanguages": [ "vue" ]，
  // vue文件裏面的js
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "proseWrap": "never",
      "printWidth": 130
    }
  },
複製代碼

和html的格式化寫在一塊兒就是：

"vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 160
    },
    "prettier": {
      "singleQuote": true,
      "proseWrap": "never",
      "printWidth": 130
    }
  },
複製代碼

沒什麼技術含量，可是對代碼格式有要求的仍是有不小的幫助的