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 相关文章推荐
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
Vue实现简易计算器
2020/02/25 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
大学生活动策划方案
2014/02/10 职场文书
国培教师自我鉴定
2014/02/12 职场文书
红色故事演讲稿
2014/05/22 职场文书
机械工程师岗位职责
2014/06/16 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
大国崛起观后感
2015/06/02 职场文书
行为规范主题班会
2015/08/13 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android