eslint+prettier+lint-staged+husky项目管理

使用 eslint,prettier,lint-staged,husky 做项目管理

添加eslint，prettier做代码校验

下载依赖项

pnpm install eslint prettier -D

初始化eslint

运行命令：pnpm init @eslint/config
cli会提醒让你选择你的配置项,生成配置文件。

配置prettier

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  semi: false,
  singleQuote: true,
};

设置忽略文件.eslintignore.cjs, .prettierrc.cjs

为了更好的结合eslint 与 prettier 还需添加 eslint-config-prettier, eslint-plugin-prettier

eslint-config-prettier的作用是为了关闭eslint中不必要或可能与 Prettier 冲突的规则。
需要在eslint配置文件中添加

module.exports = {
  ...
  extends: [...ohterExtends,'prettier'],
}

eslint-plugin-config的作用则是为了将prettier的校验转化为eslint的规则，从而做到编辑器的错误提示.

module.exports = {
  ...
  plugin: [...otherPlugins,'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}

添加husky,lint-staged, 规范commits

husky的作用是调用git hook做提交校验
lint-staged的作用是只校验git add .的内容

下载lint-staged

pnpm install -D lint-staged

配置信息

// package.json
"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue}": "eslint"
}

下载husky

pnpm install -D husky

添加git hook

⚠️注意 添加hook时需要有.git文件夹，如果是初始化的项目需先git init, 然后再运行npx husky install 创建.husky目录结构

cmd: npx husky install
fatal: not a git repository (or any of the parent directories): .git
husky - git command not found, skipping install

运行命令

npx husky add .husky/pre-commit "npx --no-install lint-staged"

其中"npx --no-install lint-staged" 表示调用lint-staged

此时项目中 husky 配置完毕

##  。husky/precommit
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged

测试

拦截提交表示成功

对于使用prettier不同人也有不同的声音

大佬Anthony Fu 在他的个人eslint-config中就抛弃使用prettier.
以及有相关文章介绍他个人为什么不愿意再使用prettier为什么我不使用 Prettier