去掉webpack脚手架构建的vue项目中的eslint检查

水深无声 2022-11-27 05:24 312阅读 0赞

eslint是一个语法格式检测的工具，对于规范开发有好处，培养严格的书写习惯，但是对于新手来说，非常的痛苦，有时候没有语法错误，仅仅是格式中tab,space区分不严格或者少了一个space，多了两个space，就会报错，甚至编译不过，出现警告，很烦人。

相信大家可能都遇到过如下所示的警告：

Unexpected tab character  
    Mixed spaces and tabs  
    Trailing spaces not allowed

在<script></script>中的警告，我们可以通过 注解/\*eslint-disable\*/来解决，但是<template></template>部分的警告就很痛苦，解决办法是有的，就是将eslint不加载。

我们在webpack.base.config.js文件中会注意到这么一段代码：

const createLintingRule = () => ({
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
      }
    })

还有这么一段：

module.exports=\{ module: \{rules: \[...(config.dev.useEslint ? \[createLintingRule()\]:\[\])\]\}\}

根据这句话的意思，我们知道如果有eslint检验，那么createLintingRule()这个方法肯定会执行的，有的是注释这个方法体，有的是注释rules下面的这句代码...(config.dev.useEslint ? \[createLintingRule()\]:\[\])

个人觉着根本在于将config.dev.useEslint这个变量设置为false，根据直观的判断，我们需要找到项目config目录下的index.js文件，然后找到module.exports=\{dev: \{useEslint: true\}\} 这里，然后将true改为false即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

按照这里注解的意思，根本的解决办法也应该是修改这里的变量useEslint，而不是注释其他地方的代码，虽然都可以达到去掉eslint检查的效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20221124/68af988cd6594e299e52e38d947ec012.png