从工具到教程：前端工程师必备的资源清单#

本宫今天不跟你们聊皇帝的恩宠，先把前端那堆破事儿给捋清楚，省得你们天天在代码里抓瞎。别说我嘴毒，今天这清单可是本宫多年“踩坑+填坑”的结晶，吐口水也要吐得有点价值。

一、编辑器，别让插件把你卡成龟速老爷车
VS Code 是本宫的首选，但别以为装五十个插件是件豪气的事。打开 VS Code，Ctrl+Shift+P → “Extensions: Install Extensions”，先装 Vetur（Vue 项目必备），再装 ESLint 和 Prettier，注意装完一定要在 .vscode/settings.json 里把 “editor.formatOnSave”: true 打开，否则保存时又要手动格式化——那叫自找麻烦。要是你们还在用 Sublime Text，趁早把老古董扔进垃圾堆，别让同事看到你那光速闪烁的光标。

二、包管理和构建，别让 npm 的 loading 转晕你
npm 用得最广，然而装依赖时卡在 “fetching metadata” 上简直是家常便饭。想要快一点？试试 pnpm，命令 pnpm add lodash，磁盘占用少得可怜，速度却能让你惊呼 “太快了”。不过如果你手里还有老项目在用 yarn，千万别硬切换到 pnpm，workspace 配置不兼容会直接报错——本宫见过好几个新人在这儿哭天抢地。至于构建工具，Vite 已经把 Webpack 的配置玩成了玩具，只要 npm create vite@latest 就能跑起来，别再把 webpack.config.js 当成神器。

三、框架选择，别把皇帝的选妃标准搬进来
React 大而全，生态丰富，但上手门槛高得让人抓狂；Vue 轻巧、文档友好，却总被某些“资深前端”当成“小儿科”。Svelte？适合想要把心思放在写组件而非写配置的同学。要想快速跑起一个后台管理页面，直接 npm create vite@latest 选 React + TypeScript，省得在 .tsx 里跟 any 拼命。记住，框架是用来解决业务问题的，别因为“大家都用”就跟风选了——本宫可不想看到你把后宫全搬进前端。

四、调试神器，别把 console.log 当唯一救命稻草
Chrome