我相信基本上每一个在 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
- }
- },
没什么技术含量, 但是对代码格式有要求的还是有不小的帮助的
来源: http://www.jianshu.com/p/1ea481f37886