好用的前端工具链

Ying2026-08-05tech指南

Deep Dive into My Favorite Toolchain: Pitfalls, Highlights, and Unresolved Obsessions.

这篇文章不会写工具如何用，怎么用可以去看官网。这里只有我亲测好用的私藏宝贝、我在折腾它们时的挖坑填坑和让我兴奋的技术延伸。

Vite+

全局安装，详见Vite+官网open in new window

为什么我不改package.json 中的命令，本地的vite+也能自动识别vp转化为npm run？

vp dev 并不是被“转化”为 npm run dev，而是 Vite+ 直接“绕过”了 package.json 中的脚本，去调用了底层真正的命令。

对比三种“启动方式”的区别:

命令	实际执行的动作	是否依赖 package.json 的 scripts
`npm run dev / pnpm dev`	读取 `package.json` 中的 "dev" 脚本，执行其中的字符串命令	完全依赖
`vp dev`	忽略 `package.json`，直接在 `node_modules` 中找 vite 二进制文件并执行。	完全不依赖（只依赖项目是否安装了 vite 包）

vp 的好用快捷键速记

press r + enter 重启开发服务器
press u + enter 重新显示服务器地址
press o + enter 自动打开浏览器
press c + enter 清空终端屏幕
press q + enter 退出并终止开发服务器

运行 Vite+ 的环境条件

条件维度	具体要求	扩展问题
操作系统	macOS（10.15+）、Linux、Windows（WSL2 或 PowerShell）	🤔为什么强调 macOS10.15+？
Shell 环境	Bash、Zsh、Fish 或 PowerShell	-
Node.js	Node.js 18.0.0 或更高版本（底层 Vite 的要求）	🤔为什么要求Node18+？
网络	能访问 npm 官方仓库（或配置了国内镜像	🤔vp 命令启动是否需要网络？

INFO

🤔为什么强调 macOS10.15+？

因为从 macOS Catalina（10.15）开始，苹果就把默认 Shell 从 Bash 换成了 Zsh。Vite+ 依赖 Zsh 的一些现代特性（如更完善的 glob 模式、数组操作）来优化脚本执行，因此官方建议 10.15+。实际上，如果你手动装了新版 Bash，在旧版 macOS 上也能跑，但官方不再为此做兼容测试。

😈 额外问题：
placeholder

🤔为什么要求Node18+？ placeholder

🤔vp 命令启动是否需要网络？ placeholder

Vite+ 命令运行条件

不是所有项目都能用 Vite+ 的所有命令，这里只讨论 Vite 构建的项目。

命令	项目必须具备的条件
`vp dev` / `vp build`	1. `package.json`中必须安装 vite 作为依赖。2. 项目根目录必须有 `vite.config.js` 或 `vite.config.ts`。3. 必须有一个 `index.html` 作为入口（标准 SPA）。
`vp check`（代码检查）	项目中有 `.eslintrc` 或 `oxlintrc.json` 配置文件。
`vp test`	项目中安装了`vitest`依赖
`vp pack`（打包）	项目有 `src/index.ts` 等入口文件，用于发布 npm 包。

个人使用vp如何在团队开发中避免污染仓库？

千万不要在 CI/CD（如 GitHub Actions、Jenkins）里用 vp（其实就是不要在本地项目的yml文件里写vp）
全局安装时出现提示vp env on选择no。如果选了yes，这里Vite+ 会生成 node 替身文件，可能会和公司的 .nvmrc 文件或 nvm 产生“谁说了算”的冲突。

WARNING

我在团队开发拉取代码的时候会发现别人的.DS_Store,这是Mac 系统在每个文件夹下自动生成的隐藏文件，记录图标位置。

解决方法，在项目根目录的.gitignore写：

# macOS
.DS_Store
Thumbs.db

# 编辑器/临时文件
.vscode/
.idea/
*.local

Oh My Zsh

为什么`z file`不能快速切换文件夹了？

因为z file名,不是“全局搜索工具”，它只记得你去过的地方。

敲 z 加文件夹名字就能瞬间飞过去，这其实是 Oh My Zsh 自带的一个超级插件，叫做z，它能把项目路径极其复杂的简化。启用方式：检查你的 ~/.zshrc 配置文件中的 plugins=(git z)，确保 z 在里面。重启终端后，你就可以享受这种“记忆力”了。

硬核功能

除了美化控制台里的命令行、跳转路径外，还有很多其他功能，这里写下来是因为我发现我平时都没物尽其用。

git 插件缩写：gst → git status，gco → git checkout，gcb → git checkout -b， 目测能省下不少键盘寿命。
history 搜索：输入 r 加关键字，快速找回之前敲过的长命令（比如 r vite 就能翻出 pnpm create vite@latest）

好用的前端工具链

ON THIS PAGE