本文主要针对react-umi进行项目配置，使用的是@umijs/fabric下面的包

• 创建react-umi项目
• 配置eslint
• 配置stylelint
• 配置prettier
• 配置git hook

1. 创建项目

mkdir sub-react-umi
cd sub-react-umi
yarn create @umijs/umi-app
yarn install 或者 npm install

2. 配置eslint

# 全局安装eslint
npm install eslint -g
# 项目中安装eslint包
npm install eslint --save-dev
# 初始化eslint 按照自己的想要的配置进行选择
eslint --init
> To check syntax, find problems, and enforce code style
> Javascript modules (import/export)
> React
> Yes
> Browser 
> Use a popular style guild
...

然后在tsconfig.json中的"include"目录中增加".eslintrc.js"
可根据自己需求在.eslintrc.js文件中进行配置
当然可以直接使用umi/fabric下面的包

npm install @umijs/fabric --save-dev

我的配置如下

module.exports = {
    extends: [require.resolve('@umijs/fabric/dist/eslint')],
  
    // in antd-design-pro
    globals: {
      ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
      page: true,
      REACT_APP_ENV: true,
    },
    parserOptions: {
      project: ['./tsconfig.json', './packages/*/tsconfig.json'],
      ecmaVersion: 12,
      sourceType: 'module',
      ecmaFeatures: true,
      tsconfigRootDir: __dirname,
    },
    rules: {},
    overrides: [
      {
        files: ['*.js', '*.ts', '*.jsx', '*.tsx'],
        rules: {
          'no-use-before-define': 'off', // 不能在定义之前使用
        },
      },
    ],
    env: {
      browser: true,
      es2021: true,
    },
  };
  

3. 配置stylelint

下载stylelint的相关包

npm install @umijs/fabric --save-dev
# 声明一下(如果已经有就不用下载了)，由于umi集成了stylelint的包，所以可以直接下载umi的包，若是没有使用umi，则需要这样引入包
npm install --save-dev stylelint
npm install --save-dev stylelint-config-standard

在根目录下创建.stylelintrc.js文件，拷贝以下代码

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
  rules: {
    // your rules
  },
  ignoreFiles: ['./src/global.less'],
};

4. 配置prettier

由于本项目自带prettier，但是想方便配置，本人直接将其修改成.prettier.js文件
具体配置如下

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 120,
  overrides: [
    {
      files: '.prettierrc',
      options: { parser: 'json' },
    },
  ],
};

5. 配置git hooks——husky

安装husky

npm install husky --save-dev

在package.json中加入如下配置

// 这是husky扩展的脚本执行的定义方式，当对应git hooks触发时执行
"husky": {
    "hooks": {
      // 可以执行一个js文件，将控制权转移给我们更熟悉的nodejs
      "pre-commit": "lint-staged", 
      // 也可以调用其他脚本或者执行一段原生shell命令，如下配置
     // "commit-msg": "npm run test && echo succeed" 
    }
},
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --parser=typescript --write src/**/*.{js,jsx,tsx,ts}",
      "eslint --fix",
      "git add"
    ],
    "*.{less,css}": [
      "prettier --write src/**/*.{less,css}",
      "stylelint --fix src/**/*.{less,css}",
      "git add"
    ]
  },

欢迎下方留言...