代码校验规范

vscode插件安装

stylelint
prettier
eslint

安装依赖

npm install -D stylelint prettier eslint

// yarn 
yarn add stylelint  prettier eslint  -D

安装@umijs/fabric，一个包含 prettier，eslint，stylelint 的配置文件合集

npm i @umijs/fabric

stylelint 『一个强大的、现代化的 CSS 检测工具』

• .stylelintrc.js文件配置

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

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

eslint 『提供一个插件化的javascript代码检测工具』

• .eslintrc.js文件配置

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')]
  globals: {
      ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
      page: true,
      REACT_APP_ENV: true,
    },
  rules: {
    camelcase: 'off',
    'no-console': 'error',
    'no-unused-vars': 'error',
    'no-else-return': [0],
    ...
  }
};

prettier 『代码格式化工具，根据设置规则自动调整』

• .prettierrc.js文件配置

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

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

配置忽略

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

husky 注册 git hook (git commit时检查)

• 安装依赖

npm install --save-dev husky lint-staged

• 添加 hook 函数

// package.json
"scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage",
    "lint": "eslint --ext .js src --fix --cache",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx --fix"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,less}": [
      "prettier --write",
      "git add"
    ],
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.less": "stylelint --syntax less"
  },

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

vscode配置

• 添加自动修复

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

配置完后重启VSCode