點(diǎn)擊頁(yè)面元素跳轉(zhuǎn)IDE對(duì)應(yīng)代碼，試試這幾個(gè)工具！

作者：CUGGZ 2022-11-08 08:53:56

下面就來(lái)分享幾個(gè)插件，通過(guò)這些插件，點(diǎn)擊頁(yè)面元素就可以直接跳轉(zhuǎn)到 IDE 中對(duì)應(yīng)的代碼，提高開(kāi)發(fā)效率！

大家好，我是 CUGGZ。

在日常開(kāi)發(fā)中，當(dāng)項(xiàng)目組件特別多或者剛接手一個(gè)項(xiàng)目時(shí)，可能需要花費(fèi)一定時(shí)間去查找頁(yè)面元素/組件對(duì)應(yīng)的代碼。下面就來(lái)分享幾個(gè)插件，通過(guò)這些插件，點(diǎn)擊頁(yè)面元素就可以直接跳轉(zhuǎn)到 IDE 中對(duì)應(yīng)的代碼，提高開(kāi)發(fā)效率！

Vue Devtools

Vue 官方調(diào)試工具 Vue Devtools 是支持點(diǎn)擊組件直接跳轉(zhuǎn)到編輯器并打開(kāi)對(duì)應(yīng)代碼的。只需要定位頁(yè)面的組件，Devtools 就會(huì)識(shí)別對(duì)應(yīng)的組件，點(diǎn)擊選中組件，再點(diǎn)右上角的鏈接按鈕即可跳轉(zhuǎn)到 IDE 中對(duì)應(yīng)的組件。

LocatorJS

使用 LocatorJS，在瀏覽器中單擊 UI 組件就可以直接在 IDE 中打開(kāi)其代碼。可以通過(guò)瀏覽器插件（支持 Chrome 和 Firfox）或者在項(xiàng)目中安裝依賴(lài)來(lái)引入 LocatorJS，其適用于 React、Preact、Solid、Vue 和 Svelte。

Github：https://github.com/infi-pc/locatorjs。

click-to-component

Option+單擊瀏覽器中的 React 組件以就會(huì)立即在 VS Code 中打開(kāi)源代碼。適用于 Next.js、 Create React App 和 Vite 等。

Github：https://github.com/ericclemmons/click-to-component。

react-dev-inspector

只需單擊一下即可直接從瀏覽器 React 組件跳轉(zhuǎn)到本地 IDE 對(duì)用的代碼。適用于幾乎所有的 React 框架，例如 Vite、 Next.js、 Create React App、 Umi3、 Ice.js，或任何其他在內(nèi)置中使用 @babel/plugin-transform-react-jsx-source 的 React 項(xiàng)目。該插件僅適用于 VS Code，但簡(jiǎn)單，無(wú)需任何其他配置。