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

原创已于 2023-04-11 18:53:57 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-02-17 17:40:12 首次发布

前端规范化专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何结合prettier（代码格式化工具）、lint-staged（检查git暂存区文件）和simple-git-hooks（git钩子库）来确保在git提交前自动格式化所有暂存区文件，统一项目代码风格。通过在package.json中配置这三个工具，并创建prettierrc.yml配置文件，可以实现开发流程中的自动化代码格式化。

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