lint | 黑盒子·技术积累

# lint

项目中接入 ESLint
- 版本控制：add .npmrc 和 .nvmrc，并且 lock 文件也要入库，配置
- 执行 npm init @eslint/config，生成 .eslintrc.* 配置文件，进行相应的配置
- 保存代码格式化：prettier npm i prettier -D
- 代码提交前：lint-staged，执行 npm i lint-staged -D，并在package.json中进行规则配置，与定义scripts执行命令
- husky，定义.git的钩子命令
- commitlint 做 commit message 校验
IDE 编辑器接入
- 跨编辑器保存一致

# 版本控制

node -v > .nvmrc

engine-strict=true
package-lock=true
registry=https://registry.npmjs.org/

1
2
3

package.json

"engines": {
   "node": "16",
   "npm": "8"
}

1
2
3
4

# prettier 命令

必须结合 .prettierignore 使用

prettier --write .                              # -w
prettier -write --ignore-unknown "src/**/*.js"  # -w -u
prettier -write 'src/**/*.{js,jsx,ts,tsx,json,yml,yaml,css,less,scss,md,html}'

prettier --check "src/**/*.js"                  # -c
prettier --list-different "src/**/*.js"         # -l

# prettier diff
prettier --write '**/?(.)*.{md,css,scss,js,json,yaml,yml}' && git --no-pager diff && git checkout -- .

1
2
3
4
5
6
7
8
9

# lint-staged 配置

"scripts": {
   "lint-staged": "lint-staged --allow-empty"
},
"lint-staged": {
   "*.{js,jsx,ts,tsx,json,yml,yaml,css,less,scss}": [
   "prettier --write"
   ],
   "*.{js,jsx,ts,tsx}": [
   "npm run eslint:fix"
   ]
},

1
2
3
4
5
6
7
8
9
10
11

husky 安装

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm

或使用

npx auto-husky

1
2
3
4
5
6
7
8

husky 配置，可以在钩子中执行 lint-staged 进行校验

# usage 启用 Git 挂钩
npm set-script prepare "husky install"
npm run prepare
# 会将 .git/config 的 hooksPath 进行修改

# Add a hook:
npx husky add .husky/pre-commit "npm test"
npx husky add .husky/pre-commit "npm run lint-staged"
npx husky add .husky/commit-msg 'npx --no commitlint --edit $1' # 这个执行有问题
yarn husky add .husky/commit-msg 'npx --no -- commitlint --edit "${1}"' # 这个可以

# husky uninstall
npm uninstall husky && git config --unset core.hooksPath

1
2
3
4
5
6
7
8
9
10
11
12
13

commitlint 的安装

# Add hook，与上面在 husky 中添加钩子功能相同
cat <<EEE > .husky/commit-msg
#!/bin/sh
. "\$(dirname "\$0")/_/husky.sh"

npx --no -- commitlint --edit "\${1}"
EEE


# Make hook executable
chmod a+x .husky/commit-msg

1
2
3
4
5
6
7
8
9
10
11
12

commitlint 的配置

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'header-max-length': [1, 'always', 100],
    // prettier-ignore
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'enhance',
        'chore',
        'test',
        'doc',
        'refactor',
        'style',
        'revert',
      ],
    ],
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

测试

npx commitlint --from HEAD~1 --to HEAD --verbose

echo 'foo: xxx' | npx commitlint --verbose

1
2
3

# ESLint 配置的简要说明

配置的定义：通过 .eslintrc.* 文件配置或 package.json 文件的 eslintConfig 字段指定配置或在命令行运行时指定一个任意的配置文件
特定类型的文件指定处理器，请使用 overrides 键和 processor 键的组合
为指定文件使用 overrides + rules 附加配置
plugins：可省略前缀
overrides
processor 处理器
env 环境全局变量
globals 全局变量
rules
settings 在配置文件添加共享设置
extends: "eslint:recommended", standard