在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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
浅谈js原生拖放
Nov 21 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
react build 后打包发布总结
Aug 24 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
原生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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php去除重复字的实现代码
2011/09/16 PHP
php实现RSA加密类实例
2015/03/26 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Python单例模式实例分析
2015/01/14 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python实现截屏的函数
2015/07/26 Python
python脚本监控docker容器
2016/04/27 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python enumerate内置库用法解析
2020/02/24 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
幼儿园保育员辞职信
2014/01/12 职场文书
开会迟到检讨书
2014/02/03 职场文书
银行服务感言
2014/03/01 职场文书
英语系本科生求职信
2014/07/15 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
材料员岗位职责
2015/02/10 职场文书
单位接收证明格式
2015/06/18 职场文书
趣味运动会赞词
2015/07/22 职场文书
2019年亲子运动会口号
2019/10/11 职场文书