详解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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
js友好的时间返回函数
Aug 24 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
探讨php中header的用法详解
2013/06/07 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
PHP7常量数组用法分析
2016/09/26 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python如何判断IP地址合法性
2020/04/05 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
成人教育自我鉴定
2013/11/01 职场文书
情人节寄语大全
2014/04/11 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
7个关于Python的经典基础案例
2021/11/07 Python