[Vue CLI 3] @vue/cli-plugin-eslint 原始碼分析

dailyvuejs發表於2018-09-01
VuePluginEsLint原始碼

熟悉 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 的配置：

1、預設是：

lintOnSave: true

2、支援下面幾個備選值：

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 分為如下幾個：

1、extensions

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

2、cache

Operate only on changed files (default: false).

3、cacheIdentifier

4、emitWarning

預設 false，Loader will always return warnings if option is set to true.

5、emitError

預設 false，Loader will always return errors if this option is set to true.

6、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")

相關文章