Ecosyste.ms: Awesome

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

https://github.com/unplugin/unplugin-turbo-console

🚀 Improve the Developer Experience of console.log()
https://github.com/unplugin/unplugin-turbo-console

react svelte unplugin vite vite-plugin vue

Last synced: about 2 months ago
JSON representation

🚀 Improve the Developer Experience of console.log()

Lists

README 

        


  






























## 🎥 Screen Recording





  




## 🔥 Features



- Support printing the file name, line number and variable name.



- Support insert custom prefix and suffix.



- Support highlight the console output based on different file types. (such as `js(x)`, `ts(x)`, `vue`, `svelte`, `astro`)



- Support jump to the editor source code from the console output with one click.



## 📦 Install



```shell

# npm

npm install -D unplugin-turbo-console

# yarn

yarn add -D unplugin-turbo-console

# pnpm

pnpm i -D unplugin-turbo-console

```



## 🦄 Usage



> [!TIP]

> You can view all project examples [here](https://github.com/yuyinws/vite-plugin-turbo-console/tree/main/examples).



Vite



```ts

// vite.config.ts

import { defineConfig } from 'vite'

import TurboConsole from 'unplugin-turbo-console/vite'



// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    TurboConsole({

      /* options here */

    })

  ],

})

```







Nuxt



```ts

// nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({

  modules: [

    'unplugin-turbo-console/nuxt'

  ],

  turboConsole: {

    /* options here */

  }

})

```







Webpack



```js

// webpack.config.js

module.exports = {

  /* ... */

  plugins: [

    require('unplugin-turbo-console/webpack')({ /* options */ }),

  ],

}

```







Vue CLI



```js

// vue.config.js

const { defineConfig } = require('@vue/cli-service')



module.exports = defineConfig({

  transpileDependencies: true,

  parallel: false,

  configureWebpack: {

    plugins: [

      require('unplugin-turbo-console/webpack')({

        /* options here */

      })

    ]

  }

})

```







Sveltekit



⚠️ Please add TurboConsole plugin **before** Sveltekit plugin



```js

import { sveltekit } from '@sveltejs/kit/vite';

import { defineConfig } from 'vite';

import TurboConsole from 'unplugin-turbo-console/vite'



export default defineConfig({

	plugins: [

		TurboConsole(),

		sveltekit()

	]

});



```







Astro



```js

// astro.config.mjs

import { defineConfig } from 'astro/config'

import TurboConsole from 'unplugin-turbo-console/astro'



// https://astro.build/config

export default defineConfig({

  integrations: [

    TurboConsole()

  ]

})

```







Next.js



```js

// next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {

  webpack(config) {

    config.plugins.push(

      require('unplugin-turbo-console/webpack')()

    )



    return config

  }

}



module.exports = nextConfig

```







Farm



```ts

// farm.config.ts

import { defineConfig } from '@farmfe/core';

import vue from '@vitejs/plugin-vue';

import TurboConsole from 'unplugin-turbo-console/farm'



export default defineConfig({

  vitePlugins: [

    vue(),

  ],

  plugins: [

    TurboConsole()

  ]

});



```







Rspack (Experimental)



```js

// rspack.config.js

const rspack = require('@rspack/core')

const { VueLoaderPlugin } = require('vue-loader')

/** @type {import('@rspack/cli').Configuration} */



const config = {



  plugins: [

    new VueLoaderPlugin(),

    new rspack.HtmlRspackPlugin({

      template: './index.html'

    }),

    require('unplugin-turbo-console/rspack')(),

  ],



}

module.exports = config

```







### Options



```ts

export interface Options {

  /**

   * Add a string prefix to the console log.

   *

   * @defaultValue ''

   */

  prefix?: string

  /**

   * Add a string suffix to the console log.

   *

   * @defaultValue ''

   */

  suffix?: string

  /**

   * Whether to disable the launch editor feature.

   *

   * @defaultValue false

   */

  disableLaunchEditor?: boolean

  /**

   * Whether to disable the highlight output feature.

   *

   * @defaultValue false

   */

  disableHighlight?: boolean

  /**

   * The specific service port of launch editor server.

   *

   * @defaultValue 3070

   */

  port?: number

  /**

   * Whether to show extended path name when the file's (or folder's) name contains an element in the array.

   *

   * @remarks

   *

   * Consider a project includes these files:

   *

   * /views/Feature1/index.vue

   *

   * /views/Feature2/index.vue

   *

   * Set extendedPathFileNames as ['index'] can show the extended path name in the console output.

   *

   * @defaultValue `[]`

   *

   */

  extendedPathFileNames?: string[]

}

```



### Disable plugin by comments



From `v1.5.0`, you can use code comments to make the plugin ignore specific console statements.



- One line disable



```js

// turbo-console-disable-next-line

console.log('foo')

console.log('bar') // turbo-console-disable-line

```



- Entire file disable



```js

/* turbo-console-disable (On top of file) */  

console.log('foo')

console.log('bar')

```



## Troubleshooting



### Jump to editor does't work



If you get errors like this:



> Could not open xxxx in the editor.

>

> The editor process exited with an error: spawn code ENOENT.



Please make sure the `code` command is installed. Check more details [here](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line).



## Migrate from `vite-plugin-turbo-console`



`package.json`



```diff

{

  "devDependencies": {

-   "vite-plugin-turbo-console": "*",

+   "unplugin-turbo-console": "*",

  }

}

```



`vite.config.js`

```diff

import { defineConfig } from "vite";

- import TurboConsole from "vite-plugin-turbo-console";

+ import TurboConsole from 'unplugin-turbo-console/vite'



// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    TurboConsole({

      /* options here */

    })

  ],

});

```



## ❤️ Credits



Inspired by 



[babel-plugin-enhance-log](https://github.com/baozouai/babel-plugin-enhance-log)



[turbo-console-log](https://github.com/Chakroun-Anas/turbo-console-log)



[vite-plugin-console-line](https://github.com/lq9958/vite-plugin-console-line)