umijs配置eslint,prettier,stylelint,commitlint

最新推荐文章于 2024-07-19 14:51:14 发布

笑颜铁塔

最新推荐文章于 2024-07-19 14:51:14 发布

阅读量2.7k

点赞数 3

文章标签：前端开发语言 reactjs

本文链接：https://blog.csdn.net/qq_52092705/article/details/126236153

版权

umijs的资料好像不是很多，真的配置了超级久呜呜呜呜，踩了居多坑

我记得我的是一创建项目，默认就有yorkie，所以我就不想用husky，我看网上都是husky教程的，关于umijs+yorkie的教程真的好少，查阅了不少资料已经自己亲身实践😭😭,趁我还记得速速记录一下

偷懒了，用了@umijs/fabric，一个包含 prettier，eslint，stylelint 的配置文件合集，先安装
yarn add @umijs/fabric -D
删除.prettierrc文件

新建 .eslintrc.js .eslintignore .prettierrc.js .prettierignore .stylelintrc.js

这里贴上我自己写的

//.eslintrc.js

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,
    },

    // 这个rules是复制别人的
    rules: {
        'no-console': 'off',
        'react-hooks/exhaustive-deps': 'error', // react-hooks 依赖检查
        'no-empty': 'off', // catch{} 允许为空
        '@typescript-eslint/no-shadow': ['off'], // 当前作用域变量名不能与父级作用域变量同名
    }

};

//.eslintignore

/config
/dist
public
dist
.umi
mock
node_modules

//.prettierrc.js

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

module.exports = {
    ...fabric.prettier,
};

//.prettierignore

**/*.md
**/*.svg
**/*.ejs
**/*.html
/dist
package.json
.umi
.umi-production

//.stylelintrc.js

const fabric = require('@umijs/fabric');
module.exports = {
    ...fabric.stylelint,
};

ps：我的项目默认是安装了prettier，但是由于我已经装了@umijs/fabric，他既然基础了前面那三个，因此我把它卸载了（yarn remove prettier）,之前还手抽装了yarn add eslint -D，其实不必单独再装了，我装了结果后面git commit的时候竟然还报错了😭😭

接下来是安装commitlint对git commit的信息进行规范
yarn add @commitlint/config-conventional @commitlint/cli -D

最后配置package.json

{
  "private": true,
  "scripts": {
    "start": "cross-env UMI_ENV=dev umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
     //增加script命令，以后就可以通过执行yarn lint:js规范
    "lint": "umi g tmp && yarn lint:js && yarn lint:style && yarn lint:prettier && yarn tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src &&yarn lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "precommit": "lint-staged",
    "prettier": "prettier -c --write \"src/**/*\"",
    // 结束
    "test:coverage": "umi-test --coverage"
  },
  //配置gitHooks，注意是$GIT_PARAMS，不要少$,也不是HUSKY_GIT_PARAMS
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -e  $GIT_PARAMS"
  },
  "lint-staged": {
     "*.{js,jsx,ts,tsx}": "yarn lint:js", //这里我看网上大部分都是yarn lint-staged:js但是我那样没效果
     "*.{js,jsx,ts,tsx,less,md,json}": [
      "prettier --write"
    ],
    "*.less": "stylelint --syntax less"
  },
  "dependencies": {
    "@ant-design/pro-layout": "^6.5.0",
    "lodash": "^4.17.21",
    "react": "17.x",
    "react-dom": "17.x",
    "umi": "^3.5.32"
  },
  "devDependencies": {
    //这里我卸载了prettier
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@umijs/fabric": "^3.0.0",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.5.32",
    "babel-plugin-import": "^1.13.5",
    "cross-env": "^7.0.3",
    "lint-staged": "^10.0.7",
    "typescript": "^4.1.2",
    "yorkie": "^2.0.0"
  }
}