vue cli3.0 引入eslint 结合vscode使用


Posted in Javascript onMay 27, 2019

它的目标是提供一个插件化的javascript代码检测工具。官网地址

最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况。所以引入 eslint 做代码检测

第一步 (安装)

npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入关于 eslint 的一些依赖 当你的 package.json 里出现

"eslint": "^5.16.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-vue": "^5.2.2",

说明安装成功

第二步(检测)

package.json 文件的命令行 sctipts 里面添加

"lint": "eslint --ext .js,.vue src" 批量检测代码

vue cli3.0 引入eslint 结合vscode使用 

Example:

vue cli3.0 引入eslint 结合vscode使用

运行

npm run lint

vue cli3.0 引入eslint 结合vscode使用

面板会提示有xx个错误,而且会标明哪个文件。

而且会提示你是用 --fix 进行修复

第三部(修复)

上面的 "lint": "eslint --ext .js,.vue src" 修改为 eslint --ext .js,.vue src --fix

运行

npm run lint

vue cli3.0 引入eslint 结合vscode使用 

这是就没有 errorswarning

至此 eslint 已经引入,并且可以自动修复。但是 --fix 并不能完全修复代码,比如

vue cli3.0 引入eslint 结合vscode使用

就会提示 'vm'被定义但是未被使用

vue cli3.0 引入eslint 结合vscode使用

就需要手动删掉

配合 vscode 使用

目的: 使用vscode到达保存就自动fix的效果

1.安装

下载地址

2.安装 eslint

vue cli3.0 引入eslint 结合vscode使用 

3.设置 eslint

打开 文件-》首选项-》设置,找到并打开 setting.json 添加如下配置

{
 "eslint.enable": true, // 是否开启检测
 "editor.tabSize": 2,
 "eslint.autoFixOnSave": true,
 "files.associations": {
 "*.vue": "vue"
 },
 "eslint.options": {
 "extensions": [
  ".js",
  ".vue"
 ]
 },
 "eslint.validate": [
 "javascript",{
  "language": "vue",
  "autoFix": true
 },
 "html",
 "vue"
 ],
}

4.安装 Vetur 插件

Vetur 能够在 vscode1 编辑器里面识别 .vue 文件并且对文件可以:

  1. 语法高亮
  2. 语法提示,补全功能
  3. 语法检测

5.配置完成

这个时候就会有提示

vue cli3.0 引入eslint 结合vscode使用

ctrl+s 就自动修复了

vue cli3.0 引入eslint 结合vscode使用

tips: 有时按一次 ctrl+s 修复不了,多按几次就好了,不过我一般写一段就 ctrl+s 一下,问题不大。

Javascript 相关文章推荐
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
深入浅出了解Node.js Streams
May 27 #Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 #Javascript
vue项目前端错误收集之sentry教程详解
May 27 #Javascript
了解javascript中变量及函数的提升
May 27 #Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
初学node.js中实现删除用户路由
May 27 #Javascript
You might like
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
js给selected添加options的方法
2015/05/06 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
常用的javascript设计模式
2017/01/11 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
企业安全生产承诺书
2014/05/22 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python