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

本文详细介绍如何配置eslint-loader进行代码检查,包括设置正则表达式、排除路径、使用预加载及结合其他加载器的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

熟悉 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")
<think>我们面对的问题是:Vue项目中,`@vue/eslint-config-standard@6.1.0`要求`eslint-plugin-vue`的版本为`^7.0.0`,但当前项目中安装的是`eslint-plugin-vue@8.7.1`(或用户提到的是7.20.0?),导致依赖冲突。根据引用信息,npm7以上版本会严格检查peerDependencies,因此需要解决冲突。 解决方案思路: 1. 降级`eslint-plugin-vue`到满足`@vue/eslint-config-standard@6.1.0`要求的版本(即7.x版本)。 2. 升级`@vue/eslint-config-standard`到与`eslint-plugin-vue@8.7.1`兼容的版本(如果存在)。 3. 使用`--force`或`--legacy-peer-deps`忽略冲突(临时解决方案,不推荐,因为可能导致配置不兼容)。 根据引用[2]中的信息,用户之前通过`--force`强制安装了,但可能只是绕过了安装,实际配置可能仍有问题。因此,我们更推荐前两种方法。 步骤: 方法一:降级`eslint-plugin-vue` 1. 将`eslint-plugin-vue`降级到7.x版本,例如7.20.0(因为用户提到7.20.0,但注意7.20.0是否在^7.0.0范围内?是的,因为^7.0.0表示>=7.0.0且<8.0.0)。 2. 执行命令:`npm install eslint-plugin-vue@7.20.0 --save-dev` 方法二:升级`@vue/eslint-config-standard` 我们需要查看`@vue/eslint-config-standard`是否有新版本支持`eslint-plugin-vue@8.x`。根据Vue生态的常见情况,`@vue/eslint-config-standard`的较新版本(例如针对Vue3的版本)可能支持更高版本的插件。但注意,用户的项目可能是Vue2,所以需要确认兼容性。 查询`@vue/eslint-config-standard`的版本信息: - 最新版本是?我们可以通过npm查看,但这里我们假设用户使用的是Vue2项目,所以可能不能直接升级到最新(因为最新可能只支持Vue3)。 - 实际上,`@vue/eslint-config-standard`的版本6.1.0已经是较老的版本(针对Vue2),而Vue3的配置包可能是`@vue/eslint-config-standard@next`或另一个包。 因此,如果项目是Vue2,我们可能只能选择降级插件(方法一)或者寻找一个同时支持Vue2和`eslint-plugin-vue@8.x`的`@vue/eslint-config-standard`版本。但根据npm仓库,`@vue/eslint-config-standard`在6.x版本后似乎没有更新(截至2023年,Vue2的配置包可能不再更新)。因此,对于Vue2项目,建议使用方法一。 如果项目是Vue3,那么应该使用`@vue/eslint-config-standard`的更高版本(如7.x或8.x),这些版本支持`eslint-plugin-vue@8.x`。 因此,我们需要先确定项目是Vue2还是Vue3。 如果用户不确定,可以查看package.json中vue的版本。 步骤总结: 1. 确定Vue版本(Vue2还是Vue3)。 2. 如果是Vue2,则降级`eslint-plugin-vue`到7.x(例如7.20.0)。 3. 如果是Vue3,则升级`@vue/eslint-config-standard`到最新版本(同时确保其他相关配置包也升级到Vue3兼容版本)。 另外,根据引用[1],用户提到在创建自定义项目时脚手架自带了过高的eslint插件版本。因此,如果用户使用的是Vue CLI,可以检查Vue CLI的版本和默认配置。 如果用户不想降级插件,也可以尝试调整ESLint配置,不使用`@vue/eslint-config-standard`,而是手动配置规则,但这可能较为复杂。 具体操作: 情况1:Vue2项目 - 降级`eslint-plugin-vue`:`npm install eslint-plugin-vue@7.20.0 --save-dev` - 然后,确保`package.json`中`eslint-plugin-vue`的版本为`^7.20.0`,并且重新运行安装(删除node_modules和package-lock.json后重新安装,或者直接运行`npm install`) 情况2:Vue3项目 - 升级`@vue/eslint-config-standard`:首先查看最新版本,假设最新版本是8.0.0(支持Vue3eslint-plugin-vue@8.x),则运行: `npm install @vue/eslint-config-standard@latest --save-dev` - 同时,可能需要升级其他相关包,如`eslint`、`@vue/cli-plugin-eslint`等,以确保兼容性。 如果升级`@vue/eslint-config-standard`后仍然有问题,可能需要检查其peerDependencies要求,并安装相应版本的依赖。 注意:在升级或降级后,最好删除node_modules和package-lock.json,然后重新安装依赖。 如果用户不想删除node_modules,可以尝试使用`npm update`,但为了确保干净,删除后重装更可靠。 最后,如果用户暂时不想解决冲突,可以使用`--legacy-peer-deps`来安装,但这只是临时绕过,不推荐。 因此,推荐用户根据项目Vue版本选择方法一或方法二。 根据用户的问题描述,他提到的是`eslint-plugin-vue`版本7.20.0,所以可能是想用7.20.0?但当前安装的是8.7.1。所以问题中他想要解决6.1.0和7.20.0的冲突?这里有点歧义。 重新理解问题:用户说“解决 vue/eslint-config-standard 版本 6.1.0 和 eslint-plugin-vue 版本 7.20.0 的依赖冲突”。注意,7.20.0是在7.x范围内,应该是满足6.1.0的要求的(因为6.1.0要求^7.0.0)。所以为什么会有冲突? 可能的原因: - 用户项目中实际安装的`eslint-plugin-vue`版本是8.7.1(而不是7.20.0),所以冲突。 - 或者,用户想要安装7.20.0,但在安装过程中被其他依赖要求更高的版本。 因此,我们需要明确当前项目中安装的版本。 建议用户检查package.json和node_modules中的实际版本。 操作步骤: 1. 检查当前安装的`eslint-plugin-vue`版本: 在package.json的devDependencies中查看,或者运行:`npm list eslint-plugin-vue` 2. 如果显示的是8.x版本,而我们需要7.20.0,则安装指定版本: `npm install eslint-plugin-vue@7.20.0 --save-dev` 3. 如果安装后仍然报错,可能是因为其他依赖要求`eslint-plugin-vue`的版本为8.x(比如另一个配置包)。这时需要检查冲突的来源。 4. 使用`npm ls eslint-plugin-vue`可以查看依赖树,看是哪个包要求了8.x版本。 5. 如果确实有包要求8.x,那么就需要权衡:要么降级那个包,要么升级`@vue/eslint-config-standard`(如果可能)。 但是,如果用户的项目中只有`@vue/eslint-config-standard@6.1.0`要求7.x,而其他包要求8.x,那么可能需要同时满足两个条件?这很难,因此需要统一版本。 在这种情况下,如果项目是Vue2,那么通常整个生态都是针对Vue2的,所以应该不会有要求8.x的包(因为eslint-plugin-vue@8.x是用于Vue3的)。因此,如果出现了要求8.x的包,可能是用户错误地安装了Vue3的包。 所以,核心还是确定项目是Vue2还是Vue3。 结论:先确定Vue版本,然后根据版本选择解决方案。 如果用户的项目是Vue2,那么应该将`eslint-plugin-vue`降级到7.x,并确保其他包都是针对Vue2的版本。 如果用户的项目是Vue3,那么应该将`@vue/eslint-config-standard`升级到支持Vue3的版本(该版本会要求`eslint-plugin-vue`的8.x版本,因此与当前安装的8.7.1兼容)。 因此,我们建议用户: 1. 查看package.json中`vue`的版本:如果版本是2.x,则是Vue2;如果是3.x,则是Vue3。 2. 根据Vue版本执行: Vue2: - 安装指定版本的eslint-plugin-vue: `npm install eslint-plugin-vue@7.20.0 --save-dev` - 然后运行`npm install`(如果之前有冲突,现在应该解决) Vue3: - 升级`@vue/eslint-config-standard`: 首先查看最新版本,运行`npm view @vue/eslint-config-standard versions`(或者去npm官网查看),然后安装最新版本(例如8.0.0): `npm install @vue/eslint-config-standard@8.0.0 --save-dev` - 注意:升级后,可能需要调整ESLint配置,因为新版本的配置规则可能有变化。 3. 如果升级`@vue/eslint-config-standard`后,它要求其他依赖包(如eslint)的版本,请根据报错信息升级或降级这些包。 4. 如果遇到多个包之间的版本冲突,可以使用`npm ls <package>`来查看依赖树,定位问题。 5. 如果上述方法都不可行,可以考虑使用`--legacy-peer-deps`,但不推荐。 最后,重新运行项目,确保ESLint正常工作。 注意:在更改依赖版本后,可能需要重启IDE(如VSCode)以使ESLint插件重新加载。 根据引用[2]中提到的,用户之前通过`--force`安装,但问题可能未根本解决。因此,我们推荐使用上述版本调整的方法。 如果用户按照上述步骤操作后仍然有问题,可能需要检查ESLint配置文件(.eslintrc.js)中的extends和plugins设置,确保没有手动指定不兼容的版本。 希望这些步骤能帮助用户解决依赖冲突问题。</think>### 解决 ESLint 依赖冲突的方法 您遇到的依赖冲突是由于 `@vue/eslint-config-standard@6.1.0` 要求 `eslint-plugin-vue^7.0.0`,但项目中已安装的 `eslint-plugin-vue@8.7.1` 不符合要求。以下是三种解决方案: --- ### **方案 1:降级 `eslint-plugin-vue`(推荐)** ```bash npm install eslint-plugin-vue@7.20.0 --save-dev --legacy-peer-deps ``` - **原理**:将插件版本降至 `@vue/eslint-config-standard@6.1.0` 兼容的 7.x 范围 - **验证**:检查 `package.json` 中版本是否变为 `"eslint-plugin-vue": "^7.20.0"` - **优势**:兼容 Vue2 项目,无需修改其他配置[^1] --- ### **方案 2:升级 `@vue/eslint-config-standard`(仅限 Vue3 项目)** ```bash npm install @vue/eslint-config-standard@latest --save-dev ``` - **前提**:确认项目使用 Vue3(检查 `package.json` 中 `vue` 版本 ≥ 3.0) - **注意**:新版配置可能引入规则变更,需测试 ESLint 是否正常运行 --- ### **方案 3:强制安装(临时方案)** ```bash npm install --force # 或 --legacy-peer-deps ``` - **作用**:忽略 peerDependency 冲突强制安装 - **风险**:可能导致 ESLint 规则异常(如 Vue2 模板解析错误)[^2] - **适用场景**:临时解决阻塞,仍需长期方案 1 或 2 --- ### **验证步骤** 1. 删除 `node_modules` 和 `package-lock.json` 2. 执行选定方案的命令 3. 重新安装依赖: ```bash npm install ``` 4. 检查冲突是否解决: ```bash npm ls eslint-plugin-vue ``` > **关键提示**:Vue2 项目**强烈推荐方案 1**,因为 `eslint-plugin-vue@8+` 专为 Vue3 设计,在 Vue2 中可能导致解析错误[^1][^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值