[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の構成:
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.Webpackで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")