脚本宝典收集整理的这篇文章主要介绍了

[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.chainWebpack 来设置 webpackConfig

api.chainWebpack(webpackConfig => {
})

所以开始的设置 rule 为 eslint,然后设置:preexclude

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

这里 add2 个:

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

然后设置 test

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

再设置 useloader

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过