@umijs/fabric 踩坑记录(使用@umijs/fabric配置react项目的eslint)

8,783 阅读3分钟

最近使用umijs搭建了个react项目, 但发现eslint相关配置并没有起作用,通过查看项目发现使用的是 @umijs/fabric 组件库对eslint进行配置的。经过查阅相关资料以及分析源码,现将踩坑记录如下:

PS:使用umijs创建项目的过程这里不再累赘,有兴趣的可以参考 umijs 以及 Ant Design Pro

一. .eslintrc.js 文件在IDE(本人使用的webstorm)中提示eslint配置错误:

刚开始摸不到头脑,不知道错误原因在哪,通过配置文件 extends 的地址(@umijs/fabric/dist/eslint) 找到源码后也没有发现问题在哪,后来在网上找到一个解决方法:

就是在项目的 tsconfig.json 文件中加入 "include" 配置项。(实际配置内容请根据自己的项目目录结构进行条调整)。 OK,该问题解决。

二. prettier 项目配置不起作用

首先咱先来看下新建的项目生成的 .prettierrc.js 配置文件的内容:

就这几行简单的代码, 看的我一脸懵。。。 然后我就去项目的 node_modules 下去找 fabric.prettier 到底是个什么东东,于是我最终找到了如下代码:

"use strict";
/** @format */
module.exports = {
    singleQuote: true,
    trailingComma: 'all',
    printWidth: 100,
    proseWrap: 'never',
    endOfLine: 'lf',
    overrides: [
        {
            files: '.prettierrc',
            options: {
                parser: 'json',
            },
        },
        {
            files: 'document.ejs',
            options: {
                parser: 'html',
            },
        },
    ],
};

这不就是 prettier 规则配置吗, 我分明记得 singleQuote:true 就是使用单引号代替双引号,但我项目中使用双引号并没有给我提示错误啊!

然后我就回想了之前的项目 prettier 是和 eslint 配合使用的,prettier 的错误提示是通过 eslint 进行提示的,但这其中是需要 eslint-plugin-prettier 这个插件的。

然后我就回头去看 .eslintrc.js 配置文件, 发现确实没有使用这个插件, 我又去 package.json 文件中看了看,发现也没有对这个库的依赖。

这我就有点纳闷了,难道是 @umijs/fabric 已经自动继承好了?

然后我就就回头去了看了下 eslint 配置的相关源码, 依然没有发现 eslint-plugin-prettier 插件的踪迹!

这就让我十分纳闷了,既然 @umijs/fabric 是一个包含 prettier,eslint,stylelint 的配置文件合集,按说应该已经集成好这一块了吧,为什么没有呢?

既然你没有那我就手动添加下试试吧,万一成功了呢(人还是要有梦想的,万一实现了呢)。于是:

·添加 eslint-plugin-prettier 的依赖:

    yarn add eslint-plugin-prettier --dev

然后修改 .eslintrc.js 文件如下:

果然,通过此配置之后IDE就有错误提示了,,哈哈。。

剩下的就是根据自己和团队的使用方式进行 rules 配置就行了。

三. git hooks 不起作用(项目明明有错却能正常提交)

在项目的 package.json 我看到有如下代码:

就不就是配置的 git hooks (git hooks 即是钩子函数,简单点说就是git 在 commit 之前可以验证是否有不符合eslint 规范的代码,有的话阻止提交)吗, 于是我就赶紧尝试了一下(刚才那个双引号的错误还在):

git add . 
git commit -m "..."

神奇的一幕发生了,居然能正常提交!!

通过配置我们发现 **/*.{js,jsx,ts,tsx} 执行的是 npm run lint-staged:js

先来看下 lint-staged:js 的定义:

然后我再控制台执行了这个命令,发现什么都没有输出!

迟疑之际,我发现下面 lint:js 这个命令和 lint-staged:js 内容差不多, 多一个格式化输出和文件路径的配置,于是我尝试运行该命令:

    npm run lint:js

别说,这个命令还真好使,控制台顺利打出了错误内容:

于是我把 package.json 中 lint-staged 的配置改成了如下:

然后重新提交代码,控制台输出如下:

可以看到,成功阻止了代码的提交!!

到此就先告一段落吧,下次补充下这篇文章的细节。