国外网站源代码,网站营销成功的案例,给一瓶水做网站,山西营销网站建设设计本文详细介绍了如何使用 Vite 构建一个高效的 Vue 3.5 项目框架#xff0c;并整合了 ESLint、Prettier、EditorConfig、Husky、lint-staged 和 commitlint 等现代化开发工具。通过这些工具的集成#xff0c;我们能够确保代码质量、格式化和提交规范的一致性#xff0c;从而提… 本文详细介绍了如何使用 Vite 构建一个高效的 Vue 3.5 项目框架并整合了 ESLint、Prettier、EditorConfig、Husky、lint-staged 和 commitlint 等现代化开发工具。通过这些工具的集成我们能够确保代码质量、格式化和提交规范的一致性从而提高团队的开发效率和项目的可维护性。文章涵盖了项目搭建、工具安装配置、代码风格统一和提交信息规范化的全过程为协同开发人员提供了一个标准化、高效的开发环境。
1. Vite 项目搭建 该项目主要使用 Vue3 全家桶 TypeScript 1.1 项目准备
本项目Node 版本23.5.0 应该20就行可以根据包管理器提示升级自己的 Node 版本安装包管理工具 pnpm快速、节省磁盘空间的包管理工具与 npm 和 Yarn 类似
npm install pnpm -g
1.2 创建项目并启动
pnpm create vite 切换到项目文件夹下安装依赖启动项目
#切换到项目文件夹下
cd vue3-admin-lara#安装依赖
pnpm install#启动项目
pnpm run dev启动后访问 http://localhost:5173/ 2. 工具集成 ESLint 用于代码质量检查Prettier 专注于代码格式化EditorConfig 帮助统一编码风格而Husky 通过 Git 钩子强制执行代码检查Lint-staged 仅对暂存文件应用 lintersCommitlint 则确保提交信息遵循一定的规范。这些工具共同构成了一个强大的代码质量和提交规范流程。
2.1 eslint 集成
2.1.1 eslint 安装依赖
通过 npx 安装 eslint
npx eslint --init
配置如下 安装好后会生成 eslint.config.js 文件可在里面进行 eslint 的相关配置
import globals from globals
import pluginJs from eslint/js // 推荐的js规范
import tseslint from typescript-eslint // 推荐的ts规范
import pluginVue from eslint-plugin-vue // 推荐的vue的规范
import prettierRecommended from eslint-plugin-prettier/recommended//prettier集成中安装的插件
// esModule commonjs
// 1.
// import autoImport from ./.eslintrc-auto-import.json with { type: json }// 2.
import { createRequire } from module
const require createRequire(import.meta.url)
const autoImport require(./.eslintrc-auto-import.json)// 3.fs.readFileexport default [{ files: [**/*.{js,mjs,cjs,ts,vue}] },{languageOptions: {globals: {...globals.browser,...globals.node,...autoImport.globals}}},pluginJs.configs.recommended,...tseslint.configs.recommended,...pluginVue.configs[flat/essential],{files: [**/*.vue],languageOptions: { parserOptions: { parser: tseslint.parser } }},{// 自定义规则,根据需要增加 eslint 主要是校验代码规范 prettier 格式化代码的rules: {no-console: warn,vue/multi-word-component-names: off}},prettierRecommended // 覆盖掉eslint的规范
]2.1.2 eslint 插件安装vscode
如下图在 vscode 中搜索 eslint 插件安装 ESLint 插件。 安装后点击图标选择【添加到工作区建议】。 点击后会在项目文件夹 .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 。
export default {singleQuote: false, // 使⽤单引号semi: false, // 末尾添加分号tabWidth: 2,trailingComma: none,useTabs: false,endOfLine: auto,
};
2.2.2 prettier 插件安装vscode
如下图在 vscode 中搜索 Prettier 插件安装 Prettier 插件。 安装后点击图标选择【添加到工作区建议】。 点击后会在项目文件夹 .vscode 下的 extensions.json 中添加配置没有的话手动添加一下。 在设置中搜索 formatter 选择 Prettier-Code formatter 同时选择保存时设置文件格式。 这样以后在保存文件时就会使用 Prettier 进行代码格式化。
2.3 EditorConfig 插件安装vscode
如下图在 vscode 中搜索 EditorConfig 插件安装 EditorConfig 插件。 EditorConfig 通过 .editorconfig 文件定义编码风格如缩进、行尾字符等确保不同编辑器和开发者使用统一风格。支持多种编程语言和编辑器配置简单有助于提升代码一致性。 安装后点击图标选择【添加到工作区建议】。 点击后会在项目文件夹 .vscode 下的 extensions.json 中添加配置没有的话手动添加一下。 在项目文件夹下新建配置文件 .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在代码提交前对 jscjstsvue 文件进行 eslint 校验并尽可能修复对 htmljsoncssscss 文件使用 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 文件修改内容如下 npx commitlint --edit $1
不符合规范时禁止提交 符合规范时提交成功 下一篇将探讨 router 及 pinia 的集成敬请期待~
