ESLint + Prettier + husky代码规范

ESLint

代码规范校验使用ESLint，但是一开始 ESLint 只有检测告诉你哪里有问题，后来 ESLint 提供了$ ESLint filename --fix的命令，可以自动帮你修复一些不符合规范的代码。

Prettier

Prettier 是一个代码格式化工具，可以帮你把代码格式化成可读性更好的格式，比如加分号，或者换行之类的。

husky

husky是强制git commit按照标准规则来提交。

项目实践（pnpm + monorepo）

1. 下载ESLint和prettier

pnpm i eslint -D -w     
pnpm i prettier -D -w   

2. 初始化ESLint

npx eslint --init   

3. 下载ESLint解析器

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

3. 安装plugin

• eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
• eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。 安装依赖并修改.eslintrc文件

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

4. .eslintrc.json配置

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": ["@typescript-eslint", "prettier"],
    "rules": {
        "prettier/prettier": "error"
    }
}

5. package.json文件中添加一个脚本命令，这个脚本意思是指执行packages文件下的所有ts,js,jsx,tsx文件，并且自动按照prettier配置进行修复。

 "scripts": {
    "lint": "eslint --ext .ts,.js,.jsx,.tsx --fix ./packages"
  },

6. 安装husky

pnpm i husky -D -w

7. 初始化husky

npx husky install

8)将pnpm lint 纳入commit时husky将执行的脚本

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

9. 安装lint-staged，因为项目比较大后，每次扫描全部代码，就会很慢，而它则可以让我们只扫描本次提交的代码的规范

10. 针对每次提交信息进行检查，看是否规范，安装commit-lint

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

11. 创建.commitlintrc.js文件

module.exports = { extends: ['@commitlint/config-conventional'] }

12. 添加到husky中，每次提交代码时进行检查

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'