如何在 Vue 项目中集成 Husky、Prettier 等工具？

使用 Vite 创建项目

pnpm create vite-app vue3-ts

安装依赖

pnpm install husky lint-staged eslint prettier -D

配置 Prettier

// .prettierrc.json
{
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "trailingComma": "all",
  "endOfLine": "auto"
}

你可以使用 pnpx prettier --write . 命令格式化代码

配置 ESLint

# 初始化 ESLint
pnpm create @eslint/config

以下选项是可选的，你可以选择与我相同的配置。

运行命令 pnpx eslint . 检查 ESLint 规则；

安装并配置 Husky

# 初始化 husky
pnpm husky install
# 配置 husky
pnpx husky add .husky/pre-commit "pnpm lint-staged"

执行上述命令后，你的项目结构如下，会自动创建一个 .husky 目录和一个 pre-commit 文件。

稍等，还需要另一个配置。

// package.json
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
 "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  },

验证 Husky

运行以下命令提交一些文件

git add .

git commit -m 'test for husky'

你将在控制台看到以下内容：

恭喜你，你成功地使用 git commit 触发了 lint-staged。

这包括了 ESLint 修复代码和 Prettier 格式化代码。

结语

感谢你的时间，如果你从我的文章中学到了一些东西，请给我点赞，同时，如有任何问题，欢迎随时提问。

协议

本作品代码部分采用Apache 2.0协议进行许可。遵循许可的前提下，你可以自由地对代码进行修改，再发布，可以将代码用作商业用途。但要求你：

署名：在原有代码和衍生代码中，保留原作者署名及代码来源信息。
保留许可证：在原有代码和衍生代码中，保留Apache 2.0协议文件。

本作品文档部分采用知识共享署名 4.0 国际许可协议进行许可。遵循许可的前提下，你可以自由地共享，包括在任何媒介上以任何形式复制、发行本作品，亦可以自由地演绎、修改、转换或以本作品为基础进行二次创作。但要求你：

署名：应在使用本文档的全部或部分内容时候，注明原作者及来源信息。
非商业性使用：不得用于商业出版或其他任何带有商业性质的行为。如需商业使用，请联系作者。
相同方式共享的条件：在本文档基础上演绎、修改的作品，应当继续以知识共享署名 4.0国际许可协议进行许可。

使用 Vite 创建项目​

安装依赖​

配置 Prettier​

配置 ESLint​

安装并配置 Husky​

验证 Husky​

结语​