Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/baozouai/vite-plugin-enhance-log

A vite plugin to add log filename, log line, log argument name and separator
https://github.com/baozouai/vite-plugin-enhance-log

enhance-log log-argument-name log-filename log-line vite vite-plugin

Last synced: 2 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/baozouai/vite-plugin-enhance-log
Owner: baozouai
License: mit
Created: 2023-07-02T07:51:40.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2024-04-11T13:24:56.000Z (7 months ago)
Last Synced: 2024-04-16T04:50:48.085Z (7 months ago)
Topics: enhance-log, log-argument-name, log-filename, log-line, vite, vite-plugin
Language: TypeScript
Homepage: https://www.npmjs.com/package/vite-plugin-enhance-log
Size: 714 KB
Stars: 29
Watchers: 1
Forks: 1
Open Issues: 2
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE

Awesome Lists containing this project

README

        


vite-plugin-enhance-log




  一个用来为console.log添加代码所在文件名，所在行，log参数名以及添加分隔符的 vite 插件

[![NPM version][npm-image]][npm-url] ![NPM downloads][download-image]

![Test][test-badge] 

[npm-image]: https://img.shields.io/npm/v/vite-plugin-enhance-log.svg?style=flat-square

[npm-url]: http://npmjs.org/package/vite-plugin-enhance-log

[download-image]: https://img.shields.io/npm/dm/vite-plugin-enhance-log.svg?style=flat-square

[test-badge]: https://github.com/baozouai/vite-plugin-enhance-log/actions/workflows/ci.yml/badge.svg

[codecov-badge]: https://codecov.io/github/baozouai/plugin-vite-plugin-enhance-log/branch/master/graph/badge.svg



中文 | [English](./README.md)

## 🔥 Features

- 支持打印文件名，支持自定义文件名，支持高亮文件名

- 支持根据不同的log方法(log, warn, error, info, debug)自定义preTip

- 支持打印所在行（加上endLine则支持结束行）

- 支持打印参数名称

- 支持分隔符来分开每个参数

- 支持不同的文件 —— 👉 .js、.jsx、.ts、.tsx、.vue、.svelte 和 .astro

> 更多用法，请看[示例](#-例子)

## 📦  安装

```sh

pnpm add vite-plugin-enhance-log -D

# or

yarn add vite-plugin-enhance-log -D

# or

npm i vite-plugin-enhance-log -D

```

## ⚙️ 参数

```ts

interface Options {

  /** 应用在开发或build陌生, 默认都生效 */

  apply?: 'serve' | 'build' | ((this: void, config: UserConfig, env: ConfigEnv) => boolean)

  /** 高亮文件名（firefox不支持） */

  colorFileName?: boolean

  /**

   * 匹配自定义log方法，默认是 /console\.log/

   * @example

   * logMethodReg: /console\.(log|error|warn|info|debug)/

   */

  logMethodReg?: RegExp

  /**

   * 打印文件名

   * 如果你文件名太长，希望不显示文件path的目录，比如src/pages/xxx/yyy/a.tsx, 那么可以配置enableDir为false，则只打印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

  }

  /**

   * 打印的前缀提示，这样方便快速找到log

   * @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)

  /** 每个参数分隔符，默认空字符串，你也可以使用换行符\n，分号；逗号，甚至猪猪🐖都行~ */

  splitBy?: boolean

  /** 

   * 是否需要endLine，默认false，如果为true，只有在开始和结束不相同才打印endLine

   * @example

   * console.log('line of 1 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx', ..., 'line of 10 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx')

   *  */

  endLine?: boolean

}

```

 ## 🔨 使用

```ts

import { defineConfig } from 'vite'

import EnhanceLog from 'vite-plugin-enhance-log'

const config = defineConfig({

  plugins: [

    // 如果用vue, 请确保 vuePlugin 在 log plugin 之前

    EnhanceLog({

      splitBy: '\n',

      preTip: '🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖',

      enableFileName: true, // or enableFileName: { enableDir: false}

    }),

  ],

})

export default config

```

## 👇 例子

拉项目后通过运行启动playgrounds：

```shell

pnpm play # 对应vue

# 或者

pnpm play:react # 对应react

play play:astro # 对应astro

```

来启动项目

具体配置可以看 [vue/vite.config.ts](./playgrounds/vue/vite.config.ts) 或者 [react/vite.config.ts](./playgrounds/react/vite.config.ts)、[astro.config.mjs](./playgrounds/astro/astro.config.mjs)

> 📢 注意，从0.5.0开始，如果打印文件名的话，会将log所在行放到文件名后面，类似这样：

> ![img](./assets/file_end_line.png)

比如说，你不喜欢小 🚀，你喜欢猪猪 🐖，那可以配置 preTip 为 🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖：

![img](./assets/pig_pretip.png)

比如说，在参数较多的情况下，你希望 log 每个参数都换行，那可以配置 splitBy 为 `\n`：

![img](./assets/linefeed.png)

或者分隔符是`;`:

![img](./assets/semicolon_delimiter.png)

当然，你也可以随意指定，比如用个狗头🐶来分隔：

![img](./assets/dog_delimiter.png)

比如说，你希望知道log所在的文件名，那么可以配置enableFileName为true（当然默认就是true）：

![img](./assets/file_end_line.png)

如果文件路径太长:

![img](./assets/deep_file.png)

你只希望打印文件名，不需要目录前缀，那么可以配置 `enableFileName: { enableDir: false }`:

![img](./assets/only_file_name.png)

又比如说，有个 log 跨了多行，你希望 log 开始和结束的行数，中间是 log 实体，那可以将 endLine 设置为 true：

![img](./assets/log_multi_line.png)

![img](./assets/log_multi_line_res.png)

> 我们可以看到开始的行数是29，结束的行数是44，跟源码一致 

## 📄 协议

vite-plugin-enhance-log 遵循 [MIT 协议](./LICENSE).