编码工程规范

ESLinet

ESLint 是 JavaScript 开发中广泛使用的 linting 工具，用于提高代码质量、一致性和可维护性。

安装

ESLint 安装可以采用两种方式：

一种是向导式安装，另一种是手动安装。

向导式安装

npm init @eslint/config
pnpm create eslint-config

支持安装时就指定要用的共享配置

npm init @eslint/config@latest -- --config eslint-config-standard

手动安装

npm install eslint --save-dev

配置

根据不同的环境，eslint 可以自动选择配置文件。以前的配置文件名是 .eslintrc.js，现在基本不推荐了：

eslint.config.js
eslint.config.mjs
eslint.config.cjs
eslint.config.ts
eslint.config.mts
eslint.config.cts

不同项目的配置文件是不同的，关键是理解配置文件的格式：

import { defineConfig } from "eslint/config";
import js from "@eslint/js";

export default defineConfig([
  { files: ["**/*.js"], plugins: { js }, extends: ["js/recommended"] },

  {
    rules: {
      "no-unused-vars": "warn",
      "no-undef": "warn",
    },
  },
]);

规则

规则有很多种，我们主要先记住如何开启或者关闭规则。

{
  "rules": {
    "no-unused-vars": "off",
    "no-undef": "warn"
  }
}

“off” or 0 - 关闭规则
“warn” or 1 - 将规则设置为警告（退出代码为 0）
“error” or 2 - 将规则设置为错误（退出代码为 1）

检查

npx eslint . --ext .js,.jsx,.ts,.tsx
npx eslint yourfile.js

Prettier

官网：https://prettier.io/

Prettier 是一个代码格式化工具，支持多种语言和框架。它可以自动格式化代码，使其符合一致的风格。

安装

npm install prettier --save-dev

配置

Prettier 支持多种配置文件，包括：

在你的 package.json 或 package.yaml 文件中有一个 "prettier" 键。
一个用 JSON 或 YAML 编写的 .prettierrc 文件。
一个 .prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5 文件。
一个 .prettierrc.js、prettier.config.js、.prettierrc.ts 或 prettier.config.ts 文件，该文件使用 export default 或 module.exports 导出一个对象（取决于你的 package.json 中的 type 值）。
一个 .prettierrc.mjs、prettier.config.mjs、.prettierrc.mts 或 prettier.config.mts 文件，该文件使用 export default 导出一个对象。
一个 .prettierrc.cjs、prettier.config.cjs、.prettierrc.cts 或 prettier.config.cts 文件，该文件使用 module.exports 导出一个对象。
一个 .prettierrc.toml 文件。

module.exports = {
  semi: true,
  tabWidth: 2,
  singleQuote: true,
  printWidth: 100,
  trailingComma: "all",
};

semi：是否添加分号。
singleQuote：使用单引号而非双引号。
tabWidth：缩进宽度。
printWidth：每行最大字符数。
trailingComma：在对象或数组最后一个元素后添加逗号。支持的值有：none、es5、all。

执行检查和修复

npx prettier --write .

lint-staged

官网：https://www.npmjs.com/package/lint-staged

作用：lint-staged 可以让你在 Git 暂存（staged）区域中的文件上运行脚本，通常用于在提交前对代码进行格式化、静态检查等操作。
使用方式：你可以在项目中使用 lint-staged 配合 husky 钩子来执行针对暂存文件的脚本。具体的使用步骤如下：

安装

npm install lint-staged --save-dev

配置

在 package.json 中添加 lint-staged 配置：

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,css}": ["prettier --write"]
  }
}

"src/*/.{js,jsx,ts,tsx}" 是指定要针对的暂存文件模式，你可以根据自己的项目需求来配置。
["prettier --write","eslint --fix"] 为校验命令，可执行 eslint 、prettier 等规则

husky

官网：https://typicode.github.io/husky/

作用：husky 是一个 Git 钩子工具，它可以在 Git 生命周期的不同阶段执行自定义脚本。
使用方式：你可以在项目中使用 husky 配合 lint-staged 来在提交前对代码进行格式化、静态检查等操作。具体的使用步骤如下：

安装

npm install husky --save-dev

配置

在 package.json 中添加 husky 配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

这种风格是 husky v4 版本的风格，现在已经是 v9+ 了，所以我们要换一种配置 husky 的方式。

首先是修改 package.json 文件，添加 scripts 配置：

{
  "scripts": {
    "prepare": "husky install"
  }
}

然后执行命令：

npm run prepare

首次初始化也可以执行：

npx husky init

这会在项目根目录下创建一个 .husky 文件夹，里面有一个 pre-commit 文件。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

这个文件就是在 git commit 之前执行 lint-staged 的命令。

确保 pre-commit 文件是可执行的：

chmod +x .husky/pre-commit

整合 ESLint 与 Prettier

TBD

整合 ESLint 与 TypeScript

TBD

Commitizen

TBD

Commit Lint

https://commitlint.js.org/

Commitlint 是一个用于规范 Git 提交信息的工具，它可以根据预定义的规则检查提交信息是否符合规范，帮助团队保持一致的提交风格。

安装

npm install --save-dev @commitlint/cli @commitlint/config-conventional

配置

// commitlint.config.js
module.exports = {
  extends: ["@commitlint/config-conventional"],
};

使用

在项目根目录下添加一个 commitlint.config.js 文件，然后在 package.json 中配置 husky 或其他工具来在提交时运行 commitlint，例如：

{
  "scripts": {
    "commit": "commitlint"
  }
}

运行时，commitlint 会自动检查提交信息是否符合规范。

ESLinet​

安装​

向导式安装​

手动安装​

配置​

规则​

检查​

Prettier​

安装​

配置​

执行检查和修复​

lint-staged​

安装​

配置​

husky​

安装​

配置​

整合 ESLint 与 Prettier​

整合 ESLint 与 TypeScript​

Commitizen​

Commit Lint​

安装​

配置​

使用​