vite-plugin-enhance-log

A vite Plugin to add log filename, log line, log argument name and separator

English | 中文

🔥 Features

• Support to log the log filename, custom filename, highlight filename
• custom preTip by different logMethod
• Support to log line
• Support to log argument name
• Support to log separator
• Support different files —— 👉 .js, .jsx, .ts, .tsx, .vue, .svelte, and .astro

for more usage please see the examples

📦 Install

pnpm add vite-plugin-enhance-log -D
# or
yarn add vite-plugin-enhance-log -D
# or
npm i vite-plugin-enhance-log -D

⚙️ Options

interface Options {
  /** apply plugin in which mode, default all */
  apply?: 'serve' | 'build' | ((this: void, config: UserConfig, env: ConfigEnv) => boolean)
  /** colorful filename，but The firefox can't recognize color labels, and garbled characters appear */
  colorFileName?: boolean
  /**
   * match log method reg, default /console\.log/, you can custom
   * @example
   * logMethodReg: /console\.(log|error|warn|info|debug)/
   */
  logMethodReg?: RegExp
  /**
   * log file name
   * If your file name is too long,
   * and you don;t want to log the directory of  the file path, 
   * such as src/pages/xxxyyy/a.tsx, 
   * then you can configure enableDir to false, and only print a.tsx
   * @default true
   */
  enableFileName?: boolean | {
    enableDir?: boolean
      /**
     * @example
     * filename: /Users/xxx/code/your-project/packages/main/src/index.ts
     * root: /Users/xxx/code/your-project/packages/main
     * rootSplitExp: /(.*?)packages
     * the log will be main/src/index.ts
     */
    custom?: (filename: string) => string
  }
  /**
   * tip of start argument default 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
   * also, you can custom preTip by logMethod
   * @example
   * console.log('🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀', ...)
   * preTip: (logMethod) => {
   * if (logMethod === 'console.error') return '❌❌❌❌❌'
   * if (logMethod === 'console.warn') return '🚨🚨🚨🚨🚨'
   * if (logMethod === 'console.info') return '💡💡💡💡💡'
   * if (logMethod === 'console.debug') return '🐞🐞🐞🐞🐞'
   * return '🚀🚀🚀🚀🚀'
   * }
   */
  preTip?: string | ((logMethod: string) => string)
  /** the delimiter for each parameter is an empty string by default, you can also use a newline \n, a semicolon';' a comma',' or even a pig '🐖' */
  splitBy?: boolean
  /** 
   * need endLine, default false， only if startLine unequal endLine
   * @example
   * console.log('line of 1 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx', ..., 'line of 10 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx')
   *  */
  endLine?: boolean
}

🔨 Usage

import { defineConfig } from 'vite'
import EnhanceLog from 'vite-plugin-enhance-log'

const config = defineConfig({
  plugins: [
    // if you use vue, ensure the vuePlugin before the log plugin
    EnhanceLog({
      splitBy: '\n',
      preTip: '🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖',
      enableFileName: true, // or enableFileName: { enableDir: false}
    }),
  ],
})

export default config

👇 Example

Clone the project and start playgrounds by running:

pnpm play # corresponding to vue
# or
pnpm play:react # corresponds to react
pnpm play:astro # corresponds to astro

For specific configuration, see vue/vite.config.ts or react/vite.config.ts, astro.config.mjs

📢 Note that since 0.5.0, if you print the filename, it puts the line where the log is after the filename, something like this:

For example, if you don't like small 🚀, but you like piggy 🐖, you can configure preTip as 🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖:

For example, in the case of many parameters, you want log to wrap each parameter, then you can configure splitBy as \n:

Or the delimiter is ;:

Of course, you can also specify it at will, such as using a dog head 🐶 to separate:

For example, if you want to know the file name where the log is located, you can configure enableFileName to be true (of course the default is true):

If the file path is too long:

and you only want to print the file name without the directory prefix, you can configure enableFileName: { enableDir: false }:

For another example, if there is a log that spans multiple lines, you want the number of lines at the beginning and end of the log, with the log entity in the middle, then you can set endLine to true:

We can see that the number of lines at the beginning is 29, and the number of lines at the end is 44, which is consistent with the source code

📄 License

vite-plugin-enhance-log is MIT licensed.