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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
vue实现树形菜单效果
Mar 19 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
深入浅出了解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
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
Chrome Web App开发小结
2014/09/04 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
php扩展开发入门demo示例
2019/09/23 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue mounted组件的使用
2018/06/18 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python递归函数绘制分形树的方法
2018/06/22 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
python中setuptools的作用是什么
2020/06/19 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
事业单位请假制度
2014/01/13 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
租房安全协议书
2014/08/20 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
工作态度不好检讨书
2015/05/06 职场文书
远程教育学习心得体会
2016/01/23 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript