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 相关文章推荐
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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和ACCESS写聊天室(七)
2006/10/09 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python中property函数用法实例分析
2018/06/04 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
数学专业推荐信范文
2013/11/21 职场文书
中考冲刺决心书
2014/03/11 职场文书
员工保密承诺书
2014/05/28 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
公司庆典主持词
2015/07/04 职场文书
2015中学教学工作总结
2015/07/22 职场文书
三年级作文之小小梦想
2019/12/06 职场文书