这是一个增强 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
1
shakukansp 2023-05-16 10:01:18 +08:00
在 main.js 里面 console.log(NDataTable);
报错 Uncaught TypeError: console.log(...) is not a function at main.ts:20:1 |
2
lyc575757 OP @shakukansp 能否提供一下 main.js 的完整代码,我自己试了一下是没问题
![image-20230516100614973]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684202775.png) ![image-20230516100644651]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684202804.png) |
3
weixiangzhe 2023-05-16 10:07:33 +08:00
有 proxy 对象直接转 plain 对象的实现吗,现在 console ref 对象看得我头疼
|
4
shakukansp 2023-05-16 10:13:48 +08:00
@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', }; 去掉括号前的 ; 号,报错 |
5
lyc575757 OP @weixiangzhe https://juejin.cn/post/7141188229822152735 看看这个能否解决你的问题
|
6
yuoooo 2023-05-16 10:39:11 +08:00
我来试试
|
7
lyc575757 OP @shakukansp 确实是 stackoverflow 里说的那个问题,不加分号,esbuild 在解析代码的时候会把 2 行合成 1 行,导致报错了
![image-20230516105029122]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684205429.png) |
8
lisongeee 2023-05-16 11:06:20 +08:00
解析代码不用 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 变量,有覆盖则不替换 |
9
lyc575757 OP @lisongeee 感谢反馈,用正则实现确实存在很多问题,一开始想的是使用 babel 的 parse 但是遇到很多问题,原来 vite 自带就有 parse 方法,我用你的思路再实现一下
|
10
lsymy 2023-05-16 11:37:37 +08:00
star ,不错的想法。等修完 bug 试用下:)
|
11
himself65 2023-05-16 12:36:03 +08:00
这个 idea 不错,我提出几个建议:
1. 用 SWC 或者 babel 实现 2. 自定义 transform 的函数,因为实际生产环境大都是包装了一层 console.log ,比如( npm/debug 之类的) |
12
liangtao927190 2023-05-16 13:15:43 +08:00
@weixiangzhe https://www.jianshu.com/p/859435d97e90 开启浏览器的这个功能,ref 就会显示的比较舒服。
|
13
weixiangzhe 2023-05-16 15:43:13 +08:00
|
14
lyc575757 OP @lisongeee 大佬再请教个问题,在 Vue SFC 文件中,我的这个插件运行是在 vite-plugin-vue 之后,此时原来的 Vue 文件中的 console.log 行号很可能在编译过程中发生了变化,如何能获取到原始的行号呢?
![image-20230516164821722]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684226901.png) ![image-20230516165046351]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684227046.png) |
15
lisongeee 2023-05-16 17:14:54 +08:00
> 如何能获取到原始的行号
可以根据 sourcemap 获取当前行数对应的原始行数 |