在vscode中统一vue编码风格的方法_vue.js_脚本之家
脚本之家
服务器常用软件
手机版
投稿中心
关注微信
快捷导航
软件下载
android
MAC
驱动下载
字体下载
DLL
源码下载
PHP
ASP.NET
ASP
JSP
软件编程
C#
JAVA
C 语言
Delphi
Android
网络编程
PHP
ASP.NET
ASP
JavaScript
在线工具
CSS格式化
JS格式化
Html转化为Js
数据库
MYSQL
MSSQL
oracle
DB2
MARIADB
CMS
PHPCMS
DEDECMS
帝国CMS
WordPress
常用工具
PHP开发工具
python
Photoshop
必备软件
网站首页
网页制作
网络编程
脚本专栏
脚本下载
数据库
服务器
电子书籍
操作系统
网站运营
平面设计
其它
媒体动画
电脑基础
硬件教程
网络安全
YUI.Ext相关
prototype
jquery
AngularJS
json
lib_js
js面向对象
extjs
Mootools
Seajs
dojo
vue.js
backbone.js
React
其它
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vscode统一vue编码风格
在vscode中统一vue编码风格的方法
更新时间：2018年02月22日 08:48:59 作者：楼教主
本篇文章主要介绍了在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",
完成收工
至此，配置完成，完整配置如下：
// 强制单引号
"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 也没支持，官网只给了这个解决方案。
或许之后就支持了呢。
其他插件推荐
Auto Close Tag
Auto Rename Tag
Bracket Pair Colorizer
Code Runner
Document This
EditorConfig
ESLint
gitignore
GitLens
Guides
Import Cost
npm intellisense
Path Autocomplete
Prettier
Settings Sync
TODO Highlight
Vetur
vscode-icons
我就不一一解释了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vscode下的vue文件格式化问题Vue-cli Eslint在vscode里代码自动格式化的方法vscode配置vue下的es6规范自动格式化详解VScode更新后安装vetur仍无法格式化vue文件的解决
vscode
vue
风格
相关文章
vue中的vue-print-nb如何实现页面打印这篇文章主要介绍了vue中的vue-print-nb如何实现页面打印，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 2022-04-04
vue+echarts实现进度条式柱状图这篇文章主要为大家详细介绍了vue+echarts实现进度条式柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2021-09-09
关于Vue Router的10条高级技巧总结这篇文章主要给大家总结介绍了关于Vue Router的10条高级技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2021-05-05
在Vue组件上动态添加和删除属性方法下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02
如何理解Vue的作用域插槽的实现原理本篇文章主要介绍了如何理解Vue的作用域插槽的实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue+element UI实现树形表格带复选框的示例代码这篇文章主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2019-04-04
详解如何使用webpack打包Vue工程本篇文章主要介绍了详解如何使用webpack打包Vue工程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
浅谈VUE uni-app 开发环境这篇文章主要介绍了uni-app的开发环境，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2021-10-10
详解mpvue开发微信小程序基础知识这篇文章主要介绍了详解mpvue开发微信小程序基础知识,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2019-09-09
Vue-cli assets SubDirectory及PublicPath区别详解这篇文章主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 2020-08-08
最新评论
大家感兴趣的内容
1vue引用js文件的多种方式(推荐)2vue跳转页面的几种方法(推荐)3详解vue 路由跳转四种方式 (带参数)4vue项目刷新当前页面的三种方法5vue之父子组件间通信实例讲解(props、$ref、$em6Vue props用法详解(小结)7vue.js中created方法作用8element-ui中select组件绑定值改变,触发cha9vue实现文件上传功能10简单理解vue中Props属性
最近更新的内容
vue实现单一筛选、删除筛选条件一篇文章带你了解Vue组件的创建和使用Vue组件化通讯的实例代码Vue3.x最小原型系统讲解如何测量vue应用运行时的性能vue按需加载组件webpack require.ensure的方法详解如何从零开始搭建Express+Vue开发环境vue实现多级菜单效果解析Vue.js中的组件vue 表单输入框不支持focus及blur事件的解决方案
常用在线小工具
微信
投稿
脚本任务
在线工具
关注微信公众号
关于我们 -
广告合作 -
联系我们 -
免责声明 -
网站地图 -
投诉建议 -
在线投稿
CopyRight 2006-2022 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有