vite-code-inspector-plugin

vite-code-inspector-plugin

English Doc | 中文文档 | webpack-code-inspector-plugin

---

📜Introduction

Click the element on the page, it will automatically open the code editor and position the cursor to the source code of the element.

🚀Install

npm i vite-code-inspector-plugin -D
# or
yarn add vite-code-inspector-plugin -D
# or
pnpm add vite-code-inspector-plugin -D

📦Usage

1. configure vite.config.js

• Add the following configuration in vite.config.js:

  // vite.config.js
  import { defineConfig } from 'vite';
  import { ViteCodeInspectorPlugin } from 'vite-code-inspector-plugin';
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [ViteCodeInspectorPlugin()],
  });
  

2. Configure Vscode Command

If your editor is Vscode, you need to do the following:

• Execute command + shift + p(mac) or ctrl + shift + p(windows) command in vscode, search and click shell Command: Install 'code' command in Path:

  

• If the following popup window appears, your configuration is successful:

  

3. Use Code Inspector

You can perform code inspector mode by turning on the switch or simultaneously pressing and holding hotKeys(default mac is 【Option + Shift】 and windows is 【Alt + Shift】). In this mode, click the element on the page, it will automatically open the code editor and position the cursor to the source code of the element.

🎨Options

Parameter	Description	Type	OptionValue	Default
hideSwitch	Whether hide the button of this function	boolean	true/false	false
hotKeys	Combination keys for triggering this function.When the value is false or [], the function can't be triggered by keys.	string[] | false	Array<'ctrlKey'|'altKey'|'metaKey'|'shiftKey'> | false	['altKey', 'shiftKey']
autoToggle	After opening the function switch, whether automatically close the switch when triggering the jump editor function.	boolean	true/false	true

// vite.config.js
import { defineConfig } from 'vite';
import { ViteCodeInspectorPlugin } from 'vite-code-inspector-plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ViteCodeInspectorPlugin({
      hideSwitch: false,
      hotKeys: ['altKey', 'shiftKey'],
      autoToggle: true,
    }),
  ],
});

❓FAQ

• Editor doesn't open automatically
  If your editor doesn't open automatically when you click on a page element, it could be because of system permissions or other issues that prevent the plugin from reading the programs currently running on your computer. Please add a file named .env.local to your project root directory, add the following content:

  # editor
  CODE_EDITOR=code