Umi 配置 @umijs/fabric(ESLint+Prettier+Stylelint) + gitHooks + VSCode

Umi 配置 @umijs/fabric(ESLint+Prettier+Stylelint) + gitHooks + VSCode

顶尖金字教程

wywppkd

2022年04月23日 16:45 ·  阅读 745

@umijs/fabric 是 Umi 官方提供包含 prettier，eslint，stylelint 配置文件的合集, 可以减少自己配置这些工具耗费的精力, 下面介绍一下如何使用

1. 安装依赖

使用 Umi 初始化项目后, 安装以下依赖(注意版本要保持一致)

npm i @umijs/fabric@2.9.0 -D
npm i prettier@2.3.2 -D # 版本要和 fabric 依赖保持一致, 避免冲突
npm i yorkie@2.0.0 -D # 方便配置 gitHooks
npm i lint-staged@10.0.7 -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…