在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下拉框内容左右移动效果的具体实现
Jul 10 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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若干单维数组遍历方法的比较
2011/09/20 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
sails框架的学习指南
2014/12/22 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
js canvas实现五子棋小游戏
2021/01/22 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python输出各行命令详解
2018/02/01 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
幼儿教师演讲稿
2014/05/06 职场文书
三方合作意向书范本
2015/05/09 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL