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 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
用python实现学生管理系统
2020/07/24 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
七一党建活动方案
2014/01/28 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
总经理任命书范本
2014/06/05 职场文书
关于保护环境的建议书
2014/08/26 职场文书
奖励通知
2015/04/22 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫