vue项目配置eslint+lint-staged+prettier使用中遇到的问题汇总

195 阅读2分钟

之前给团队的项目加了这个配置后,有几位小伙伴在使用中遇到几个问题来找我解决,在这记录一下。

下面这四个问题比较典型,分享出来给大家避坑,好多问题其实都差不多,可以参考下面的解决方案

问题一

执行 git commit 操作后,报错。

报错代码示例

error Resolve error: unable to load resolver "node"     import/no-duplicates

或者下面这种错误:

1705315050176.jpg

报错原因

eslint升级不完全造成的

解决方案

需要升级依赖插件eslint-plugin-import,执行下面命令:

npm i eslint-plugin-import@latest

问题二

报错代码示例

1705315417558.jpg

1705315514405.jpg

报错原因

本地项目的node版本和 lint-staged版本不匹配的问题。

解决方案

  • 方案一:降低lint-staged版本(推荐)  @13.12.0 ---> @10.2.0
  • 方案二:提高node版本   ^16.x.x

lint-staged的较高版本需要匹配node的高版本,如果本地项目运行的node环境是低版本的话,降低lint-staged版本即可,方案一推荐的版本仅供参考(我的项目是用的这个版本)

问题三

报错代码示例

1705315909920.jpg

1705315981235.jpg

报错原因

是eslint版本的问题导致的

解决方案

将eslint版本切换为7.32.0即可解决

这个版本目前是针对团队内小伙伴所负责项目对应的版本,如果你也遇到这个问题了,可以先尝试这个版本,若无法解决,可以尝试切换别的eslint版本试试。

问题四

报错代码示例

image.png

报错原因

node版本不匹配导致的,这里有个小细节,一个小伙伴在项目中加了一个.nvmrc文件,该文件内配置的node版本是v12.x.x的,本地切换到别的node版本,运行这个项目后,执行的node环境版本其实还是v12.x.x, 至于他为啥要加这个文件,不是本文的重点,就不多说了。

解决方案

切换node版本到v14.x.x