实用前端开发技巧

欢迎来到《前端杂谈》，我是小麦。

说到前端的开发技巧，那可一抓一大把。

但是今天我不想聊那些奇技淫巧，而是分享几个我平时经常用，也许你也用得上的实用开发技巧。

Prettier 是前端主流的代码格式化工具，

但我一般不会把它安装到项目依赖中。

实际上只需要添加一个 prettierrc 配置文件，配合 Prettier 的官方 vscode 插件即可享受丝滑的格式化体验。

接口调试是前端的日常工作之一。

我相信很多人都用过诸如 Apifox、Postman 等图形化的接口调试工具。

它们功能很多看起来很强大，但是对于简单的接口测试来说有点杀鸡用牛刀了。

我会去使用一个叫做 REST Client 的插件，它是一个代码化的接口调试工具。

我只需要在任意以 http 为后缀的文件中，书写 HTTP 请求报文，然后点击 Send Request 标签即可发送该请求。

接着插件会打开一个标签页展示完整的请求和响应报文。

这样我可以非常快捷地复制和修改请求，也可以在一屏内看到完整报文，不用到处切换功能找线索，排查问题非常高效。

还有一些也许你还没用过，但我觉得非常好用的插件也放这里了，感兴趣可以玩玩。

前端开发很少能离开 Node.js，尽管它有很多替代品。

你可能不知道的是，Node.js 自带一个交互式解释器（REPL），

在命令行输入 node 回车即可进入交互界面，在这里可以执行 JS 代码，也可以直接使用 node 的内置模块无需导入。

特别适合做简短的程序逻辑验证。

比如我会经常忘记 sort 函数的倒序到底是 a-b 还是 b-a，那么在这里验证一下就很方便。

也不用专门开一个浏览器控制台，我相信很多朋友经常这样干吧。

你应该听过或者用过 nvm，这是一个经典 Node.js 版本管理工具。

不过由于它基于 Bash 脚本，受制于系统环境，容易出现 bug，实际体验并不是很好。

2025 年了，我会选择它的替代品 fnm，它的安装配置和交互体验比 nvm 更好，也更少出问题，推荐大家尝试。

npx 是 npm 在 5.2 版本中引入的包运行器，它可以执行 npm 包中预先定义的脚本程序。

你可能用它创建过初始项目，除此之外，我想再补充其他一些实用工具。

首先是 npx tsx，它可以在无需安装 TypeScript 以及不提供 tsconfig.json 的情况下执行 TS 脚本。

它内部通过 esbuild 将 TS 代码编译成 JS 之后再执行，为我们省去了许多配置麻烦。

不过目前 Node.js 终于想通了，也开始实验性地原生支持 TypeScript，让我们拭目以待。

下面这个 npm-check-updates 工具，可以在命令行界面中，交互式地升级项目依赖。

这里绿色表示有新的 patch 版本可升级。蓝色表示有新的 minor 版本可升级。而红色表示可能产生破坏性升级，需要谨慎选择。

关于 npm 版本号的逻辑，我之前做过讲解，回头可以看看。

下面这个 npx patch-package 是一个专门用来给依赖包打补丁的工具。

当你遇到一个依赖包的 bug，又不方便改动它的源代码时，就会派上用场。

比如 html-tags 这个包里面使用了 import with 语法，一些打包器并不支持会导致构建失败。

我们可以原地修改这个文件，临时去掉这个后缀。

然后执行 npx patch-package html-tags，它会自动生成这样一个 patch 补丁。

之后我们只需要每次安装依赖后执行一次 patch-package 即可自动稳定地应用该补丁。

下面这个 npx serve 也是非常好用的工具。

它可以启动一个本地 web 服务器，把特定目录变成一个静态网站，很适合临时性地调试或者学习实践。

OK，那么这就是本期视频的全部内容了，大家有什么好用的开发技巧，不妨来评论区分享分享。

我是小麦，一位热爱技术和分享的软件工程师，我们下期再见。