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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
vue实现购物车选择功能
Jan 10 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
微信小程序登录态控制深入分析
2017/04/12 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
如何提高JDBC的性能
2013/04/30 面试题
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
优秀的计算机专业求职信范文
2013/12/27 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
团员年度个人总结
2015/02/26 职场文书
工作年限证明范本
2015/06/15 职场文书