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
    }
  },
复制代码

没什么技术含量，可是对代码格式有要求的仍是有不小的帮助的