vscode 配置vue+vetur+eslint+prettier自动格式化功能


Posted in Javascript onMarch 23, 2020

该配置用于vue开发,最终效果是保存时自动根据eslint对js、html和css代码进行格式化。

vscode Vetur插件

Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上。

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

vscode ESlint插件

Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作。

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

基于vue-cli创建的项目 以下相关步骤需要注意:

创建的时候把Linter/Formatter选上(默认已选上)

vscode 配置vue+vetur+eslint+prettier自动格式化功能

下一步选择Eslint+Prettier

vscode 配置vue+vetur+eslint+prettier自动格式化功能

下一步选择Lint on save (在编辑保存之后根据对代码格式进行检测)

vscode 配置vue+vetur+eslint+prettier自动格式化功能

下一步选择In dedicated config files(将eslint和prettier的配置抽离到独立的文件中)

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

创建完在package.json里面可看到和eslint与prettier相关的依赖

vscode 配置vue+vetur+eslint+prettier自动格式化功能

在.eslintrc.js可以看到总体的eslint规则合并了vue、eslint和prettier的一些插件库进行语法分析(eslint针对js,vue、prettier针对js、html和css,这里eslint和prettier的一些冲突已经处理)

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

到这一步,编译的时候就能看到eslint报错和警告了,但是还不能实现保存自动格式化功能。

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

在文件根目录下创建.prettierrc对prettier格式化进行自定义规则设置,以下为我添加的规则

{
 /* 单引号包含字符串 */
 "singleQuote": true,
 /* 不添加末尾分号 */
 "semi": false,
 /* 在对象属性添加空格 */
 "bracketSpacing": true,
 /* 优化html闭合标签不换行的问题 */
 "htmlWhitespaceSensitivity": "ignore"
}

在用户设置添加自定义设置

mac中的位置

vscode 配置vue+vetur+eslint+prettier自动格式化功能

根据需要选择全局(User)或者工程(Workspace)的配置,点击右上角的编辑按钮,打开settings.json文件

vscode 配置vue+vetur+eslint+prettier自动格式化功能

添加以下配置,使编辑器在保存时自动eslint规则格式化

"editor.codeActionsOnSave": {
 "source.fixAll": true
},
/* 关闭编辑器自带保存格式化功能,此功能会用Vetur进行格式化。*/
"editor.formatOnSave": false

这是我自己的自定义配置

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

非vue-cli创建的项目

单独引入以下红框中的几个依赖

vscode 配置vue+vetur+eslint+prettier自动格式化功能

添加vscode Vetur和ESlint, .eslintrc.js、.prettierrc 和 settings.json的内容和上面一样,这样就可以实现保存自动根据eslint进行格式化了。

总结

引入eslint、vue和prettier的一些相关的依赖

@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier
  • 安装vscode Vetur和ESlint插件
  • 配置.eslintrc.js文件
  • 配置.prettierrc文件
  • 配置.settings.json文件

到此这篇关于vscode 配置vue+vetur+eslint+prettier自动格式化功能的文章就介绍到这了,更多相关vscode vue vetur eslint prettier内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
jQuery 创建Dom元素
May 07 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 #Javascript
详解webpack-dev-middleware 源码解读
Mar 23 #Javascript
vscode调试node.js的实现方法
Mar 22 #Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 #Javascript
Vue-cli3多页面配置详解
Mar 22 #Javascript
redux处理异步action解决方案
Mar 22 #Javascript
You might like
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
表格 隔行换色升级版
2009/11/07 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python 实现插入排序算法
2012/06/05 Python
python:socket传输大文件示例
2017/01/18 Python
使用Python绘制图表大全总结
2017/02/11 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
英语演讲稿范文
2014/01/03 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书