详解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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
详解javascript数组去重问题
Nov 06 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
深入密码加salt原理的分析
2013/06/06 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
信息专业个人的自我评价
2013/12/27 职场文书
针对吵架老公保证书
2015/05/08 职场文书
合同纠纷调解书
2015/05/20 职场文书
电影雨中的树观后感
2015/06/15 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
python3 hdf5文件 遍历代码
2021/05/19 Python