爱意满满的作品展示区。
lyc575757

这个 Vite 插件,能让你通过点击控制台中的 console.log 打印信息跳转到编辑器

  •  4
     
  •   lyc575757 · Nov 2, 2023 · 4324 views
    This topic created in 1096 days ago, the information mentioned may be changed or developed.

    logo

    主要功能

    1. 根据不同的文件类型高亮输出 console.log 所在的文件名,行数,变量名
    2. 通过点击跳转到编辑器对应的 console.log 所在行

    效果展示

    gif

    使用方法

    # npm
    npm install -D vite-plugin-turbo-console
    # yarn
    yarn add -D vite-plugin-turbo-console
    # pnpm
    pnpm i -D vite-plugin-turbo-console
    
    • vite.config.ts
    import { defineConfig } from "vite";
    import TurboConsole from "vite-plugin-turbo-console";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [TurboConsole({
        /* options here */
      })],
    });
    

    GitHub 仓库

    欢迎大家使用并反馈

    35 replies  •  2023-11-03 14:34:35 +08:00
    NickyXing
    NickyXing
    Nov 2, 2023
    1
    这个确实强
    HoseaDev
    HoseaDev
    Nov 2, 2023
    2
    这个有点强。
    allenQI
    allenQI
    Nov 2, 2023
    3
    这个确实有点强。
    zhw2590582
    zhw2590582
    Nov 2, 2023
    4
    有点意思
    lizhenda
    lizhenda
    Nov 2, 2023 via iPhone
    5
    准备试试,有点意思
    ZGame
    ZGame
    Nov 2, 2023
    6
    好活!
    Leeeeex
    Leeeeex
    Nov 2, 2023
    7
    我记得之前有个插件可以在页面上点击跳转到编辑器对应位置,也支持 webstorm ,有没有大佬知道是哪个。
    Leeeeex
    Leeeeex
    Nov 2, 2023
    9
    @lyc575757 应该不是,我记得是个浏览器插件,不需要修改代码,当时还想要装一下,结果就忘记是哪个了。
    luchenwei9266
    luchenwei9266
    Nov 2, 2023
    10
    666666
    caocong
    caocong
    Nov 2, 2023
    11
    在我的 react 项目里用了一下,点击后新开窗口跳转到 http://localhost:3000/__tc/i.html?f=src/.....报 404 错误,这个__tc/i.html 是我的使用方式不对吗,需要起什么服务么
    caocong
    caocong
    Nov 2, 2023
    12
    找到原因了,我 vite 设置了 base: '/xxxx/',点击的跳转地址是 http://localhost:3000/xxxx/__tc/i.html ,手动改成 http://localhost:3000/__tc/i.html 是可以跳转到编辑器的
    lyc575757
    lyc575757
    OP
    Nov 2, 2023
    13
    @caocong #12 我修复一下
    lyc575757
    lyc575757
    OP
    Nov 2, 2023
    14
    @caocong #12 升级到最新版本试一下,应该已经修复了
    caocong
    caocong
    Nov 2, 2023
    15
    @lyc575757 vscode 可以用了,webstorm 跳转时报错了
    ```
    Could not open index.tsx in the editor.
    The editor process exited with an error: spawn /Applications/WebStorm.app/Contents/MacOS/webstorm ENOENT.
    ```
    另外有个个人习惯的问题,跳转过去光标位置是在代码前空一格的位置,紧贴 console.log()前面或者后面都感觉好些
    lyc575757
    lyc575757
    OP
    Nov 2, 2023
    16
    @caocong #15
    跳转报错应该是上游依赖的问题,可以尝试一下这个解决方法
    https://github.com/yyx990803/launch-editor/issues/9#issuecomment-874352139

    第二个我优化一下
    19cm
    19cm
    Nov 2, 2023
    17
    有个报错 为啥用了这个差件就不能打印 error,否则项目无法正常显示
    KMpAn8Obw1QhPoEP
    KMpAn8Obw1QhPoEP
    Nov 2, 2023 via Android
    18
    哇 舒适
    KMpAn8Obw1QhPoEP
    KMpAn8Obw1QhPoEP
    Nov 2, 2023 via Android
    19
    @tianzi123 问一下 在变量后面提示类型的是啥插件
    nightmare233
    nightmare233
    Nov 2, 2023
    20
    这个确实 c
    jchencode
    jchencode
    Nov 2, 2023
    21
    赞一个,真心不错
    nomagick
    nomagick
    Nov 2, 2023
    22
    所以还是到处 console.log ,不用调试器是吧。。。
    ByteRan
    ByteRan
    Nov 2, 2023
    23
    666
    19cm
    19cm
    Nov 3, 2023
    24
    @enchilada2020 #19 vscode 自带的配置
    19cm
    19cm
    Nov 3, 2023
    25
    @caocong #11 我的也是会打开一个新标签页闪一下又关了, 但不会报错
    lyc575757
    lyc575757
    OP
    Nov 3, 2023
    26
    @tianzi123 #17 请问只有 catch 中的 console.log 有这个问题吗 还是所有的都有 刚才测试了一下没有复现出来
    19cm
    19cm
    Nov 3, 2023
    27
    @lyc575757 #26 catch 里面打印 error 的话项目直接白屏,注释掉就没问题就能正常显示了, 另外,其余打印都存在问题,问题为 点击打印的结果按理老说要跳编辑器,但只是会打开一个游览器新标签页 2s 又关了
    lyc575757
    lyc575757
    OP
    Nov 3, 2023
    28
    @tianzi123 #27 能去 GitHub 上开个 issus 吗 方便问题追踪
    weijancc
    weijancc
    Nov 3, 2023
    30
    我试了下是有问题的, 文件路径反斜杠没有转义, 导致报错使页面无法加载
    `
    console.log("%c🚀 vscodeConfig.js:13 ~ config %c\n%c🔦 Jump to Editor http://localhost:5173/__tc/i.html?f=src\vue\result\util\vscodeConfig.js
    `
    Leeeeex
    Leeeeex
    Nov 3, 2023
    31
    @LOWINC 应该就是这个,确实好用,还不用额外装包
    lyc575757
    lyc575757
    OP
    Nov 3, 2023
    32
    @weijancc 嗯 这个问题已经在 0.2.5 版本修复,现在用了 base64 传递文件路径
    Leeeeex
    Leeeeex
    Nov 3, 2023
    33
    @LOWINC 我们的 react 项目没啥问题,但是 vue3 + vite 项目跳转不过去
    xudashan
    xudashan
    Nov 3, 2023
    34
    卧槽,老哥牛逼啊,可以使用。
    8tme
    8tme
    Nov 3, 2023
    35
    🚌🚌🚌🚌🚌🚌
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5023 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 58ms · UTC 01:34 · PVG 09:34 · LAX 17:34 · JFK 20:34
    ♥ Do have faith in what you're doing.