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

男娘i 2024-03-26 10:27 15阅读 0赞

#### 什么是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`表示是否开启单属性换行，单属性换行原来很不习惯，但后来发现确实很香，建议尝试一下