prettier+lint-staged+husky提交(commit)时格式化代码格式

Jarvis¿

已于 2023-06-08 11:45:54 修改

阅读量439

点赞数

文章标签： webpack

于 2023-05-11 17:07:54 首次发布

本文链接：https://blog.csdn.net/cc_King/article/details/130623944

版权

文章介绍了如何在项目中安装和配置Prettier、Lint-Staged和Husky，以实现在gitcommit前自动执行代码格式化和检查。主要步骤包括安装依赖、编写配置文件、修改package.json、添加校验命令以及处理可能出现的报错问题。

摘要由CSDN通过智能技术生成

文章目录

安装依赖

yarn add prettier lint-staged husky -D;

执行命令

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
在根目录下生成 .husky 文件夹；此文件是在commit时运行的检测脚本

添加配置文件`(.prettierrc.js)` & 忽略文件`(.prettierignore)` (在 `package.json` 同级目录)

配置文件（.prettierrc.js）

// .prettierrc.js
module.exports = {
  semi: true, // 使用分号, 默认true
  singleQuote: false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  trailingComma: 'all', // 行尾逗号,默认none,可选 none|es5|all
  printWidth: 200,
  tabWidth: 2, // tab缩进大小,默认为2
  useTabs: false, // 使用tab缩进，默认false
  quoteProps: 'consistent',
  bracketSpacing: true,
  arrowParens: 'always',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: true,
}

忽略文件(.prettierignore)

// .prettierignore
.DS_Store
node_modules
/dist
/dist.zip
/yarn.lock
/package-lock.json
/public/luckysheet

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

修改 `package.json` 配置

"lint-staged": {
    "*.{js,css,html,json,vue}": [
          "prettier --config .prettierrc.js --write",
          "git add"
      ]
  },
  "husky": {
      "hooks": {
          "pre-commit": "lint-staged"
      }
  },

至此配置就完成了，当执行 git commit 时，prettier就会执行代码格式化

优化

添加校验命令

添加 (package.json) 方便执行检验项目所有文件排版格式；

"scripts": {
    "lint:prettier": "npx prettier --config ./.prettierrc.js --ignore-path ./.prettierignore --write **/*.{js,css,html,json,vue,jsx,tsx}"
 }