详解Vue取消eslint语法限制


Posted in Javascript onAugust 04, 2018

由于vue对语法的限制过于严格,以至于在我第一次编译运行的时候一直编译失败,当然也包括一些警告:

➜ my-project npm run dev 
 
> bblee-app@1.0.0 dev /Users/bianlifeng/my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 
 95% emitting                                      
 
 WARNING Compiled with 1 warnings                                                               5:00:12 PM
 
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 0 spaces but found 2  
 src/components/Message.vue:46:1
  export default {
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 2 spaces but found 4  
 src/components/Message.vue:47:1
   data() {
  ^
 
 ✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses   
 src/components/Message.vue:47:9
   data() {
      ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 4 spaces but found 6  
 src/components/Message.vue:48:1
    return {
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 6 spaces but found 8  
 src/components/Message.vue:49:1
     form: {
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:50:1
      name: '',
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:51:1
      region: '',
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:52:1
      date1: '',
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:53:1
      date2: '',
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:54:1
      delivery: false,
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:55:1
      type: [],
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:56:1
      resource: '',
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 8 spaces but found 10 
 src/components/Message.vue:57:1
      desc: ''
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 6 spaces but found 8  
 src/components/Message.vue:58:1
     }
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 4 spaces but found 6  
 src/components/Message.vue:59:1
    }
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 2 spaces but found 4  
 src/components/Message.vue:60:1
   },
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 2 spaces but found 4  
 src/components/Message.vue:61:1
   methods: {
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 4 spaces but found 6  
 src/components/Message.vue:62:1
    onSubmit() {
  ^
 
 ✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses   
 src/components/Message.vue:62:15
    onSubmit() {
         ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 6 spaces but found 8  
 src/components/Message.vue:63:1
     console.log('submit!');
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 4 spaces but found 6  
 src/components/Message.vue:64:1
    }
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 2 spaces but found 4  
 src/components/Message.vue:65:1
   }
  ^
 
 ✘ http://eslint.org/docs/rules/indent            Expected indentation of 0 spaces but found 2  
 src/components/Message.vue:66:1
  }
  ^
 
 
✘ 23 problems (23 errors, 0 warnings)
 
 
Errors:
 21 http://eslint.org/docs/rules/indent
  2 http://eslint.org/docs/rules/space-before-function-paren
 
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

当然,这里的警告我是知道怎么回事,但是这个错误我就很不明白了,原来eslint是一个语法检查工具,但是限制很严格,在我的vue文件里面很多空格都会导致红线(红线可以关闭提示),虽然可以关闭,但是在编译的时候老是会跳出来,所以能关闭是最好的了。

关闭方法:

在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则

module: {
 rules: [
  //...(config.dev.useEslint ? [createLintingRule()] : []), // 注释或者删除
  {
   test: /\.vue$/,
   loader: 'vue-loader',
   options: vueLoaderConfig
  },
  ...
  }
 ]
}

然后重新运行一下npm run dev或者构建命令 npm run build就可以啦。

Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
javascript闭包入门示例
Apr 30 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vuex存值与取值的实例
Nov 06 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 #Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 #Javascript
webpack4.x开发环境配置详解
Aug 04 #Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 #Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 #Javascript
mpvue跳转页面及注意事项
Aug 03 #Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 #Javascript
You might like
浅谈php扩展imagick
2014/06/02 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python实现的购物车功能示例
2018/02/11 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
生产厂厂长岗位职责
2013/12/25 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
个人函授自我鉴定
2014/03/25 职场文书
母亲节演讲稿
2014/05/27 职场文书
委托书的写法
2014/09/16 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
业务员管理制度范本
2015/08/06 职场文书
生产设备维护保养制度
2015/08/06 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS