[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")