文章目录
1. 搭建一个Vue3+Vite项目
pnpm create vite
建议使用 pnpm 作为包管理工具来创建并管理项目
2. 安装 ESLint
ESLint 是一个可插拔的、可配置的 JavaScript/TypeScript 静态分析工具。它的主要作用和基本配置如下：
ESLint 的作用
- 代码质量检查：检测语法错误、潜在问题和不良编码习惯
- 代码风格统一：确保团队成员遵循一致的代码风格规范
- 错误预防：在运行前发现潜在的逻辑错误和安全隐患
- 自动修复：可以自动修复部分代码问题和格式化问题
- 可扩展性：支持自定义规则和插件扩展
2.1. ESLint 基本配置
eslint.config.{m|c}?js- ESLint 配置文件方式格式
2.2. 基本配置项示例
// eslint.config.js
import js from '@eslint/js' // 推荐校验js规范
import prettierRecommended from 'eslint-plugin-prettier/recommended' // 推荐校验prettier
import pluginVue from 'eslint-plugin-vue' // 推荐校验vue规范
import { defineConfig } from 'eslint/config'
import globals from 'globals' // 全局变量
import tseslint from 'typescript-eslint' // 推荐校验ts规范
export default defineConfig([
{
files: ['src/**/*.{js,mjs,cjs,ts,mts,cts,vue,jsx,tsx}'], // 校验src下的各种文件类型
plugins: { js }, // 引入js规则
extends: ['js/recommended'], // 继承js规则
languageOptions: {
// 指定环境
globals: {
...globals.browser,
...globals.node
}
}
},
tseslint.configs.recommended, // 继承ts规则
pluginVue.configs['flat/essential'], // 继承vue规则
{
files: ['**/*.vue'], // 校验vue文件
languageOptions: {
parserOptions: {
parser: tseslint.parser
}
}
},
{
ignores: ['dist/**', 'node_modules/**'] // 忽略文件
},
{
rules: {
'no-console': 'off', // 禁止使用console
'no-debugger': 'warn' // 禁止使用debugger
}
},
prettierRecommended // 会覆盖eslint的规则
])
2.3. 安装 ESLint VSCode 插件
3. 安装 Prettier
pnpm add prettier eslint-plugin-prettier eslint-config-prettier -D
3.1. Prettier 的作用
Prettier 是一个代码格式化工具，专注于代码样式统一，它的主要作用如下：
- 统一代码风格：自动格式化代码，确保团队代码风格一致性
- 减少代码争议：消除关于代码格式的争论和讨论
- 支持多种语言：支持 JavaScript、TypeScript、Vue、CSS、HTML、JSON 等多种格式
- 与 ESLint 协同工作：可以与 ESLint 配合使用，各自专注不同层面的代码质量
- 自动格式化：保存文件时自动格式化或在提交前统一格式化
3.2. Prettier 基本配置
// prettier.config.js
export default {
semi: false, // 末尾添加分号
singleQuote: true, // 单引号
tabWidth: 2, // 缩进两个空格
trailingComma: 'none', // 尾随逗号
printWidth: 100, // 每行代码长度
useTab: false, // 使用tab缩进
endOfLine: 'auto', // 换行符
bracketSpacing: true // 对象字面量的大括号间是否加空格
}
3.3. 安装 Prettier VSCode 插件
3.4. Prettier 与 ESLint 集成
在项目中通常会安装eslint-config-prettier来解决 ESLint 和 Prettier 的冲突：
npm add -D eslint-config-prettier
//eslint.config.js
import prettierRecommended from 'eslint-plugin-prettier/recommended'
{
// ...
prettierRecommended // 放在最后，会覆盖eslint的规则
}
3.5. 添加 Prettier 忽略文件
/node_modules/**
/public/*
/docs/*
/src/types/env.d.ts
/docs/**/*
/plop/**/*
CHANGELOG
4. 安装 EditorConfig
EditorConfig 是一个用于维护一致的代码格式和编辑器设置的工具，它的主要作用和配置如下：
4.1 EditorConfig 的作用
- 统一编辑器配置：在不同编辑器和 IDE 之间保持一致的代码格式设置
- 团队协作标准化：确保团队成员使用相同的缩进、字符编码、换行符等设置
- 跨平台兼容性：解决不同操作系统间的编码和换行符差异
- 自动化配置：无需手动设置每个编辑器的代码格式选项
4.2. EditorConfig 配置
EditorConfig 使用 .editorconfig 文件进行配置，采用 INI 格式：
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = crlf
4.3. 主要配置项说明
root = true：标识这是 EditorConfig 配置的根目录，搜索时不会继续向上查找[*]：通配符，匹配所有文件charset = utf-8：设置文件编码为 UTF-8indent_style = space：使用空格进行缩进（可选space或tab）indent_size = 2：缩进大小为 2 个空格end_of_line = crlf：设置换行符类型（crlffor Windows,lffor Unix/Linux/Mac）
4.4. 更精细的配置示例
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.{js,ts,vue}]
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
4.5. 支持的编辑器
EditorConfig 支持大多数主流编辑器，包括 VS Code、WebStorm、Sublime Text、Atom 等，通常需要安装相应的插件来支持。
5. 安装 lint-staged 和 husky
pnpm add husky lint-staged -D
5.1. lint-stage
5.1.1 lint-staged 的作用
lint-staged 是一个用于对 Git 暂存区（staged files）中的文件运行 linters 的工具。它的主要作用包括：
-
只检查修改的文件：只对 Git 中已暂存（staged）的文件运行 linting，而不是整个项目，提高效率
-
Git 钩子集成：通常与 [husky] 配合使用，在 Git 提交前自动检查代码质量
-
自动化代码格式化：可以在提交前自动修复代码格式问题，确保提交的代码符合规范
-
提高代码质量：防止不符合规范的代码被提交到代码库中
5.1.2 lint-staged 配置
// `package.json`
{
"lint-staged": {
"src/**/*.{js,cjs,jsx,ts,tsx,vue}": [
"eslint --fix"
],
"src/**/*.{html,json,css scss,md}": [
"npx prettier --write"
]
}
}
这样在每次 Git 提交时，只会对本次修改的文件进行 linting 和格式化检查，既保证了代码质量，又不会影响到未修改的文件。
5.2. husky
5.2.1 husky 的作用
husky 是一个 Git 钩子工具，用于在 Git 流程的不同阶段执行脚本，它的主要作用如下：
- Git 钩子管理：简化 Git 钩子的配置和管理过程
- 自动化代码检查：在提交或推送代码前自动运行代码质量检查
- 流程规范化：确保团队成员在提交代码前遵循统一的质量标准
- 防止劣质代码提交：阻止不符合规范的代码进入代码仓库
- 与 lint-staged 集成：配合 lint-staged 实现增量代码检查
5.2.2 生成 .husky 目录
# 若没有安装则先安装 husky
pnpm add -D husky
# 初始化 husky 生成 .husky 目录
npx husky init
5.2.3. 配置 Git 钩子
husky 支持多种 Git 钩子，常用的包括：
pre-commit钩子： 在代码提交前执行检查- 在
.husky目录下创建pre-commit文件，并添加以下内容：
# 创建 pre-commit 钩子
npx lint-staged
-
commit-msg钩子：检查提交信息格式 -
安装commitlint
pnpm add @commitlint/cli @commitlint/config-conventional -D
- 添加 git hook: 在
.husky目录下创建commit-msg文件，并添加以下内容：
# 创建 commit-msg 钩子
npx commitlint --edit $1
- 在根目录下创建
commitlint.config.cjs文件，并添加以下内容：
// commitlint.config.cjs
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feat', // 新功能(feature)
'fix', // 修补bug
'docs', // 文档(documentation)
'style', // 格式、样式(不影响代码运行的变动)
'refactor', // 重构(即不是新增功能，也不是修改BUG的代码)
'perf', // 优化相关，比如提升性能、体验
'test', // 添加测试
'ci', // 持续集成修改
'chore', // 构建过程或辅助工具的变动
'revert', // 回滚到上一个版本
'workflow', // 工作流改进
'mod', // 不确定分类的修改
'wip', // 开发中
'types', // 类型修改
'release' // 版本发布
]
],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never']
}
}
5.2.4. 当前的 package.json
{
"scripts": {
"prepare": "husky install"
},
"lint-staged": {
"src/**/*.{js,cjs,jsx,ts,tsx,vue}": [
"npm run eslint --fix"
],
"src/**/*.{html,json,css scss,md}": [
"npx prettier --write"
]
}
// ...
}
5.3. 工作流程
- 用户执行
git commit - 触发
pre-commit钩子 - husky 运行配置的命令（如 lint-staged）
- lint-staged 对暂存区文件运行 linters
- 如果检查通过，允许提交；否则阻止提交
这种方式确保只有符合代码规范的更改才能被提交到版本控制系统中。
6. 添加 .gitignore 文件
node_modules
.DS_Store
.mp4
dist-ssr
*.local
pnpm-debug
stats.html
.idea
7. 总结
本文档系统地介绍了从创建 Vue3 + Vite 项目到搭建完整前端工程化基建的流程，覆盖了 项目初始、代码规范（ESLint）、格式化（Prettier）、编辑器统一（EditorConfig）、Git 钩子（Husky）与增量检查（lint-staged） 等关键环节，希望能对你有所帮助。
扫一扫
1038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
