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"
    ]
  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容