前端工程自动prettier

自动prettier,保证前端代码风格一致

创建一个工程

npx create-react-app style --template typescript

1. husky 自动引入 ，指定了 git 的 pre-commit hook 对应的脚本文件即 .husky => pre-commit，会执行相应的npm script 命令

npx husky-init && npm install

2. prettier pretty-quick

npm install --save-dev prettier pretty-quick

3. 改写 .husky => pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install pretty-quick --staged

4. 添加 npm script

// package.json
{
  "scripts": {
    "prettier": "prettier -c --write **/*",
    "pretty-quick": "pretty-quick"
  }
}

5.通过eslint-config-prettier，添加到eslintConfig的extends覆盖与eslint冲突的规则

npm install --save-dev eslint-config-prettier

  // package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier" // 添加 prettier
    ]
  },

6. vscode默认采用prettier格式化，可以这样设置，加载prettier-vscode插件

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}

相关库