在vue中使用eslint,配合vscode的操作


Posted in Javascript onNovember 09, 2020

不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉。

每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正。安装步骤如下:

首先安装eslint插件

在vue中使用eslint,配合vscode的操作

安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

"files.autoSave":"off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    { "language": "vue", "autoFix": true }
   ],
   "eslint.options": {
    "plugins": ["html"]
   }

这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。

补充知识:vscode配置eslint搭配vue脚手架快速实现代码质量化书写

我们在公司使用脚手架的时候可能会使用eslint来实现代码的质量检测,但是真正在书写代码的时候要时刻记住那些 “标准”可能有点难受 比如 结尾不加分号 使用单引号 首行俩个空格缩进等等

这个时候我们可能想 每次书写玩代码保存的时候 它能自动帮我整理成符合标准的代码 那是不是就事半功倍了

没错vscode就有这样的功能

还是和和往常一样 直接上步骤和代码了

1.实现这样的条件 (vue脚手架安装的时候 需要 选中 eslint +prettier 这个选项)

在vscode上安装三个插件 eslint 代码质量检测插件 prettier 规则可以自定义 vetur vue代码高亮

在vue中使用eslint,配合vscode的操作

2.进入 文件=>首选项=>设置=>用户=>扩展=>eslint>在seeting.json文件中编写 加上去下面的代码

"editor.codeActionsOnSave": {     
    "source.fixAll.eslint": true
  }
// 默认用户保存的时候自动 实现eslint代码标准

3.有一个刚安装好的vue脚手架 我的是 @vue/cli 4.0 版本了

在vue中使用eslint,配合vscode的操作

打开 .eslintrc.js文件 在rules 里面加入下面的话 是我们自定义的规则

rules: {
  'prettier/prettier': [
   'error',
   {
    semi: false,  // 结尾分号 false是关闭 true是打开
    singleQuote: true,  // 单引号 true是打开 false是关闭
    printWidth: 160   // 默认代码多少个换行  我这里设置160
   }
  ]
 }

4.运行测试 在我们的怕package.json 文件中的

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"  // 这句话是启动我们的 eslintrc.js 配置文件的命令 默认这句话是有的
 }

我们启动一下 npm run lint 运行成功后

在vue中使用eslint,配合vscode的操作

看了一下 我们 脚手架的入口文件 main.js 是不是所有的 引号都变成了单引号 结尾还没有分号

我们随便修改一下代码 保存 他也会自动帮我们调整成符合eslint标准格式的代码 是不是很舒服 大家快去试试把

以上这篇在vue中使用eslint,配合vscode的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
JSONP跨域请求
Mar 02 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
原生JavaScript实现五子棋游戏
Nov 09 #Javascript
Nuxt的动态路由和参数校验操作
Nov 09 #Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
JS实现炫酷轮播图
Nov 15 #Javascript
JS实现购物车基本功能
Nov 08 #Javascript
Vue实现购物车基本功能
Nov 08 #Javascript
vue实现顶部菜单栏
Nov 08 #Javascript
You might like
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
python调用shell的方法
2013/11/20 Python
python读写json文件的简单实现
2017/04/11 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
运动会方队口号
2014/06/07 职场文书
电气自动化求职信
2014/06/24 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
死亡赔偿协议书
2015/01/28 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
病危通知单
2015/04/17 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
初中语文教师研修日志
2015/11/13 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
MySQL读取JSON转换的方式
2022/03/18 MySQL