Unplugin Turbo Console：让你的 `console.log` 脱胎换骨

在前端开发的日常中，console.log 是我们最忠实却也最"原始"的调试伙伴。面对庞大且复杂的应用，海量且信息模糊的日志输出往往让人头疼不已。Unplugin Turbo Console 正是为此而生------它是一个旨在全面提升 console.log 开发体验（Developer Experience, DX） 的构建工具插件。

得益于 Unplugin 架构，它能无缝集成到 Vite、Nuxt、Webpack、Astro、Next.js 等几乎所有现代前端构建工具中，真正做到"一次配置，随处使用"。

核心功能：不止是打印，更是"智能调试"

Unplugin Turbo Console 的核心价值在于将枯燥的文本输出，升级为富含信息且可交互的调试面板。

精准定位与智能高亮 ：它会在控制台输出中自动附加 文件名、行号和变量名 ，让你一眼定位代码来源。同时，它能根据 .js、.vue、.ts 等不同文件类型对输出进行语法高亮 ，让日志信息在视觉上更加清晰易读。
一键直达源代码 ：这是它最亮眼的功能之一。通过在控制台点击日志输出中的链接，它可以直接唤起你的代码编辑器（如 VS Code）并跳转到对应的行号 ，省去了手动在成千上万行代码中翻找的麻烦，极大地缩短了调试反馈循环。
灵活的自定义选项 ：你可以为日志统一添加自定义的前缀和后缀 ，方便在团队协作或复杂项目中快速过滤和识别关键信息。

配置指南：在不同项目中轻松上手

Unplugin Turbo Console 的安装和配置非常直观。首先，通过你喜欢的包管理器安装它：

shell

bash 复制代码

# npm
npm install -D unplugin-turbo-console
# 或使用 pnpm
pnpm i -D unplugin-turbo-console

接下来，根据你的项目使用的构建工具，在配置文件中引入即可。

Vite 项目配置

在 vite.config.ts 中将其添加到 plugins 数组：

typescript

javascript 复制代码

// vite.config.ts
import { defineConfig } from 'vite'
import TurboConsole from 'unplugin-turbo-console/vite'

export default defineConfig({
  plugins: [
    TurboConsole({
      // 配置选项
    })
  ],
})

Nuxt 项目配置

在 nuxt.config.ts 中将其添加到 modules 并设置 turboConsole 选项：

typescript

arduino 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'unplugin-turbo-console/nuxt'
  ],
  turboConsole: {
    // 配置选项
  }
})

Webpack / Next.js 项目配置

在 Webpack 配置文件中，将其作为插件添加：

javascript

lua 复制代码

// webpack.config.js 或 next.config.js
module.exports = {
  plugins: [
    require('unplugin-turbo-console/webpack')({ /* 配置选项 */ }),
  ],
}

对于 Next.js，需要将其添加到 Webpack 配置的 plugins 中：

javascript

lua 复制代码

// next.config.js
const nextConfig = {
  webpack(config) {
    config.plugins.push(
      require('unplugin-turbo-console/webpack')()
    )
    return config
  }
}

配置选项详解

插件提供了丰富的配置项，让你可以根据团队习惯和项目需求进行微调：

选项	类型	默认值	描述
`prefix`	`string`	`''`	为所有 `console` 输出添加统一的前缀。
`suffix`	`string`	`''`	为所有 `console` 输出添加统一的后缀。
`disableLaunchEditor`	`boolean`	`false`	是否禁用"点击跳转编辑器"功能。
`disableHighlight`	`boolean`	`false`	是否禁用基于文件类型的"高亮输出"功能。
`port`	`number`	`3070`	启动编辑器服务所使用的端口号。
`extendedPathFileNames`	`string[]`	`[]`	当一个文件的名称（或所在文件夹名）匹配数组中的元素时，在输出中显示其扩展路径，以避免文件名重名造成的混淆。例如，在包含多个 `index.vue` 文件的项目中，设置 `['index']` 可以让输出显示如 `Feature1/index.vue` 和 `Feature2/index.vue`，提升可读性。

通过这一套组合拳，Unplugin Turbo Console 将原本简陋的 console.log 武装成了开发者的"调试利器"。如果你还在为杂乱无章的日志输出而烦恼，不妨在下一个项目中尝试一下，感受开发效率的显著提升。