在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的商品展示放大镜
Aug 07 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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&mysql(四)
2006/10/09 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
Javascript中的Array数组对象详谈
2014/03/03 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
网站推广策划方案
2014/06/04 职场文书
上课不认真检讨书
2014/09/17 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android