干了五年前端，这 10 个工具我现在还在用

AI摘要

本文介绍了作者使用五年前端开发过程中，仍然持续使用的10个工具。其中包括了VS Code、Cursor、Chrome DevTools、Postman、Snipaste、Wappalyzer、Vite、Git+GitHub/Gitee以及Vercel等，涉及代码编写、调试、性能分析、版本控制和部署等方面，分享了这些工具的使用体验和效果。

入行那会儿，我还在用 Dreamweaver 写代码。

现在？别说 Dreamweaver 了，连 jQuery 都快没人用了。

前端这行，工具更新得快得吓人。今天这个最火，明天就过时。但有些工具，我是真的一直在用，用了五六年那种。

这篇文章不整那些"2026 必装"、"提升 10 倍效率"的噱头，就说我自己真正在用的。

1. VS Code（没它我不会写代码了）

这编辑器我是真离不开。

插件装了一堆，最常用的就这几个：

Volar（写 Vue 必备）
ES7+ React Snippets（写 React 的）
Prettier（代码格式化，必装）
Live Server（改代码实时预览）
GitLens（看 Git 历史）

Prettier 这个插件，我强烈建议装上。保存自动格式化，再也不用跟同事争论缩进用空格还是 Tab 了。

配置也简单，装好启用就行。团队开发的话，在项目根目录加个.prettierrc 文件，统一格式。

2. Cursor（AI 辅助，真香）

去年开始用的，现在离不开了。

这玩意儿就是个带 AI 的 VS Code，能自动补全代码，还能用自然语言写代码。

举个例子，我想写个防抖函数：

// 直接输入注释
// 写一个防抖函数，延迟 300ms

// AI 自动生成代码
function debounce(fn, delay = 300) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

不是完全不用写，但一些重复性代码，让它生成挺方便。

3. Chrome DevTools（调试神器）

这工具天天用，但好多人只会用元素审查。

其实它还有好多实用功能：

Network 面板看请求（查接口慢在哪）
Performance 面板分析性能（找卡顿原因）
Application 面板看本地存储
Mobile 模式模拟手机

我一般遇到页面加载慢，先打开 Network，按时间排序，看哪个请求最慢。十有八九能找到问题。

4. Postman（接口调试）

写前端不可能不调接口。

Postman 我主要用来：

测试接口通不通
看接口返回数据
保存常用接口，方便复用
团队协作（共享接口集合）

有个接口文档当然好，但现实是，很多项目的接口文档形同虚设，最后还是得靠 Postman 自己试。

5. Snipaste（截图工具）

这玩意儿不是开发工具，但我天天用。

功能就两个：截图 + 贴图。

贴图这个功能特别实用。比如我要对照设计稿写页面，截个图贴在旁边，随时看。比来回切换窗口方便多了。

免费、无广告，开发者是国人，必须支持。

6. Wappalyzer（看别人网站用的啥技术）

浏览器插件，装好后，访问任何网站都能看到它用的技术栈。

前端框架（Vue/React/Angular）
CSS 框架（Bootstrap/Tailwind）
构建工具（Webpack/Vite）
服务器（Nginx/Apache）
统计工具（百度统计/GA）

我一般用来分析竞品，看看人家用的啥技术，有没有可以借鉴的。

7. Vite（构建工具）

以前用 Webpack，配置复杂得一批。

Vite 就一个字：快。

启动快、热更新快、打包也快。配置还简单，基本开箱即用。

安装：

npm create vite@latest

然后选框架（Vue/React），选 TypeScript 还是 JavaScript，完事。

我现在新项目都在用 Vite，老项目也慢慢在迁。

8. Git + GitHub/Gitee（版本控制）

这个不用多说了吧。

不会 Git 的程序员，跟不会用 Word 的作家差不多。

常用命令就那几个：

git init        # 初始化
git add .       # 添加文件
git commit -m "提交信息"  # 提交
git push        # 推送远程
git pull        # 拉取代码
git log         # 看历史

我一般用 GitHub 托管公开项目，私有项目放 Gitee（国内访问快）。

9. Vercel（一键部署）

以前部署项目，得自己搞服务器、配 Nginx、弄 HTTPS。

现在？Vercel 一键搞定。

连接 GitHub 仓库
自动构建部署
免费 HTTPS
自动 CDN

我写的一些小项目、Demo，都扔 Vercel 上，不用自己维护服务器。

10. Lighthouse（性能检测）

Chrome 内置的性能检测工具。

打开方式：Chrome DevTools → Lighthouse 标签 → 生成报告。

会给你几个评分：

Performance（性能）
Accessibility（可访问性）
Best Practices（最佳实践）
SEO

每个项目上线前，我都会跑一下，看看有没有明显的性能问题。

其他一些零碎但好用的

在线工具：

CSS Gradient（渐变生成器）
Clippy（clip-path 生成器）
TinyPNG（图片压缩）
Squoosh（图片格式转换）

学习资源：

MDN Web Docs（权威文档）
Can I use（查浏览器兼容性）
CodePen（找灵感、看示例）

最后说点

工具在精不在多。

我上面列的这些，也就是 10 来个。用熟了，效率自然高。

别学我当年，看到好工具就收藏，收藏了就等于学会了（其实并没有）。

选几个趁手的，练熟了，比什么都强。

对了，工具只是手段，写出好代码才是目的。别成了"工具控"，光顾着装工具，忘了写代码。

以上是我个人在用的工具，仅供参考。如果你有更好用的，欢迎交流。