在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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
新手入门常用代码集锦
Jan 11 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
vue引用外部JS的两种种方法
Jan 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
UCenter Home二次开发指南
2009/05/28 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Vue程序调试的方法
2019/06/17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python数组过滤实现方法
2015/07/27 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python如何实现机器人聊天
2020/09/10 Python
Django框架请求生命周期实现原理
2020/11/13 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
关于VPN
2012/06/10 面试题
银行实习生的自我评价
2014/01/13 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
学校消防安全制度
2014/01/30 职场文书
高中生职业规划范文
2014/03/09 职场文书
绿色出行口号
2014/06/18 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技