code-inspector-plugin - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

package.json

 {
   "name": "code-inspector-plugin",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "main": "./dist/index.js",
@@ -27,3 +27,3 @@ "module": "./dist/index.mjs",
   "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": [
@@ -43,5 +43,5 @@ "webpack",
     "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"
   },
@@ -48,0 +48,0 @@ "devDependencies": {

README.md

@@ -6,3 +6,3 @@ <div 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>
@@ -32,16 +32,2 @@
 
-## 🚀 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
@@ -54,3 +40,4 @@
   ✅ vite<br />
-  ✅ rspack
+  ✅ rspack<br />
+  ✅ nextjs / nuxt / umijs eg.<br />
 - The following Web frameworks are currently supported:<br />
@@ -66,4 +53,205 @@ ✅ vue2<br />
 
+## 🚀 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>

No alert changes

Improved metrics

Total package byte prevSize

34772

increased by16.37%

Number of lines in readme file

254

increased by284.85%

Dependency changes

• + Addedcode-inspector-core@0.6.2(transitive)

• + Addedvite-code-inspector-plugin@0.6.2(transitive)

• + Addedwebpack-code-inspector-plugin@0.6.2(transitive)

• - Removedcode-inspector-core@0.6.1(transitive)

• - Removedvite-code-inspector-plugin@0.6.1(transitive)

• - Removedwebpack-code-inspector-plugin@0.6.1(transitive)

• Updatedcode-inspector-core@0.6.2

• Updatedvite-code-inspector-plugin@0.6.2

• Updatedwebpack-code-inspector-plugin@0.6.2