在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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
keep-alive保持组件状态的方法
Dec 02 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
菜鸟修复电子管记
2021/03/02 无线电
Yii学习总结之安装配置
2015/02/22 PHP
php制作文本式留言板
2015/03/18 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python统计单词出现的次数
2018/04/04 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
会计工作心得体会
2014/01/13 职场文书
爱情保证书大全
2014/04/29 职场文书
鲁迅故里导游词
2015/02/05 职场文书
护士先进个人总结
2015/02/13 职场文书