当我们在前端项目中使用 console 打印日志时，往往需要在每条日志中添加时间、毫秒数、文件名等信息，以方便调试和定位问题。虽然在 console 对象本身中有一些内置的方法可以打印这些信息，但是输出格式统一并且易读性强的插件往往可以大大提高开发效率。
@types/console-stamp 是一个相对来说比较轻便的 npm 包，它利用 console 打印出带时间戳、文件名和行号等信息的日志，以方便调试和定位问题。
安装和引用
@types/console-stamp 是基于 TypeScript 编写，由于它只提供了 TypeScript 类型定义，因此如果您的项目中使用的是 JavaScript，可以直接安装 console-stamp 包。如果您的项目使用的是 TypeScript，那么必须同时安装 console-stamp 和 @types/console-stamp 两个包。
# 安装 JavaScript 版本的 console-stamp npm install console-stamp # 安装 TypeScript 版本的 console-stamp 和类型定义 npm install console-stamp @types/console-stamp
安装完成后，只需要在入口文件中引入即可使用。建议在项目中全局引入以保证整个项目的日志输出格式一致。
// 导入 @types/console-stamp 和 console-stamp import "console-stamp"; import "console-stamp/types";
使用方法
一旦引入了 @types/console-stamp 和 console-stamp，就可以使用 console 中增加的方法来打印带时间戳、文件名和行号等信息的日志了。这里列出了增强后的 console 对象新增的一些方法：
- console.infoWithStamp
- console.warnWithStamp
- console.errorWithStamp
使用方法与 console 本身的方法类似，只是多了一个时间戳和文件名及行号等信息的前缀。以下是一个示例：
import "console-stamp";
import "console-stamp/types";
console.infoWithStamp("This is an info message");
console.warnWithStamp("This is a warning message");
console.errorWithStamp("This is an error message");如果您需要自定义时间戳的格式，可以在全局导入的时候传入配置项，例如：
-- -------------------- ---- ------- ------ ---------------- ------ ---------------------- -- ----------- ----- ------ - - -------- ----------- ------------ -- -- ----- -------------------------- --------------------------- -- -- ---- ---------- --------------------------- -- - ------- ---------- ---------------------------- -- -- ----- ----------
运行以上代码，控制台会输出类似以下的日志：
[2022-10-01 16:44:47.444] info: This is an info message [2022-10-01 16:44:47.445] warn: This is a warning message [2022-10-01 16:44:47.445] error: This is an error message
通过以上的配置，我们指定了时间戳的形式为 "yyyy-mm-dd HH:MM:ss.l"，这意味着每次输出日志时会以当前的年月日、时分秒和毫秒数作为前缀。在实际的开发中您可以根据自己的需要进行更改。
总结
通过本文的介绍，相信您已经了解了如何使用 @types/console-stamp 打印出带时间戳、文件名和行号等信息的日志，增强了日志的可读性和实用性。在实际的前端开发过程中，合理地利用日志模块能够大大简化调试过程，缩短调试时间，提高工作效率。
完整的示例代码可以查看该 npm 包的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6efb5cbfe1ea0611691