在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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
angular.js实现购物车功能
Oct 23 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 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
php仿ZOL分页类代码
2008/10/02 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php购物车实现方法
2015/01/03 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python转码问题的解决方法
2008/10/07 Python
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python字典的常用操作方法小结
2016/05/16 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
我爱读书演讲稿
2014/05/07 职场文书
2014年建筑工作总结
2014/11/26 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Python实现位图分割的效果
2021/11/20 Python