前端工程师的技能特长怎么写？框架与工程化这样排

前端技能栏常见两种极端：要么只写"Vue、React、HTML、CSS、JS"五个词，要么把 npm 上所有库都列上。正确做法是分层 + 标注深度 + 关联场景，让面试官快速判断你是"会用框架"还是"懂框架原理"。

技能分层写法

❌ 平铺

熟练 HTML、CSS、JS、Vue、React、Webpack、Git...

✅ 分层

• 语言：HTML5、CSS3、JavaScript(ES6+)、TypeScript
• 框架：Vue3、React18、Next.js
• 工程化：Vite、Webpack、Rollup、pnpm
• 性能/可视化：Web Vitals、ECharts、Canvas/WebGL
• 工具：Git、CI/CD、Chrome DevTools

标注深度，谨慎用"精通"

❌ "精通 Vue、精通 React" ✅ "Vue3（3年生产，源码级理解响应式原理）｜React18（主导 C 端重构，熟悉 Fiber 调度）"

工程化是中级分水岭

很多前端只写框架，忽略工程化——而这恰恰是 3 年以上岗位的加分点：

• 构建：Vite / Webpack 配置优化、按需加载
• 质量：ESLint + Prettier + Stylelint、单测（Vitest/Jest）
• 监控：Sentry、性能埋点（LCP/FID/CLS）
• 协作：微前端（qiankun/Module Federation）、Monorepo（pnpm + Turborepo）

性能优化要写场景

❌ "熟悉前端性能优化" ✅ "首屏优化：路由懒加载 + 骨架屏 + 图片懒加载，LCP 4.2s→1.1s；包体积 Tree-Shaking 减少 35%"

完整技能清单范例（中级前端）

语言：TypeScript、JavaScript(ES2022)、HTML5、CSS3（含 Flex/Grid） 框架：Vue3（Composition API）、React18、Next.js（SSR） 工程化：Vite、Webpack、pnpm、Monorepo、qiankun 微前端 可视化/性能：ECharts、WebGL、Web Vitals 优化、Sentry 工具：Git、GitLab CI、Chrome DevTools、Figma 还原

常见坑

• 只列框架名不写深度，面试官无法判断段位。
• 技能与项目对不上：写"微前端"项目里却没体现。
• 把"看过文档"写成"精通原理"。

前端技能栏是面试提纲——你写什么对方就问什么。写你真熟、项目能佐证的技术，比堆 30 个库更稳。

用「见效简历」的模板先把技能分层固定，再填真实用量。