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 DOM 元素ID就是全局变量
Sep 20 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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缓存类代码(附详细说明)
2011/06/09 PHP
php开发文档 会员收费1期
2012/08/14 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
javascript中Array()数组函数详解
2015/08/23 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python能做什么
2020/06/02 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
微信早安问候语
2015/11/10 职场文书
公司晚会主持词
2019/04/17 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS