Umi 配置 @umijs/fabric(ESLint+Prettier+Stylelint) + gitHooks + VSCode
顶尖金字教程
![创作等级 lv-2](https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/lv-2.99ba5b2.png)
@umijs/fabric
是 Umi 官方提供包含 prettier
,eslint
,stylelint
配置文件的合集, 可以减少自己配置这些工具耗费的精力, 下面介绍一下如何使用
1. 安装依赖
使用 Umi 初始化项目后, 安装以下依赖(注意版本要保持一致)
npm i @umijs/[email protected] -D
npm i [email protected] -D # 版本要和 fabric 依赖保持一致, 避免冲突
npm i [email protected] -D # 方便配置 gitHooks
npm i [email protected] -D # lint 暂存区代码
复制代码
2. 修改 package.json
- 增加 lint 相关脚本
- 增加 gitHooks 配置
// package.json
{
"scripts": {
"prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
// 自动修复 stylelint 部分问题
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
// 自动修复 eslint + stylelint 部分问题
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
// 检查js等代码规范
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
// TS 类型检查
"lint-staged": "lint-staged",
"tsc": "tsc --noEmit"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
// 检查 git 暂存内容
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
}
复制代码
3. 设置 eslint, prettier, stylelint 配置文件
// .eslintrc.js
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/eslint')],
// 自定义全局变量
globals: {
REACT_APP_ENV: true,
REACT_APP_API_URL: true,
},
// 根据个人习惯自定义rule
rules: {
'no-console': 'off',
'react-hooks/exhaustive-deps': 'error', // react-hooks 依赖检查
'no-empty': 'off',// catch{} 允许为空
'@typescript-eslint/no-shadow': ['off'], // 当前作用域变量名不能与父级作用域变量同名
},
};
复制代码
# .eslintignore
/config
public
dist
.umi
.umi-production
.umi-test
mock
.eslintrc.js
typings.d.ts
复制代码
// .prettierrc.js
const fabric = require('@umijs/fabric');
module.exports = {
...fabric.prettier,
};
复制代码
# .prettierignore
**/*.svg
package.json
.umi
.umi-production
.umi-test
/dist
.dockerignore
.DS_Store
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
/public
复制代码
// .stylelintrc.js
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/stylelint')],
rules: {
// your rules
},
};
复制代码
4. 定义全局类型
// typings.d.ts
declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.svg' {
export function ReactComponent(
props: React.SVGProps<SVGSVGElement>,
): React.ReactElement;
const url: string;
export default url;
}
// 自定义全局变量类型
declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;
declare const REACT_APP_API_URL: string; // 接口地址的基础路径
复制代码
5. 配置 VSCode 保存自动格式化
- 安装 VSCode 插件
- ESLint: 实时提示 Lint 问题
- Prettier - Code formatter: 保存时自动格式化
// /.vscode/settings.json
{
// 设置Prettier插件为默认格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存自动格式化
"editor.formatOnSave": true
}
复制代码
最终效果
- Prettier 负责代码美化
- ESLint 负责代码质量检测
- 配合 VSCode 实现: 保存代码时自动格式化, 编写代码时 ESLint 实时提示 Lint 问题
- 配合 Git Hooks 实现: 禁止 commit 不规范代码
- Demo: github.com/wywppkd/umi…
- TIP:
@umijs/fabric
也可以在其他框架(如Next.js
)中使用, 示例: github.com/wywppkd/nex…