code-inspector-plugin 0.6.1 → 0.6.2

package/README.md

@@ -3,7 +3,7 @@
 
 <p align="center">
   <h2>code-inspector</h2>
-  <span>English Doc</span> | <a href="https://github.com/zh-lx/code-inspector/blob/main/docs/README-ZH.md">中文文档</a> | <a href="https://inspector.fe-dev.cn/en">Read Docs for More</a>
+  <span>English Docs</span> | <a href="https://github.com/zh-lx/code-inspector/blob/main/docs/README-ZH.md">中文文档</a> | <a href="https://inspector.fe-dev.cn/en">Documentation Site</a>
 </p>
 
 [![NPM version](https://img.shields.io/npm/v/code-inspector-plugin.svg)](https://www.npmjs.com/package/code-inspector-plugin)
@@ -28,20 +28,6 @@ Click the element on the page, it can automatically open the code editor and pos
 - [solid online demo](https://stackblitz.com/edit/solidjs-templates-6u76jn?file=vite.config.ts)
 - [svelte online demo](https://stackblitz.com/edit/vitejs-vite-zoncqr?file=vite.config.ts)
 
-## 🚀 Install
-
-```perl
-npm i code-inspector-plugin -D
-# or
-yarn add code-inspector-plugin -D
-# or
-pnpm add code-inspector-plugin -D
-```
-
-## 🌈 Usage
-
-Please check here for complete access and usage information: [code-inspector-plugin configuration](https://en.inspector.fe-dev.cn/guide/start.html#configuration)
-
 ## 🎨 Support
 
 The following are which compilers, web frameworks and editors we supported now:
@@ -49,7 +35,8 @@ The following are which compilers, web frameworks and editors we supported now:
 - The following bundlers are currently supported:<br />
   ✅ webpack<br />
   ✅ vite<br />
-  ✅ rspack
+  ✅ rspack<br />
+  ✅ nextjs / nuxt / umijs eg.<br />
 - The following Web frameworks are currently supported:<br />
   ✅ vue2<br />
   ✅ vue3<br />
@@ -60,6 +47,207 @@ The following are which compilers, web frameworks and editors we supported now:
 - The following code editors are currently supported:<br />
   [VSCode](https://code.visualstudio.com/) | [Visual Studio Code - Insiders](https://code.visualstudio.com/insiders/) | [WebStorm](https://www.jetbrains.com/webstorm/) | [Atom](https://atom.io/) | [HBuilderX](https://www.dcloud.io/hbuilderx.html) | [PhpStorm](https://www.jetbrains.com/phpstorm/) | [PyCharm](https://www.jetbrains.com/pycharm/) | [IntelliJ IDEA](https://www.jetbrains.com/idea/)
 
+## 🚀 Install
+
+```perl
+npm i code-inspector-plugin -D
+# or
+yarn add code-inspector-plugin -D
+# or
+pnpm add code-inspector-plugin -D
+```
+
+## 🌈 Usage
+
+Please check here for more usage information: [code-inspector-plugin configuration](https://en.inspector.fe-dev.cn/guide/start.html#configuration)
+
+- 1.Configuring Build Tools
+
+  <details>
+    <summary>Click to expand configuration about: <b>webpack</b></summary>
+
+  ```js
+  // webpack.config.js
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  module.exports = () => ({
+    plugins: [
+      codeInspectorPlugin({
+        bundler: 'webpack',
+      }),
+    ],
+  });
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>vite</b></summary>
+
+  ```js
+  // vite.config.js
+  import { defineConfig } from 'vite';
+  import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+  export default defineConfig({
+    plugins: [
+      codeInspectorPlugin({
+        bundler: 'vite',
+      }),
+    ],
+  });
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>rspack</b></summary>
+
+  ```js
+  // rspack.config.js
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  module.exports = {
+    // other config...
+    plugins: [
+      codeInspectorPlugin({
+        bundler: 'rspack',
+      }),
+      // other plugins...
+    ],
+  };
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>vue-cli</b></summary>
+
+  ```js
+  // vue.config.js
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  module.exports = {
+    // ...other code
+    chainWebpack: (config) => {
+      config.plugin('code-inspector-plugin').use(
+        codeInspectorPlugin({
+          bundler: 'webpack',
+        })
+      );
+    },
+  };
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>nuxt</b></summary>
+
+  For nuxt3.x :
+
+  ```js
+  // 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' })],
+    },
+  });
+  ```
+
+  For nuxt2.x :
+
+  ```js
+  // nuxt.config.js
+  import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+  export default {
+    build: {
+      extend(config) {
+        config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
+        return config;
+      },
+    },
+  };
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>next.js</b></summary>
+
+  ```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;
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>umi.js</b></summary>
+
+  ```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
+  });
+  ```
+
+  </details>
+
+- 2.Configuring VSCode Command Line Tool
+
+  > **Tip:** Skip for Windows or other IDEs <br />
+  > This step is only required for Mac with vscode as IDE. Skip this step if your computer is Windows or if you use another IDE.
+
+  In VSCode, press `command + shift + p`, search for and click `Shell Command: Install 'code' command in PATH`:
+
+    <img src="https://s3.bmp.ovh/imgs/2021/08/a99ec7b8e93f55fd.png" width="400px" />
+
+  If you see the dialog box below, the configuration was successful:
+
+    <img src="https://s3.bmp.ovh/imgs/2021/08/c3d00a8efbb20feb.png" width="300px" />
+
+- 3.Enjoy using it
+
+  When pressing the combination keys on the page, moving the mouse over the page will display a mask layer on the DOM with relevant information. Clicking will automatically open the IDE and position the cursor to the corresponding code location. (The default combination keys for Mac are `Option + Shift`; for Windows, it's `Alt + Shift`, and the browser console will output related combination key prompts)
+
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/a6c72278-d312-45b2-ab76-076a9837439e" width="700px" />
+
+## 👨‍💻 Contributors
+
+Special thanks to the contributors of this project:<br />
+<img src="https://contrib.rocks/image?repo=zh-lx/code-inspector" />
+
 ## 📧 Communication and Feedback
 
 For any usage issues, please leave a message below my [Twitter](https://twitter.com/zhulxing312147) post or [submit an issue](https://github.com/zh-lx/code-inspector/issues) on Github.
+
+For Chinese users, you can you can join the QQ group `769748484` add the author's WeiXin account `zhoulx1688888` for consultation and feedback:
+
+<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/6f0c8197-21e3-48d7-b9db-ffeb0e0d4ba7" width="200" height="272" />
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/28ebb97a-a114-4598-a6f2-0e45103284cc" width="200" height="272" />
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-inspector-plugin",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./types/index.d.ts",
@@ -24,7 +24,7 @@
     }
   },
   "homepage": "https://inspector.fe-dev.cn/en",
-  "description": "点击页面上的元素，将自动打开你的代码编辑器并将光标定位到元素对应的代码位置。",
+  "description": "Click the dom on the page, it will open your IDE and position the cursor to the source code location of the dom.",
   "keywords": [
     "webpack",
     "vite",
@@ -39,9 +39,9 @@
   },
   "dependencies": {
     "chalk": "4.1.1",
-    "code-inspector-core": "0.6.1",
-    "webpack-code-inspector-plugin": "0.6.1",
-    "vite-code-inspector-plugin": "0.6.1"
+    "code-inspector-core": "0.6.2",
+    "vite-code-inspector-plugin": "0.6.2",
+    "webpack-code-inspector-plugin": "0.6.2"
   },
   "devDependencies": {
     "@types/node": "^16.0.1",