vue+eslint+vscode配置教程


Posted in Javascript onAugust 09, 2019

package.json文件所需要的eslint包

"scripts": {
  "lint": "eslint --ext .js,.vue src",
 },
"devDependencies": {
  "babel-eslint": "^8.2.1",
  "eslint": "^4.15.0",
  "eslint-config-airbnb-base": "^11.3.0",
  "eslint-config-standard": "^13.0.1",
  "eslint-friendly-formatter": "^3.0.0",
  "eslint-import-resolver-webpack": "^0.8.3",
  "eslint-loader": "^1.7.1",
  "eslint-plugin-html": "^4.0.0",
  "eslint-plugin-import": "^2.7.0",
  "eslint-plugin-node": "^9.1.0",
  "eslint-plugin-promise": "^4.2.1",
  "eslint-plugin-standard": "^4.0.0",
  "eslint-plugin-vue": "^5.0.0-beta.6",
  }

执行npm install安装好这些依赖包

在项目中添加两个文件

.eslintrc.js
module.exports = {
 "extends": [
  // "standard",
  "plugin:vue/base"
 ],
 "env": {
  "browser": true,
  "commonjs": true,
  "es6": true
 },
 "parser": "babel-eslint",// 使用babel进行编译,解决import报错:error Parsing error: Unexpected token import
 "plugins": [
  "html"
 ],//插件,此插件用于识别文件中的js代码,没有MIME类型标识没有script标签也可以识别到,因此拿来识别.vue文件中的js代码
 // "extends": "eslint:recommended",//eslint默认推荐规则这里作了注释,使用我们定义的规则
 "parserOptions": {
  "sourceType": "module",
  "ecmaVersion": 7,
 },
"rules": {
   //这里自定义规则,规则地址:
   //http://eslint.cn/docs/rules/
 }
}
.eslintignore

自行配置eslint检查时所忽略的文件

vue+eslint+vscode配置教程

完成后在目录中的结果

vue+eslint+vscode配置教程

vscode+eslint配置

我这里是使用vscode进行检查因此还需配置vscode与eslint插件

在vscode中下载并且安装eslint插件

vue+eslint+vscode配置教程

打开vscode的Perferences->settings 

vue+eslint+vscode配置教程

点击右上角的{}进入settings.json页面

{
  "explorer.confirmDelete": false,
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true, //保存自动修复eslint错误
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": { //指定eslint配置文件位置
    "configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件
  },
  "files.autoSave": "off",
}

结束

最后终于可以愉快地配置你们项目中所需要的eslint规则啦!

总结

以上所述是小编给大家介绍的vue+eslint+vscode配置教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
一个手写的vue放大镜效果
Aug 09 #Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 #Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 #Javascript
小程序Request的另类用法详解
Aug 09 #Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 #Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 #Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 #Javascript
You might like
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
详解php协程知识点
2018/09/21 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
js实现本地时间同步功能
2017/08/26 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
英语简历自我评价
2014/01/26 职场文书
自荐信的基本格式
2014/02/22 职场文书
劳资协议书范本
2014/04/23 职场文书
社团活动总结模板
2014/06/30 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
公积金具结保证书
2015/05/11 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android