前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >握草,这么好用的插件我怎么才发现!

握草,这么好用的插件我怎么才发现!

作者头像
萌萌哒草头将军
发布于 2025-05-08 07:32:59
发布于 2025-05-08 07:32:59
17300
代码可运行
举报
文章被收录于专栏:前端框架前端框架
运行总次数:0
代码可运行

前言

前几天推荐的 react-dev-inspector 可以说是深受大家喜爱,但是它的配置比较繁琐,需要三个部分:babelmidwareidea的配置比较繁琐!

今天推荐一个只需要一步配置就可以搞定的插件:Code Inspector

正文

Code Inspector 是一款通过点击页面 DOM 元素,自动打开 IDE 并定位到源代码位置的开发辅助工具。它的特点是:零侵入、开发专用、兼容广、配置简单。

核心功能
  • 点击定位源码:鼠标悬停元素 + 快捷键,点击即跳转
  • 支持切换按钮模式:无需记快捷键,点击页面按钮也能定位
  • 开发专用:默认只在 dev 模式下启用,不影响生产环境
安装方式

执行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install code-inspector-plugin -D
插件配置

在打包工具配置文件中引入插件(支持 vite、webpack、rspack、esbuild 等):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// vite.config.ts
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default {
  plugins: [
    codeInspectorPlugin({
      bundler: 'vite',
      editor: 'code',
      showSwitch: true,
    }),
  ],
}
使用方式

方法一:快捷键模式

  • Mac:Option + Shift
  • WindowsAlt + Shift
  • 鼠标悬停 + 点击,IDE 自动跳转到对应代码

方法二:页面按钮切换

  • 配置 showSwitch: true 后页面会出现按钮
  • 开启后点击元素即可跳转
支持技术栈
  • 打包工具:vite、webpack、rspack、esbuild、farm、nextjs、nuxt、umijs、rsbuild
  • 框架:vue、react、preact、solid、qwik、svelte、astro
注意事项

如果你是 微前端, 那么主应用 + 子应用都要加插件,另外如果无法打开编辑器,

在根目录下新建 .env.local 文件,设置 CODE_EDITOR=xxx,如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
CODE_EDITOR=/home/xxx/.vscode-server/bin/xxx/remote-cli/code

这个值是应用的启动地址,具体看这里:https://inspector.fe-dev.cn/guide/ide.html#%E5%85%B6%E4%BB%96-ide

/github.com/zh-lx/code-inspector

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-05-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌萌哒草头将军 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 正文
    • 核心功能
    • 安装方式
    • 插件配置
    • 使用方式
    • 支持技术栈
    • 注意事项
  • /github.com/zh-lx/code-inspector
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档