🎉 Vite Plugin Fancy Console 使用指南

让开发调试信息变得更优雅的 Vite 插件

📦 安装

npm install vite-plugin-pconsole --save-dev
# 或
yarn add vite-plugin-pconsole -D

🚀 快速开始

// vite.config.js
import { defineConfig } from 'vite'
import {fancyPlugin} from 'vite-plugin-pconsole'

export default defineConfig({
  plugins: [
    fancyPlugin({
      icon: '🐳',  // 自定义前缀图标
      timeFormat: 'HH:mm:ss',  // 时间显示格式
      showFileName: true,  // 显示文件名
      showLineNumber: true  // 显示行号
    })
  ]
})

🔧 配置选项

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | icon | string | 🐳 | 自定义前缀图标 | | timeSeparator | string | - | 时间与日志内容之间的分隔符 | | fileLineSeparator | string | : | 文件名与行号之间的分隔符 | | styles | object | {} | 自定义样式配置 | | prefix | string | `` | 日志输出前缀 | | root | string | process.cwd() | 项目根目录 | | silentProduction | boolean | false | 生产环境是否静默输出 | | exclude | string[] | [/node_modules/] | 排除的文件路径，支持正则表达式 | | include | string[] | [/.(js|ts|jsx|tsx|vue)$/] | 包含的文件路径，支持正则表达式 | | timeFormat | string | YYYY-MM-DD HH:mm:ss | 时间显示格式 | | showFileName | boolean | false | 是否显示文件名 | | showLineNumber | boolean | false | 是否显示行号 |

高级样式配置

// 颜色配置示例
{
  styles: {
    log: '#1890ff',    // 蓝色
    info: '#52c41a',   // 绿色
    warn: '#faad14',   // 橙色
    error: '#ff4d4f'   // 红色
  }
}

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | log | string | #1890ff | 日志颜色 | | info | string | #52c41a | 信息颜色 | | warn | string | #faad14 | 警告颜色 | | error | string | #ff4d4f | 错误颜色 |

🎨 使用示例

const MENU_ITEMS = [
  { key: '1', label: '实验室简介', component: 'Tech' },
  { key: '2', label: '研究方向', component: 'Pos' },
  { key: '3', label: '规章制度', component: 'Zd' },
  { key: '4', label: '联系我们', component: 'Contact' },
]
console.log(MENU_ITEMS)
console.warn(MENU_ITEMS)
console.error(MENU_ITEMS)
console.info(MENU_ITEMS)
console.debug(MENU_ITEMS)

📌 效果展示

📝 贡献指南

欢迎提交 Pull Request 或 Issue，共同改进这个项目。

仓库地址

vite-plugin-fancy