【史上最全】定义开发规范和代码风格

定义开发规范

代码规范检查与修复

代码规范工具：lint工具

eslint安装：

pnpm i eslint -D -w

-w 在根目录安装依赖（对于monorepo而言需要指定）
如果报错，可能需要手动安装typescript-eslint/eslint-plugin和typescript-eslint/parser：

pnpm i -D -w @typescript-eslint/eslint-plugin@latest  @typescript-eslint/parser@latest

安装typescript：

pnpm i -D -w typescript

初始化：

npx eslint -init

创建.eslintrc.json文件，并写入

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true  //自定义
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier", //自定义
        "plugin: prettier/recommended" //自定义
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "prettier" //自定义
    ],
    "rules": {
        "prettier/prettier" : "error", //自定义
        "no-case-declarations": "off", //自定义
        "no-constant-condition": "off", //自定义
        "@typescript-eslint/ban-ts-comment": "off" //自定义
    }
}

安装typescript eslint plugin：

pnpm i -D -w @typescript-eslint/eslint-plugin

代码风格工具 prettier

安装prettier：

pnpm i prettier -D -w

创建.prettierrc.json并写入：

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": true,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "none",
    "bracketSpacing": true
}

由于prettier会与elint冲突，安装两个插件解决冲突：

pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

在package.json中加入：

    "lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages"

vscode中安装eslint和prettier插件，并设置

commit规范检查：

安装husky：

pnpm i husky -D -w

初始化husky

npx husky install 

把package.json 中的lint加入到husky pre commit钩子里：

npx husky add .husky/pre-commit "pnpm lint" 

在husky下面会出现pre-commit，当pre commit的时候，会格式化检查
当只需要多staged代码做检查时，需要使用lint-staged库。

对commit信息进行检查：

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D -w 

新建一个.commitlintrc.js：

module.exports = {
	extends: ['@commitlint/config-convertional'],
	rules: {
    "type-enum": [
      2,
      "always",
      [
        "build", // 发布版本
        "chore", // 改变构建流程、或者增加依赖库、工具等
        "ci", // 持续集成修改
        "docs", // 文档修改
        "feat", // 新增功能
        "fix",  // 修复缺陷
        "perf", // 优化相关，比如提升性能、体验
        "refactor", // 代码重构
        "revert", // 回退版本
        "style", // 样式修改
        "test", // 测试用例修改
      ],
    ],
  },
};

把commit规范集成到husky中：

 npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

规范集的意义：

//提交的类型：摘要信息
<type>: <subject>

常用的type值包括：

• feat：添加新功能
• fix：修复bug
• chore：一些不影响功能的更改
• docs：文档的修改
• perf：性能方面的优化
• refactor：代码重构
• test：添加一些测试代码等等

Typesciprt 配置

{
	"compileOnSave": true,
	"compilerOptions": {
		"target": "ESNext",
		"useDefineForClassFields": true,
		"module": "ESNext",
		"lib": ["ESNext", "DOM"],
		"moduleResolution": "Node",
		"strict": true,
		"sourceMap": true,
		"resolveJsonModule": true,
		"isolatedModules": true,
		"esModuleInterop": true,
		"noEmit": true,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noImplicitReturns": false,
		"skipLibCheck": true,
		"baseUrl": "./packages"
	}
}