在vscode中vue编码风格统一的方法介绍

不言

发布时间：2018-06-29 13:52:14

2714人浏览过

来源于php中文网

原创

本篇文章主要介绍了在vscode中统一vue编码风格的方法，内容挺不错的，现在分享给大家，也给大家做个参考。

vetur 很多人知道，但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼，代码风格无法统一。

所以不少人直接拆分开，然后在 .vue 中引入，虽然方法很好，但这有违 .vue 单文件组件的初衷。

本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格。

vetur 插件

立即学习“前端免费学习笔记（深入）”；

vetur 经过多个版本迭代，算是目前 vscode 下最好用的 vue 插件了，甚至支持 ts, webpack alias 等特性。

但有几个功能不是直接支持，需要手动配置，而且有几个功能需要其他插件配置后才能配合他完成。

这就有点麻烦了，新手同学们往往就是死在这里。

1. 配置 eslint

prettier 覆盖 vscode 默认格式化快捷键，但没有针对 eslint 配置进行格式化，所以需要单独配置用户设置开启。

找到首选项 -> 设置菜单，在右侧用户配置中添加 "prettier.eslintIntegration": true 开启 eslint 支持。

至此，可以对 js 文件采用 eslint 规范进行格式化了，但 .vue 文件还不行，因为他不认识这是个什么东西。

在用户设置中添加如下配置，以支持 .vue 文件。

"eslint.validate": [
 "javascript",
 "javascriptreact",
 {
  "language": "vue",
  "autoFix": true
 }
]

现在 eslint 认识 vue 了，但这只是 eslint 认识，prettier 依然不认识这是什么东西。

所以我们要加上 "eslint.autoFixOnSave": true 配置，在保存文件时，自动fix里面的js代码。

2. 配置 prettier

虽然 eslint 可以处理 vue 文件了，但却跟 prettier 的格式化冲突，因为 prettier 不知道这是什么东西。

安装了 vetur 插件后，prettier 知道 .vue 原来是一个 html 格式文件的，但依然没办法很好的格式化。

PS：目前 vetur 不支持 prettier 的 eslint。

因为 html 包括了 html+script+style 3部分，prettier 只能采用默认的格式化规范去格式化，不支持eslint，而且默认也不格式化 html。

刚才开启的 "prettier.eslintIntegration": true 只是针对 .js 文件的，而不是针对 .vue 文件。

所以当你格式化 .vue 文件时候，stript 部分可能会跟你的 eslint 风格不一致，你需要单独配置。

例如我的eslint 规范，字符串单引号，对象末尾项也有逗号。

// 强制单引号
"prettier.singleQuote": true,
// 尾随逗号
"prettier.trailingComma": "all",

如果你是双引号，而且不加末尾逗号的，就不必配置了。

或者你觉得无伤大雅，也不用配置这个，反正保存时 eslint 自动fix了。

3. 配置 vetur 对 html 的格式化

因为 vetur 就是把 .vue 中的 html+script+style 3部分拆分，然后交给对应的语言处理器去处理。

例如:

html 可以是 html，也可以是 pug, jade 等。

script 可以是 es5, es6, ts, coffee。

style 可以是 css, less, sass, postcss 等。

除了 html 部分，其他都默认采用 prettier 格式化。

如果需要 html 的格式化，则需手动配置。

// 使用 js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  // 属性强制折行对齐
  "wrap_attributes": "force-aligned",
 }
}

完成收工

至此，配置完成，完整配置如下：

MyCOM企业网站管理系统 1.0 Build080926 alpha

MyCOM是一套免费开源的PHP企业网站系统；前后台模板分离，全标签调用，UTF-8编码，中英繁多语言；MyCOM可以帮你快速打造功能强大、风格自定义的企业网站。基本模块：1，公司基本信息介绍2，新闻系统3，带订购的产品模块4，招聘系统5，需要审核的留言系统6，会员功能7，自定义页面中、英、繁真正多语言系统：各语言版本内容需要独立管理；英文版页面的只会调用英文的内容；以添加一个产品为例，只添加中文

下载

{
 // 强制单引号
 "prettier.singleQuote": true,
 // 尽可能控制尾随逗号的打印
 "prettier.trailingComma": "all",
 // 开启 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存时自动fix
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // 使用插件格式化 html
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 格式化插件的配置
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 属性强制折行对齐
   "wrap_attributes": "force-aligned",
  }
 }
}

现在你可以在 .vue 中格式化 html+js+css 了。

但 js 部分格式化不是根据 eslint 格式化的，上面有解释。

js 部分只能采用 prettier 默认格式，然后保存的时候自动 fix，来达到 prettier+eslint 的效果。

如果需要详细配置，可以访问 vetur 官方文档 https://vuejs.github.io/vetur

小结

主要解决了 prettier 不格式化 .vue 内的 js 问题，以及 prettier 格式化时跟 eslint 自动 fix 风格冲突问题。

当然，prettier格式化和 eslint的fix 有本质区别，但 prettier + 自动fix，就完美了。

对于 .js 来说，prettier 开启 eslint 支持，直接完美。

但 .vue 只能这样配置了，因为目前 vetur 也没支持，官网只给了这个解决方案。

或许之后就支持了呢。

其他插件推荐