![Cover image for [enhance-log]to add log filename, line, argument name and separator](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8w72cpqtl1uj30z5tje.png)
vite-plugin-enhance-log
A vite Plugin to add log filename, log line, log argument name and separator.There is also a babel pluin with the same features 👉 babel-plugin-enhance-log
📦 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 {
/**
* 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
}
/**
* tip of start argument default 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
* @example
* console.log(' 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀', ...)
*/
preTip?: 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
For specific configuration, see vue/vite.config.ts or react/vite.config.ts
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.
Top comments (0)