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


Posted in Javascript onFebruary 22, 2018

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",
 }
}

完成收工

至此,配置完成,完整配置如下:

{
 // 强制单引号
 "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 也没支持,官网只给了这个解决方案。

或许之后就支持了呢。

其他插件推荐

  1. Auto Close Tag
  2. Auto Rename Tag
  3. Bracket Pair Colorizer
  4. Code Runner
  5. Document This
  6. EditorConfig
  7. ESLint
  8. gitignore
  9. GitLens
  10. Guides
  11. Import Cost
  12. npm intellisense
  13. Path Autocomplete
  14. Prettier
  15. Settings Sync
  16. TODO Highlight
  17. Vetur
  18. vscode-icons

我就不一一解释了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
vue webpack打包优化操作技巧
Feb 22 #Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 #Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 #Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 #Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 #Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 #Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 #Javascript
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP abstract与interface之间的区别
2013/11/11 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python中的默认参数详解
2015/06/24 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
通过代码实例了解Python异常本质
2020/09/16 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
信息专业本科生个人的自我评价
2013/10/28 职场文书
大学生毕业自我评价范文分享
2013/11/07 职场文书
医药个人求职信范文
2014/01/29 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
大学学习计划书范文
2014/05/02 职场文书
中考标语大全
2014/06/05 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2015年环卫工作总结
2015/04/28 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
python可视化之颜色映射详解
2021/09/15 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技