前端项目规范化3：prettier、simple-git-hook、lint-staged结合使用

什么是prettier、lint-staged、simple-git-hooks

prettier 著名的格式化工具
lint-staged 检测git add暂存区的文件，对检测出的文件执行脚本
simple-git-hooks git钩子库，对git执行的一些命令，通过对应的hooks钩子触发，执行自定义的脚本程序

三者组合

simple-git-hook可以在git commit前调用lint-staged，lint-staged再触发prettier
最终实现每次git commit前都会进行所有暂存区文件的格式化，从而统一项目的格式化风格

使用方式很简单，首先肯定是安装

npm i -D simple-git-hooks lint-staged prettier

pageage.json添加"simple-git-hooks"和"lint-staged"属性

  "devDependencies": {
    "lint-staged": "^13.1.2",
    "prettier": "^2.8.4",
    "simple-git-hooks": "^2.8.1",
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*": [
      "prettier --write --ignore-unknown"
    ]
  }
}

注意，simple-git-hooks需要npx运行

simple-git-hooks库需要npx simple-git-hooks运行，才能生效git 钩子，并且每次更改钩子的脚本都需要npx simple-git-hooks
所以我是放在dev命令里面的，这样参与开发的人员都必定会进行npx simple-git-hooks

 "scripts": {
    "dev": "npx simple-git-hooks & vite --host",
    "build": "vite build",
  },

项目根目录添加prettier配置文件

我用的是yml后缀
.prettierrc.yml
以下是个人用的最舒服的prettier配置，仅供参考

semi: true
singleQuote: true
printWidth: 100
trailingComma: all
arrowParens: avoid
bracketSpacing: true
tabWidth: 2
singleAttributePerLine: true

singleAttributePerLine表示是否开启单属性换行，单属性换行原来很不习惯，但后来发现确实很香，建议尝试一下