目录

• 使用指南
  • NODE环境
  • 工具安装使用
  • 集成后功能说明
  • 编辑器开启代码检测
  • 编辑器开启保存后格式化功能
  • CRA项目webpack集成
• 接口说明
  • 命令行
  • 函数调用

使用指南

此工具供前端项目集成eslint、prettier、commit、单元测试等一系列规范用。 eslint相关说明请查看@cat-com/eslint-config 。

NODE环境

nodejs 12+

工具安装使用

旧项目强烈建议新开Git分支进行初始化！！！

统一脚手架方式(推荐)

安装

npm i @cat-cli/init-spec -g

使用

cat-init-spec

函数方式

安装

npm i @cat-cli/init-spec

使用

const {init} = require("@cat-cli/init-spec");
init();

集成后功能说明

功能概述

刚集成完建议执行npm run lint:fix和npm run prettier:fix进行代码批量检查和格式化。

时机 | 功能 ---|--- 代码保存 | IDE编辑器开启保存后格式化功能后会自动进行eslint修复和prettier格式化 代码提交 | 代码提交时自动进行eslint检查修复、prettier格式化以及commit message格式校验。 版本发布 | 执行npm run release后根据历史提交信息更新CHANGELOG.md。

命令行说明

命令行 | 说明 | 执行方式 ---|---|--- npm run lint | 执行根目录下所有匹配文件的eslint检查 | 手动执行 npm run lint:fix | 执行根目录下所有匹配文件的eslint检查并修复 | 手动执行 npm run lint:staged | 执行当前提交文件的eslint检查并修复 | git commit时自动执行 npm run prettier | 执行根目录下所有匹配文件的prettier检查 | 手动执行 npm run prettier:fix | 执行根目录下所有匹配文件的prettier检查并格式化 | 手动执行 npm run prettier:staged | 执行当前提交文件的prettier检查并格式化 | git commit时自动执行 npm run release | 更新CHANGELOG.md版本并提交 | 发布版本时手动执行 npm run test | 单元测试 | 手动执行

文件&目录说明

文件名 | 说明 ---|--- .eslintrc.js | eslint配置文件，根据选择的模式和语言匹配@cat-com/eslint-config 对应规则 .eslintignore | eslint忽略列表配置文件 .prettierrc.js | prettier配置文件 .prettierignore | prettier忽略列表配置文件 .commitlintrc.js | git commit规则配置文件 .editorconfig | 编辑器格式约束文件，配置与prettierrc.js保持一致 test | 单元测试目录

编辑器开启代码检测

vscode

• 安装ESLint插件。

webstorm

• 打开配置搜索eslint，在ESLint配置内选择Automatic ESLint configuration。

编辑器开启保存后格式化功能

vscode

• 安装ESLint和Prettier插件。
• 打开setting，点击右上角按钮打开setting.json文件。
• 写入如下配置:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

webstorm

• 打开配置搜索eslint，在ESLint配置内勾选Run eslint --fix on save开启eslint自动修复检测。
• 搜索prettier，在Prettier配置内勾选on Save开启prettier自动格式化。

CRA项目webpack集成

使用create-react-app创建的项目，如需要webpack的eslint配置保持一致可参考文档 CRA使用自定义eslint 。

接口说明

命令行

spec

初始化规范命令

命令

cat init spec

参数

参数 | 简写 | 含义 | 默认 | 必须 ---|---|---|---|--- --specs | -s | 要初始化的规范,可选 all/eslint/prettier/commit/version/test，多个以,分隔 | all | 否 --mode | -m | lint模式，base/web/react | | 否 --lang | -l | lint语言，javascript/typescript | | 否 --force | -f | 是否强制初始化 | | 否

函数调用

init

初始化规范，带命令行交互

方法

init

参数

参数 | 类型 | 含义 | 默认 | 必须 ---|---|---|---|--- specs | array | 要初始化的规范,可选 all/eslint/prettier/commit/version/spec | ['all'] | 否 mode | string | lint模式，base/web/react | | 否 lang | string | lint语言，javascript/typescript | | 否 force | boolean | 是否强制初始化 | | 否

initSpec

初始化规范，不带命令行交互

方法

initSpec

参数

参数 | 类型 | 含义 | 默认 | 必须 ---|---|---|---|--- specs | array | 要初始化的规范,可选 eslint/prettier/commit/version/test | | 是 mode | string | 同init方法 | | 是 lang | string | 同init方法 | | 是 force | boolean | 同init方法 | | 否 initConfig | object | 初始化规范配置 | | 否 isCRA | boolean | 是否为create-react-app应用 | | 否