Vue CLI 3开发中屏蔽的EsLint错误 （.eslintrc.js 在vue3+中 修改这个）

一、关闭eslint校验
有了eslint的校验，能够来规范开发人员的代码，是挺好的。可是有些像缩进、空格、空白行之类的规范，在开发过程当中一直报错，未免太过于苛刻了。因此，我仍是会选择关闭eslint校验。 
 
下面就介绍一下vue项目中如何关闭这个校验。 
首先咱们在建立一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，咱们选择no就行了。 
可是若是咱们不当心选择了Y，在开发过程当中一直报错，该怎么办呢？咱们不须要删除项目从新建立，咱们只要修改build\webpack.base.conf.js这个文件就好啦。 

上图红框框部分，我项目中的文件内容是这样的，其余项目可能有别的一些内容，咱们把框框中的内容注释掉或者去掉就能够了。 

 

如今运行项目，就不会报错了。 

二、最后
关闭eslint校验就是这么简单，但愿对你有帮助。 
可是eslint可辅助规范代码风格，有效控制代码质量，而且在多人合做的状况下，也可使代码看起来更加的整洁。因此在开发过程当中，仍是建议保留eslint的校验的，养成一个好的编码习惯。

关闭eslint校验

 

===================================

Vue开发中，特别是当你阅读分析别人的其中早期版本的Vue代码时每每会遭遇到满屏幕的烦人的EsLint错误。有关EsLint这个工具的做用再也不赘述。查阅网上参考文档，大可能是针对早起版本Vue CLI工具项目的，在我最新使用的Vue CLI 3生成的工程中根本不起做用。无奈之下，认真学习了Vue CLI 3官方文档，终于找到最佳答案。

办法

Vue这个前端框架相对于React和Angular，入门会很是快。可是，到了中后期实战阶段仍然有许多工程实际问题须要咱们一块一块地攻克。Vue CLI这个被称为“脚手架”的工具是必须克服的拦路虎，不过，这个工具版本更新很是快。观察网络上的许多案例及手头参考书，即便是最新的，主要是基于2.X版本介绍的。在解决如题所示问题时当前的3.X版本天然与2.X版本大不同。在Vue CLI 3生成的工程中只要在项目根目录下建立一下配置文件vue.config.js，而后在其中加入下面一行便可屏蔽烦人的EsLint各类提示。提示：文后参考资料2中直接提到此种方法。

// vue.config.js

module.exports = {

    lintOnSave: false

}

补充

在网络上搜索到的各类参考中，通常都是提到把文件.eslintrc.js中的各类规则开关进行修改，以下所示：

module.exports = {

  root: true,

  env: {

    node: true

  },

  'extends': [

    'plugin:vue/essential',

    '@vue/standard'

  ],

  rules: {

    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    'no-mixed-spaces-and-tabs': [0,false],

    'no-tabs':'on',

    'eol-last':0,

    'space-before-function-paren': 0

  },

  parserOptions: {

    parser: 'babel-eslint'

  }

}

各位请注意上述rules段中的部分，在CLI 3下仅修改这些部分根本不起做用！

另外，通过上面LintOnSave办法的开关控制后，我反复地修改并在WebStorm内置命令行下运行yarn serve从新编译项目，有不少时候感受仍是有点问题，我怀疑是Vue CLI 3中存在必定的BUG所致（我使用的版本是3.0.5），目前最新版本是3.1.1。

参考

1.https://cli.vuejs.org/guide/

2.https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint

做者：holdtom连接：http://www.imooc.com/article/269003#