README-ZH.md

code-inspector-plugin

中文文档 | Documentation

---

📖 介绍

点击页面上的元素，能够自动打开你的代码编辑器并将光标定位到元素对应的代码位置。

💻 在线体验

• vue online demo
• react online demo
• preact online demo
• solid online demo
• qwik online demo
• svelte online demo
• astro online demo

🎨 支持列表

当前支持的编译器、web 框架以及 IDE 如下:

• 当前支持以下打包工具
  ✅ webpack
  ✅ vite
  ✅ rspack / rsbuild
  ✅ next.js / Nuxt / Umijs 等
• 当前支持以下 Web 框架
  ✅ vue2
  ✅ vue3
  ✅ react
  ✅ preact
  ✅ solid
  ✅ qwik
  ✅ svelte
  ✅ astro
• 当前支持以下代码编辑器
  VSCode | Visual Studio Code - Insiders | WebStorm | Atom | HBuilderX | PhpStorm | PyCharm | IntelliJ IDEA

🚀 安装

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

🌈 使用

完整的接入及使用方式请查看：code-inspector-plugin 配置

• 1.配置打包工具

  点击展开查看 webpack 项目配置

  // webpack.config.js
  const { codeInspectorPlugin } = require('code-inspector-plugin');
  
  module.exports = () => ({
    plugins: [
      codeInspectorPlugin({
        bundler: 'webpack',
      }),
    ],
  });

  点击展开查看 vite 项目配置

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

  点击展开查看 rspack 项目配置

  // rspack.config.js
  const { codeInspectorPlugin } = require('code-inspector-plugin');
  
  module.exports =  = {
    // other config...
    plugins: [
      codeInspectorPlugin({
        bundler: 'rspack',
      }),
      // other plugins...
    ],
  };

  点击展开查看 rsbuild 项目配置

  // rsbuild.config.js
  const { codeInspectorPlugin } = require('code-inspector-plugin');
  
  module.exports = {
    // other config...
    tools: {
      rspack: {
        plugins: [
          codeInspectorPlugin({
            bundler: 'rspack',
          }),
        ],
      },
    },
  };

  点击展开查看 vue-cli 项目配置

  // vue.config.js
  const { codeInspectorPlugin } = require('code-inspector-plugin');
  
  module.exports = {
    // ...other code
    chainWebpack: (config) => {
      config.plugin('code-inspector-plugin').use(
        codeInspectorPlugin({
          bundler: 'webpack',
        })
      );
    },
  };

  点击展开查看 nuxt 项目配置

  nuxt3.x :

  // nuxt.config.js
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  // https://nuxt.com/docs/api/configuration/nuxt-config
  export default defineNuxtConfig({
    vite: {
      plugins: [codeInspectorPlugin({ bundler: 'vite' })],
    },
  });

  nuxt2.x :

  // nuxt.config.js
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  export default {
    build: {
      extend(config) {
        config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
        return config;
      },
    },
  };

  点击展开查看 next.js 项目配置

  // next.config.js
  const { codeInspectorPlugin } = require('code-inspector-plugin');
  
  const nextConfig = {
    webpack: (config, { dev, isServer }) => {
      config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
      return config;
    },
  };
  
  module.exports = nextConfig;

  点击展开查看 umi.js 项目配置

  // umi.config.js or umirc.js
  import { defineConfig } from '@umijs/max';
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  export default defineConfig({
    chainWebpack(memo) {
      memo.plugin('code-inspector-plugin').use(
        codeInspectorPlugin({
          bundler: 'webpack',
        })
      );
    },
    // other config
  });

  点击展开查看 astro 项目配置

  // astro.config.mjs
  import { defineConfig } from 'astro/config';
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  export default defineConfig({
    vite: {
      plugins: [codeInspectorPlugin({ bundler: 'vite' })],
    },
  });

• 2.配置 vscode 命令行工具

  Tip: Windows 或者其他 IDE 可跳过
  仅当你的电脑为 Mac 且使用 vscode 作为 IDE 时需要配置此步，电脑为 Windows 或者使用其他 IDE 可以跳过此步。

  在 VSCode 中执行 command + shift + p 命令, 搜索并点击 Shell Command: Install 'code' command in PATH:

  

  如果出现如下弹窗，说明配置成功了:

  

• 3.使用功能

  在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift；Window 的默认组合键是 Alt + Shift，在浏览器控制台会输出相关组合键提示)

  

👨‍💻 Contributors

特别鸣谢本项目的贡献者：

📧 交流与反馈

任何使用问题可以加入 QQ 群 769748484、微信群或者添加作者微信 zhoulx1688888 进行咨询与反馈:

💖 赞助

赞助此项目可以帮助作者更好地创作，如果您愿意，欢迎通过这里对作者进行赞助。