在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 相关文章推荐
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python性能优化技巧
2015/03/09 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python异常处理例题整理
2019/07/07 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
求职自荐书范文
2013/12/04 职场文书
打架检讨书50字
2014/01/11 职场文书
校园创业策划书
2014/01/14 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers