一个增强 console.log 可读性的 Vite 插件

[lyc575757]

这是一个增强 console.log 可读性的 Vite 插件，将console.log所在的文件名，行号，变量名以更醒目的方式显示，并针对不同的文件类型有不同的背景色高亮.

使用方法：

# npm
npm install -D vite-plugin-turbo-console
# yarn
yarn add -D vite-plugin-turbo-console
# pnpm
pnpm i -D vite-plugin-turbo-console

vite.config.ts

import { defineConfig } from "vite";
import TurboConsole from "vite-plugin-turbo-console";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [TurboConsole()],
});

GitHub 仓库地址： https://github.com/yuyinws/vite-plugin-turbo-console

已经使用 AST 实现重构了代码逻辑，欢迎大家使用

[shakukansp]

在 main.js 里面 console.log(NDataTable);
报错 Uncaught TypeError: console.log(...) is not a function
at main.ts:20:1

[lyc575757]

@shakukansp 能否提供一下 main.js 的完整代码，我自己试了一下是没问题


[weixiangzhe]

有 proxy 对象直接转 plain 对象的实现吗，现在 console ref 对象看得我头疼

[shakukansp]

@lyc575757
https://stackoverflow.com/questions/31013221/typeerror-console-log-is-not-a-function

console.log(NDataTable);

;((NDataTable as any).props as DataTableProps).scrollbarProps = {
trigger: 'none',
};

不报错

console.log(NDataTable);

((NDataTable as any).props as DataTableProps).scrollbarProps = {
trigger: 'none',
};

去掉括号前的 ; 号，报错

[lyc575757]

@weixiangzhe https://juejin.cn/post/7141188229822152735 看看这个能否解决你的问题

[yuoooo]

我来试试

[lyc575757]

@shakukansp 确实是 stackoverflow 里说的那个问题，不加分号，esbuild 在解析代码的时候会把 2 行合成 1 行，导致报错了


[lisongeee]

解析代码不用 AST 反而用正则表达式，你这 bug 有点多啊，

看了一下思路，简单按行分割代码，然后替换 /^\s*console\.log\([^\)]*\)\s*;?\s*$/

多行注释内的 console.log ，多行字符串内部的 console.log 会被替换，这是明显的 bug

```js
console
.log(xxx);

const x = console.log(xxx)
```

这种该替换的代码却没有替换

这种用 vite 插件自带的 this.parse 搭配 acorn-walk + magic-string

思路是找到所有 符合条件的 CallExpression ，判断一下内部满足 console.log(xxx) 这种 AST

然后使用 magic-string 替换 arguments 生成 sourcemap

最好判断一下上下文有没有覆盖 console 变量，有覆盖则不替换

[lyc575757]

@lisongeee 感谢反馈，用正则实现确实存在很多问题，一开始想的是使用 babel 的 parse 但是遇到很多问题，原来 vite 自带就有 parse 方法，我用你的思路再实现一下

[lsymy]

star ，不错的想法。等修完 bug 试用下:)

[himself65]

这个 idea 不错，我提出几个建议：

1. 用 SWC 或者 babel 实现
2. 自定义 transform 的函数，因为实际生产环境大都是包装了一层 console.log ，比如（ npm/debug 之类的）

[liangtao927190]

@weixiangzhe https://www.jianshu.com/p/859435d97e90 开启浏览器的这个功能，ref 就会显示的比较舒服。

[weixiangzhe]

@lyc575757
@liangtao927190
好的类，学习了

[lyc575757]

@lisongeee 大佬再请教个问题，在 Vue SFC 文件中，我的这个插件运行是在 vite-plugin-vue 之后，此时原来的 Vue 文件中的 console.log 行号很可能在编译过程中发生了变化，如何能获取到原始的行号呢？



[lisongeee]

> 如何能获取到原始的行号

可以根据 sourcemap 获取当前行数对应的原始行数