一个增强console.log()可读性的vite插件支持同时打印出文件名，行号与变量名. 对不同的文件类型有背景高亮(

功能

支持同时打印出文件名，行号与变量名.
对不同的文件类型有背景高亮(如.js(x)、.ts(x)、.vue、.svelte等)

安装使用

# 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";

export default defineConfig({
  plugins: [TurboConsole()],
});

实现原理

在vite插件的transform阶段对源码进行AST解析，找到所有console.log()的表达式，再利用magic-string对console.log()表达式进行修改并生成sourcemap，最后返回处理好的代码与生成的sourcemap。

其他

主要受到了以下2个项目的启发

babel-plugin-enhance-log

turbo-console-log

欢迎大家使用。