[Vue CLI 3] @vue/cli-plugin-eslint 源码分析

熟悉 eslint-loader 的同窗通常以下配置：

设置一下几项：

• test : A condition that must be met（通常是处理对应文件的正则）
• exclude : A condition that must not be met（手动添加不须要处理的，通常好比 node_modules）
• loader : An array of paths or files where the imported files will be transformed by the loader（对应 loader 的名字）
• options（可选参数对象）

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          // eslint options (if necessary)
        }
      },
    ],
  },
  // ...
}

固然还能够加上 enforce: "pre"

To be safe, you can use enforce: "pre" section to check source files, not modified by other loaders (like babel-loader)

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
    ],
  },
  // ...
}

咱们看一下 @vue/cli-plugin-eslint 的实现，先用 vue inspect --rule eslint 看一下最终生成的配置：

/* config.module.rule('eslint') */
{
  enforce: 'pre',
  test: /\.(vue|(j|t)sx?)$/,
  exclude: [
    /node_modules/,
    '/Users/***/node_modules/@vue/cli-service/lib'
  ],
  use: [
    /* config.module.rule('eslint').use('eslint-loader') */
    {
      loader: 'eslint-loader',
      options: {
        extensions: [
          '.js',
          '.jsx',
          '.vue'
        ],
        cache: true,
        cacheIdentifier: '65e8f1b4',
        emitWarning: true,
        emitError: false,
        formatter: function () { 
          /* omitted long function */ 
        }
      }
    }
  ]
}

咱们看一下 cli-plugin-eslint/index.js

module.exports = (api, options) => {}

咱们看一下 vue.config.js 的配置：lintOnSave

是否在开发环境下经过 eslint-loader 在每次保存时 lint 代码。

咱们看一下 @vue/cli-service/lib/options.js 的配置：

一、默认是：

lintOnSave: true

二、支持下面几个备选值：

lintOnSave: joi.any().valid([true, false, 'error'])

否则会报错：

ERROR  Invalid options in vue.config.js: child "lintOnSave" fails because ["lintOnSave" must be one of [true, false, error]]

接下来就是经过 api.chainWebpack 来设置 webpackConfig

api.chainWebpack(webpackConfig => {
})

因此开始的设置 rule 为 eslint，而后设置：pre、exclude

webpackConfig.module
        .rule('eslint')
          .pre()
          .exclude
            .add(/node_modules/)
            .add(require('path').dirname(require.resolve('@vue/cli-service')))
            .end()

这里 add 了 2 个：

.add(/node_modules/)
.add(require('path').dirname(require.resolve('@vue/cli-service')))

而后设置 test

.test(/\.(vue|(j|t)sx?)$/)

再设置 use 和 loader

.use('eslint-loader')
    .loader('eslint-loader')
    .options({
    })

这里的 options 分为以下几个：

一、extensions

An array of filename extensions that should be checked for code. The default is an array containing just ".js".

二、cache

Operate only on changed files (default: false).

三、cacheIdentifier

四、emitWarning

默认 false，Loader will always return warnings if option is set to true.

五、emitError

默认 false，Loader will always return errors if this option is set to true.

六、formatter

Loader accepts a function that will have one argument: an array of eslint messages (object). The function must return the output as a string. You can use official eslint formatters.

以前用的比较多的是：

require("eslint-friendly-formatter")