1. 引言
最近前端圈子里总有人唱衰：什么“前端已死”“AI 要取代前端工程师”“框架卷不动了”……说实话，前端完不完蛋我不知道，但先把当下的开发体验搞爽，这总没错。
这篇文章不聊焦虑，只聊怎么在当前的技术栈里写出更爽的代码、搭出更顺手的工程、沉淀更省心的方案。先爽了再说。
2. 为什么“先爽了再说”是一种务实态度
技术选型最怕的不是选错，而是反复纠结、迟迟不动手。
- 纠结框架：React 还是 Vue？不如先把手头需求跑通。
- 纠结工程化：Vite 还是 Webpack？先选一个能让你热更新飞快的。
- 纠结写法：函数组件还是类组件？先写能跑、能维护的。
“先爽了再说”不是不负责任，而是用最小的成本验证想法，把精力留给真正有价值的问题。
3. 让开发体验变爽的几个实践
3.1 用对工具链
- 包管理器：优先 pnpm，安装快、磁盘省。
- 构建工具：新项目直接 Vite，冷启动和 HMR 体验拉满。
- 代码规范：ESLint + Prettier 一键格式化，提交前自动修复。
3.2 少写重复代码
- 封装通用请求层，统一处理 loading、错误、取消。
- 抽离业务 Hooks，把状态逻辑从组件里搬出去。
- 用 TypeScript 类型约束接口，少踩运行时坑。
3.3 让调试更顺手
- 用好 React DevTools / Vue DevTools。
- 网络请求统一走拦截器，日志一目了然。
- 关键路径加可读的错误提示，别让用户看白屏。
4. 一个“先爽”的最小示例
下面是一个简单的 React + TypeScript 请求 Hook，能明显减少样板代码：
import { useCallback, useEffect, useState } from "react"; export function useFetch<T>(url: string) { const [data, setData] = useState<T | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState<Error | null>(null); const load = useCallback(async () => { setLoading(true); setError(null); try { const res = await fetch(url); if (!res.ok) throw new Error(`HTTP ${res.status}`); setData((await res.json()) as T); } catch (e) { setError(e as Error); } finally { setLoading(false); } }, [url]); useEffect(() => { load(); }, [load]); return { data, loading, error, reload: load }; }使用起来非常清爽：
const { data, loading, error, reload } = useFetch<User[]>("/api/users");5. 别让“爽”变成“乱”
先爽了，也要记得收尾：
- 爽完补测试：核心逻辑至少覆盖主流程。
- 爽完写注释：复杂判断和业务约定留一句说明。
- 爽完做重构：跑通之后，把临时写法收敛成可复用方案。
6. 总结
前端完不完蛋，不是靠焦虑决定的，而是靠一个个跑通的需求、一次次顺畅的迭代积累出来的。
与其纠结行业走向，不如先把当下的代码写爽、把工程搭顺、把体验做好。先爽了再说——剩下的，交给时间。
