VSCode使用之Vue工程配置eslint


Posted in Javascript onApril 30, 2019

首先确保VS Code 安装了 Vetur 和 Eslint 插件。

然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint。

vue init webpack-simple test-vscode

配置过程

全局安装最新的eslint

npm i -g eslint@latest

运行

eslint --init

VSCode使用之Vue工程配置eslint

会安装以下依赖

eslint-config-standard@latest
eslint-plugin-import@>=2.2.0
eslint-plugin-node@>=5.2.1
eslint-plugin-promise@>=3.5.0
eslint-plugin-standard@>=3.0.0

同时在项目目录下生成.eslintrc.js文件。里面只有最基本的内容:

module.exports = {
 "extends": "standard"
};

表明我们使用的规则是standard规范所定义的规则。

然后本地安装最新的eslint

npm i -D eslint@latest

package.jsonscripts中添加一行:

"lint": "eslint --ext .js,.vue src"

运行:

npm run lint

VS Code会提示我们找不到eslint-config-standard

VSCode使用之Vue工程配置eslint

安装它:

npm i -D eslint-config-standard

然后运行

npm run lint

这时就会有报错的提示了。

VSCode使用之Vue工程配置eslint

VSCode使用之Vue工程配置eslint 

4. 但是在.vue文件中出错的地方并没有相应的提示。这时Vetur排上用场了。 在VS Code的设置里面添加如下规则:

{
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
   "autoFix": true
  }
 ]
}

这样就添加了对.vue文件的支持。

5. 但是这样会对.vue文件中的标签报解析错误

VSCode使用之Vue工程配置eslint 

这时需要安装eslint-plugin-vue@next插件。

npm install -D eslint-plugin-vue@next

同时在.eslintrc.js中添加使用vue插件的扩展。

// .eslintrc.js
module.exports = {
 "extends": [
   "standard",
   "plugin:vue/base"
  ]
}

这样,就可以对.vue文件提供实时检查的功能了。

6. 对于多余的逗号这种错误,可以在保存的时候让eslint插件自动修复。 更改VS Code中的设置,添加如下规则:

{
 "eslint.autoFixOnSave": true
}

总结

通过使用VS Code的插件 Vetur 、ESLint来对Vue工程中的.vue提供代码检查的功能。

1. 需要安装的依赖:
json

"eslint": "^4.14.0", 
"eslint-config-standard": "^11.0.0-beta.0", 
"eslint-plugin-import": "^2.8.0", 
"eslint-plugin-node": "^5.2.1", 
"eslint-plugin-promise": "^3.6.0", 
"eslint-plugin-standard": "^3.0.1", 
"eslint-plugin-vue": "^4.0.0-beta.4",

注意: 这里 ESLinteslint-plugin-vue需要是最新的。

2. .eslintrc的配置
js

module.exports = { 
"extends": [ 
"standard", 
"plugin:vue/base" 
] 
};

3. VS Code 的配置
json

{ 
"eslint.validate": [ 
"javascript", 
"javascriptreact", 
{ 
"language": "vue", 
"autoFix": true 
} 
], 
"eslint.autoFixOnSave": true 
}

参考资料:
Vetur文档
ESLint文档
eslint-plugin-vue

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 类型转换方法
Oct 24 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
href下载文件根据id取url并下载
May 28 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
Javascript中的async awai的用法
May 17 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
微信小程序API—获取定位的详解
Apr 30 #Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 #Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 #Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 #Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 #Javascript
TypeScript开发Node.js程序的方法
Apr 30 #Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 #Javascript
You might like
php的控制语句
2006/10/09 PHP
PHP完整的日历类(CLASS)
2006/11/27 PHP
一些PHP写的小东西
2006/12/06 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
vue实现信息管理系统
2020/05/30 Javascript
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
详解Python 解压缩文件
2019/04/09 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
servlet面试题
2012/08/20 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
喝酒检查书范文
2014/02/23 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
毕业寄语大全
2014/04/09 职场文书
建议书的格式
2014/05/12 职场文书
研究生求职自荐书
2014/06/23 职场文书
全国助残日活动总结
2015/05/11 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
青岛市的收音机研制与生产
2022/04/07 无线电
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS