使用 eslint 进行业务代码的校验以及自动修复。
使用 stylelint 进行 css 样式的校验以及自动修复。
使用 prettier 进行自动格式化。

安装

本项目为实现校验 js 和 css 代码的书写规范，使用了 @umijs/fabric 这个模块包。基于这个包的基础上，再做自己的一些规范配置。

yarn add @umijs/fabric -D

npm i @umijs/fabric --save-dev

遇到问题：

可能会遇到报 node 版本不兼容的问题。解决方案有两种：

安装符合的版本（建议优先考虑这种方案），可使用 nvm 进行 node 的版本管理
如果使用 yarn 安装不成功，可使用 npm 进行安装试试。

配置.eslintrc.js

/*
 * @Description: eslint 配置
 * @ 规则依赖于 @umijs/fabric，在此基础上，可自行添加自己的规则进行配置
 * @Author: kivet
 * @Date: 2022-01-26 13:55:14
 * @LastEditTime: 2022-01-26 14:35:45
 */

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: {
    // ?  your rules
  },
};

配置 .stylelintrc.js

/*
 * @Description: 样式校验配置文件
 * @Author: kivet
 * @Date: 2022-01-26 14:37:08
 * @LastEditTime: 2022-01-26 14:37:08
 */

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

配置.prettierrc.js

/*
 * @Description: prettier 配置文件
 * @Author: kivet
 * @Date: 2022-01-07 11:17:34
 * @LastEditTime: 2022-01-26 14:50:56
 */
const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
  
  // ?  your rules
};

使用

1. 开发时提示

如果你使用的 IDE 是 vscode，安装对应同名称的插件，那么在开发过程中，这些插件就会去读取项目根目录下的的这些配置文件来进行校验提示了。

如果是其它 IDE，暂不清楚是否有效。

2. 各规则配置文件自定义 rules 配置

直接去看项目代码，根目录下的对应的配置文件的配置内容，不赘述。

3. 命令行校验

项目的代码规范校验，是基于 @umijs/fabric 这个包来实现的，它集成了 prettier，eslint 和 stylelint，来实现规范校验。同时也支持配置命令行来进行校验以及自行修复等。

{
  "scripts": {
    // ? 校验项目 js 代码，及 .ts、.tsx 那些文件
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    // ? 校验项目 js 代码，并自动修复
    "lint:js:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    
    // ? 校验项目 css 样式表代码，即 .less 那些文件
    "lint:style": "stylelint "src/**/*.less" --syntax less",
    // ? 校验项目 css 样式表代码，并自动修复
    "lint:style:fix": "stylelint --fix "src/**/*.less" --syntax less",
    
    // ? 校验并自动修复项目中的 js 和 css 代码
    "lint:fix": "npm run lint:js:fix && npm run lint:style:fix",
      
    // ? 代码提交前自动校验并修复
    "commit": "npm run lint:fix && git add . && git-cz",
  },
  "devDependencies": {
    "@umijs/fabric": "^2.10.1"
  }
}

[0] umijs-fabric

[1] umi+antd 项目使用eslint

[2] stylelint 规则配置查询

返回目录文档

配置代码书写规范

安装