前端开发工具有哪些

打开 VS Code 写第一行代码之前，前端你可能已经装了三四个插件。工具这事儿挺常见的前端——前端开发这行，工具链的工具更新速度比 JavaScript 框架还快。我数了数自己电脑上跟前端沾边的前端工具，从编辑器到构建器再到调试面板，工具少说二十个。前端挑几个真正每天在用的工具说说。

代码编辑器这块，前端VS Code 基本是工具默认选项了。2023 年 Stack Overflow 的前端调查里，超过 73% 的工具开发者把它当主力编辑器。它的前端好处不是功能多，而是工具插件生态够野——想写 Vue 有 Volar，调 Tailwind 有官方 IntelliSense，前端连写 Markdown 都能实时预览。WebStorm 依然有人用，尤其从 Java 转过来的，JetBrains 那套快捷键肌肉记忆改不掉。但 VS Code 免费，启动快，远程开发插件能把服务器上的代码当本地改，这个体验回不去了。

浏览器开发者工具是另一块阵地。Chrome DevTools 的 Elements 面板能直接改样式看效果，Network 面板看请求瀑布图，Performance 面板录一段操作看火焰图。有个细节很多人没注意：在 Console 里输入 $(‘selector’) 其实是 document.querySelector 的简写，调试时少敲不少字。Firefox 的 DevTools 在 CSS 网格和 Flexbox 可视化上做得更细，布局调试我经常切过去看。Safari 的响应式设计模式对苹果设备模拟最准，调 iOS 上的样式问题绕不开它。

构建工具这两年变化最大。Webpack 还是老大哥，配置复杂但什么都能干。Vite 靠 esbuild 预构建和原生 ESM 把冷启动压到几百毫秒，新项目基本都选它。我去年把一个 Webpack 项目迁到 Vite，启动时间从 12 秒降到 1 秒出头，热更新几乎无感。Rollup 适合打包库，输出干净。esbuild 和 SWC 这类用 Go 和 Rust 写的工具，速度是降维打击，但生态还在追。选哪个？看项目阶段——原型用 Vite，老项目继续 Webpack，发 npm 包用 Rollup。

版本控制方面，Git 本身不是前端专属，但前端对 Git 的用法有特点。GitHub Desktop 和 Sourcetree 这类 GUI 工具帮不熟命令行的人过渡，不过迟早得学 git rebase -i 和 git cherry-pick。有个坑：package-lock.json 和 yarn.lock 的冲突解决起来烦人，团队最好统一包管理器。我见过一个项目里 npm、yarn、pnpm 三种锁文件共存，CI 构建结果每次都不一样。

调试和测试工具容易被忽视。Postman 调接口，但前端更常用浏览器直接看 Network。单元测试用 Vitest 或 Jest，端到端测试 Playwright 比 Cypress 快不少，而且支持多标签页。有个具体案例：我们之前用 Cypress 跑 200 个用例要 8 分钟，换 Playwright 后降到 3 分钟，并行执行是主要原因。代码质量靠 ESLint 和 Prettier，配置一次团队共享，省得在 PR 里吵分号问题。

最后提一嘴设计协作工具。Figma 的 Dev Mode 能直接看间距、颜色变量和导出资源，切图这活儿基本消失了。Zeplin 和 Avocode 还有人用，但 Figma 把设计到代码的路径缩得最短。有个变化挺明显：以前前端要等设计给标注，现在直接看 Figma 文件，沟通成本低了很多。

工具多不是坏事，但别为了用而用。我见过新项目上来就配 Webpack + Babel + ESLint + Prettier + Husky + lint-staged，结果写个 Hello World 要等半天构建。先跑起来，遇到问题再找工具解决，这个顺序比较对。