详解Vue取消eslint语法限制

 更新时间:2018年08月04日 16:21:29   作者:我是康小小  
本篇文章给大家分享了Vue取消eslint语法限制的相关知识点内容,有兴趣的朋友们可以参考学习下。

由于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就可以啦。

相关文章

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这篇文章主要介绍了vue-cli webpack模板项目搭建以及打包时路径问题的解决方法,需要的朋友可以参考下
    2018-02-02
  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解

    这篇文章主要介绍了Vue.js进行查询操作的实例详解的相关资料,需要的朋友可以参考下
    2017-08-08
  • vue组件生命周期钩子使用示例详解

    vue组件生命周期钩子使用示例详解

    这篇文章主要为大家介绍了vue组件生命周期钩子使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • Vue3基于husky的代码检查工作流

    Vue3基于husky的代码检查工作流

    husky是一个git hooks工具(git的钩子工具,可以在特定时机执行特定的命令),这篇文章主要介绍了Vue3-基于husky的代码检查工作流,需要的朋友可以参考下
    2023-11-11
  • 在pycharm中开发vue的方法步骤

    在pycharm中开发vue的方法步骤

    这篇文章主要介绍了在pycharm中开发vue的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 关于Vue ui 的没反应、报错问题解决总结

    关于Vue ui 的没反应、报错问题解决总结

    这篇文章主要介绍了关于Vue ui 的没反应、报错问题解决总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue中foreach数组与js中遍历数组的写法说明

    Vue中foreach数组与js中遍历数组的写法说明

    这篇文章主要介绍了Vue中foreach数组与js中遍历数组的写法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • vue-router的钩子函数用法实例分析

    vue-router的钩子函数用法实例分析

    这篇文章主要介绍了vue-router的钩子函数用法,结合实例形式分析了vue路由钩子分类及vue-router钩子函数相关使用技巧,需要的朋友可以参考下
    2019-10-10
  • Vue element-ui中表格过长内容隐藏显示的实现方式

    Vue element-ui中表格过长内容隐藏显示的实现方式

    在Vue项目中,使用ElementUI渲染表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好,下面这篇文章主要给大家介绍了关于Vue element-ui中表格过长内容隐藏显示的实现方式,需要的朋友可以参考下
    2022-09-09
  • Vue实现简单的购物车案例

    Vue实现简单的购物车案例

    这篇文章主要为大家详细介绍了Vue实现简单的购物车案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论