本文详细介绍了如何使用 Vite 构建一个高效的 Vue 3.5 项目框架，并整合了 ESLint、Prettier、EditorConfig、Husky、lint-staged 和 commitlint 等现代化开发工具。通过这些工具的集成，我们能够确保代码质量、格式化和提交规范的一致性，从而提高团队的开发效率和项目的可维护性。文章涵盖了项目搭建、工具安装配置、代码风格统一和提交信息规范化的全过程，为协同开发人员提供了一个标准化、高效的开发环境。
1.Vite 项目搭建
1.1 项目准备
- 本项目Node 版本：23.5.0 （应该20+就行，可以根据包管理器提示升级自己的 Node 版本）
- 安装包管理工具： pnpm（快速、节省磁盘空间的包管理工具，与 npm 和 Yarn 类似）
npm install pnpm -g
1.2 创建项目并启动
pnpm create vite
#切换到项目文件夹下
cd vue3-admin
#安装依赖
pnpm install
#启动项目
pnpm run dev
2.工具集成
ESLint 用于代码质量检查，Prettier 专注于代码格式化，EditorConfig 帮助统一编码风格，而Husky 通过 Git 钩子强制执行代码检查，Lint-staged 仅对暂存文件应用 linters，Commitlint 则确保提交信息遵循一定的规范。这些工具共同构成了一个强大的代码质量和提交规范流程。
2.1 eslint 集成
2.1.1 eslint 安装依赖
通过 npx 安装 eslint
npx eslint --init
安装好后，会生成 eslint.config.js 文件，可在里面进行 eslint 的相关配置：
import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";
export default defineConfig([
{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], plugins: { js }, extends: ["js/recommended"] },
{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
tseslint.configs.recommended,
pluginVue.configs["flat/essential"],
{ files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
]);
2.1.2 eslint 插件安装（vscode）
点击后，会在项目文件夹 .vscode 下的 extensions.json 中添加配置，没有的话手动添加一下。
在 package.json 中添加脚本，即可通过 npm run lint 进行校验，代码文件中也会有提示。
2.2 prettier 集成
2.2.1 prettier 安装依赖
prettier是一个代码格式化工具，用于统一代码风格。eslint-plugin-prettier是一个 ESLint 插件，它允许 ESLint 使用 Prettier 的规则来检查代码风格。eslint-config-prettier是一个 ESLint 配置，用于关闭 ESLint 中与 Prettier 冲突的规则，确保两者能和谐工作，避免规则冲突。
通过 pnpm 安装 prettier 相关插件
pnpm install prettier eslint-plugin-prettier eslint-config-prettier -D
安装后，在项目文件夹下新建 prettier 配置文件 prettier.config.js 。
2.2.2 prettier 插件安装（vscode）
如下图，在 vscode 中搜索 Prettier 插件，安装 Prettier 插件。点击后，会在项目文件夹 .vscode 下的 extensions.json 中添加配置，没有的话手动添加一下。
在设置中，搜索 formatter ，选择 Prettier-Code formatter
这样，以后在保存文件时，就会使用 Prettier 进行代码格式化。
2.3 EditorConfig 插件安装（vscode）
如下图，在 vscode 中搜索 EditorConfig 插件，安装 EditorConfig 插件。点击后，会在项目文件夹 .vscode 下的 extensions.json 中添加配置，没有的话手动添加一下。
EditorConfig 通过 .editorconfig 文件定义编码风格，如缩进、行尾字符等，确保不同编辑器和开发者使用统一风格。支持多种编程语言和编辑器，配置简单，有助于提升代码一致性。
在项目文件夹下新建配置文件 .editorconfig 。
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
这样配置以后，所有协同开发人员下载代码后，会下载同样的插件，使用同样的代码检测配置，保证团队所有人员使用同一种风格进行开发。
2.4 Husky 及 lint-staged 集成
Husky 是一款简化 Git 钩子管理的工具，让开发者在 Git 操作（如提交、推送）前自动执行代码检查、格式化等任务。它易于集成，提高了代码质量和团队协作效率，是现代开发工作流程中的常用组件。
lint-staged是一个在 Git 暂存文件上运行 linters 的工具，确保只有暂存的文件被检查和格式化，提高了开发流程的效率，并保持代码库的一致性。通过配置.lintstagedrc文件，可以指定不同文件类型对应的处理工具，如 ESLint、Prettier 等。结合 Husky 使用，可在提交前自动执行代码质量检查。
通过 pnpm 安装 Husky 及 lint-staged 插件：
pnpm install husky lint-staged -D
在 package.json 中配置 lint-staged，在代码提交前对 js，cjs，ts，vue 文件进行 eslint 校验并尽可能修复，对 html，json，css，scss 文件使用 prettier 进行代码格式化。
然后，使用 husky 配置 git 钩子。
npx husky init
init 后，会生成一个 .husky 文件夹，在改文件夹下配置各种 git 钩子，pre-commit 文件是自动生成的，修改其配置。
配置好后，在执行git commit时，会先进行代码校验，校验通过后才可以提交。
2.5 commitlint 集成
commitlint是一个确保 Git 提交消息遵循特定规则的工具，通过预定义的配置来强制执行提交消息格式，有助于维护代码库的提交历史清晰和一致性。结合 Git 钩子，如 Husky，可在提交前自动检查消息是否符合规范。@commitlint/config-conventional是一个用于 Commitlint 的预设配置，遵循 Angular 提交消息规范。它帮助团队保持提交消息的一致性，便于生成清晰的变更日志，同时支持语义化版本控制。通过集成此配置，开发者在提交代码时需遵循类型（feat、fix等）、作用域、主题、正文和脚注的结构。
通过 pnpm 安装 commitlint 插件：
pnpm install @commitlint/cli @commitlint/config-conventional -D
在项目文件夹下新建配置文件 commitlint.config.cjs。
module.exports = { extends: ["@commitlint/config-conventional"]};
在 husky 下添加 git 钩子，在 .husky 文件夹下 新增 commit-msg 文件，修改内容如下：
解决ts2307报错信息
在项目的 src 目录下（或任意合适位置）创建 types/global.d.ts 文件（或 env.d.ts），并添加以下内容：
declare module '*.css' {
const classes: { [key: string]: string };
export default classes;
}
