umi项目添加代码规范工具

vscode插件安装

stylelint
prettier
eslint

安装依赖

npm install -D stylelint prettier eslint

// yarn 
yarn add stylelint  prettier eslint  -D

stylelint

• .stylelintrc.js文件配置

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

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

eslint

• .eslintrc.js文件配置

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')]
};

prettier

• .prettierrc.js文件配置

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

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

配置忽略

// .stylelintignore   忽略stylelint检查的文件
// .prettierignore   忽略prettier检查的文件
// .eslintignore 忽略eslint检查的文件

vscode配置

• 添加自动修复

"editor.codeActionsOnSave": {
   "source.fixAll": true
 }

git commit时检查

• 安装依赖

npm install -D lint-staged husky

// yarn 
yarn add lint-staged husky -D

• package.json添加相关指令

lint-staged添加git add 意味只检查本次提交文件否则检查所有

 "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
 "lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
 "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 && npm run lint:style",
 "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
 "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
 "prettier": "prettier -c --write \"**/*\"",
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write",
      "git add"
    ]
  },