code-inspector-plugin 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +195 -0
  3. package/dist/index.js +1 -0
  4. package/dist/index.mjs +17 -0
  5. package/package.json +53 -0
  6. package/types/index.d.ts +15 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2022 zhoulixiang
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,195 @@
1
+ <div align="center">
2
+ <img src="https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f" width=160px" style="margin-bottom: 12px;" />
3
+
4
+ <p align="center">
5
+ <h2>code-inspector-plugin</h2>
6
+ <span>中文文档</span> |
7
+ <a href="https://github.com/zh-lx/code-inspector/blob/main/docs/README-EN.md">English Doc</a>
8
+ </p>
9
+
10
+ [![NPM version](https://img.shields.io/npm/v/code-inspector-plugin.svg)](https://www.npmjs.com/package/code-inspector-plugin)
11
+ [![GITHUB star](https://img.shields.io/github/stars/zh-lx/code-inspector.svg)](https://github.com/zh-lx/code-inspector)
12
+ [![MIT-license](https://img.shields.io/npm/l/code-inspector.svg)](https://opensource.org/licenses/MIT)
13
+
14
+ </div>
15
+
16
+ <hr />
17
+
18
+ ## 📖 介绍
19
+
20
+ 点击页面上的元素，能够自动打开你的代码编辑器并将光标定位到元素对应的代码位置。
21
+
22
+ ![code-inspector](https://user-images.githubusercontent.com/73059627/227070438-6e40e112-6f1d-4f67-9f26-53986bff77c3.gif)
23
+
24
+ ## 🚀 安装
25
+
26
+ ```perl
27
+ npm i code-inspector-plugin -D
28
+ # or
29
+ yarn add code-inspector-plugin -D
30
+ # or
31
+ pnpm add code-inspector-plugin -D
32
+ ```
33
+
34
+ ## 🌈 使用
35
+
36
+ 本工具支持作为 `webpack` 或 `vite` 插件使用，详细接入方式参考下面：
37
+
38
+ ### 1. 配置 webpack/vite
39
+
40
+ - <b>webpack 中使用</b>，在 `vue.config.js` 或者 `webpack.config.js` 添加如下配置:
41
+
42
+ `vue.config.js`：
43
+
44
+ ```js
45
+ // vue.config.js
46
+ const { CodeInspectorPlugin } = require('code-inspector-plugin');
47
+
48
+ module.exports = {
49
+ // ...other code
50
+ chainWebpack: (config) => {
51
+ config.plugin('code-inspector-plugin').use(
52
+ CodeInspectorPlugin({
53
+ bundler: 'webpack',
54
+ })
55
+ );
56
+ },
57
+ };
58
+ ```
59
+
60
+ `webpack.config.js`：
61
+
62
+ ```js
63
+ // webpack.config.js
64
+ const { CodeInspectorPlugin } = require('code-inspector-plugin');
65
+
66
+ module.exports = (env = {}) => ({
67
+ plugins: [
68
+ CodeInspectorPlugin({
69
+ bundler: 'webpack',
70
+ }),
71
+ ],
72
+ });
73
+ ```
74
+
75
+ - <b>vite 中使用</b>，在 `vite.config.js` 中添加如下配置:
76
+
77
+ ```js
78
+ // vite.config.js
79
+ import { defineConfig } from 'vite';
80
+ import { CodeInspectorPlugin } from 'code-inspector-plugin';
81
+
82
+ // https://vitejs.dev/config/
83
+ export default defineConfig({
84
+ plugins: [
85
+ CodeInspectorPlugin({
86
+ bundler: 'vite',
87
+ }),
88
+ ],
89
+ });
90
+ ```
91
+
92
+ ### 2. 使用代码审查
93
+
94
+ 目前使用代码审查功能的方式有两种:
95
+
96
+ 1. 【推荐】同时持续按住组合键进行代码审查。 (Mac 系统默认组合键是 `Option + Shift`；Window 的默认组合键是 `Alt + Shift`)
97
+ 2. 点击页面上的 Code Inspector 开关按钮。当开关的颜色变成彩色时，表示代码审查模式打开 <img src="https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f" width="20" />；当开关颜色变成黑白时，表示代码审查模式关闭 <img src="https://user-images.githubusercontent.com/73059627/230129864-e2813188-8d49-4a8e-a6bc-dda19c79b491.png" width="20" />。（Code Inspector 开关按钮 <img src="https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f" width="20" /> 默认隐藏，需要配置 `showSwitch: true` 才会在页面显示。）
98
+
99
+ 当代码审查模式打开时，点击页面上的元素，将自动打开你的代码编辑器并将光标定位到元素对应的代码位置。
100
+
101
+ ### 3. 配置命令行工具(仅当 Mac + Vscode 需要配置此步)
102
+
103
+ 如果你的编辑器是 VSCode 且系统为 MacOS，需要进行如下配置:
104
+
105
+ - 在 VSCode 中执行 `command + shift + p`(mac) 或 `ctrl + shift + p`(windows) 命令, 搜索 指令并点击 `shell Command: Install 'code' command in Path`:
106
+
107
+ <img src="https://s3.bmp.ovh/imgs/2021/08/a99ec7b8e93f55fd.png" width="60%" />
108
+
109
+ - 如果出现如下弹窗，说明配置成功了:
110
+
111
+ <img src="https://s3.bmp.ovh/imgs/2021/08/c3d00a8efbb20feb.png" width="40%" />
112
+
113
+ ## 🎨 可选配置
114
+
115
+ | 参数 | 描述 | 是否必传 | 类型 | 可选值 | 默认值 |
116
+ | ---------- | ---------------------------------------------------------- | -------- | ------------------- | -------------------------------------------------------------------- | ------------------------ |
117
+ | bundler | 指定的打包工具 | 是 | `string` | `vite/webpack` | - |
118
+ | showSwitch | 是否展示功能开关 | 否 | `boolean` | `true/false` | `false` |
119
+ | hotKeys | 组合键触发功能，为 `false` 或者空数组则关闭组合键触发 | 否 | `string[] \| false` | Array<`'ctrlKey'`\|`'altKey'`\|`'metaKey'`\|`'shiftKey'`> \| `false` | `['altKey', 'shiftKey']` |
120
+ | autoToggle | 打开功能开关的情况下，点击触发跳转编辑器时是否自动关闭开关 | 否 | `boolean` | `true/false` | `true` |
121
+
122
+ ## 🎯 指定 IDE
123
+
124
+ 默认情况下，`code-inspector-plugin` 会自动识别当前系统运行中的 IDE 程序并按照优先级打开识别到的第一个。如果你有多种不同的 IDE，你可以指定要打开的 IDE，在项目根目录添加一个名为 `.env.local` 的文件并添加： `CODE_EDITOR=[IDE编码名称]`。
125
+
126
+ 以 vscode 为例，它的`IDE编码名称`是 `code`，则对应在 `.env.local` 中添加如下内容：
127
+
128
+ ```perl
129
+ # 指定 IDE 为 vscode
130
+ CODE_EDITOR=code
131
+ ```
132
+
133
+ IDE 及对应的`IDE编码名称`对照表如下：
134
+
135
+ <table>
136
+ <tr>
137
+ <th>IDE</th>
138
+ <th>IDE编码名称</th>
139
+ </tr>
140
+ <tr>
141
+ <td>Visual Studio Code（vscode）</td>
142
+ <td>code</td>
143
+ </tr>
144
+ <tr>
145
+ <td>Visual Studio Code - Insiders（vscode 内部版）</td>
146
+ <td>code_insiders</td>
147
+ </tr>
148
+ <tr>
149
+ <td>WebStorm</td>
150
+ <td>webstorm</td>
151
+ </tr>
152
+ <tr>
153
+ <td>Atom</td>
154
+ <td>atom</td>
155
+ </tr>
156
+ <tr>
157
+ <td>HBuilderX</td>
158
+ <td>hbuilder</td>
159
+ </tr>
160
+ <tr>
161
+ <td>PhpStorm</td>
162
+ <td>phpstorm</td>
163
+ </tr>
164
+ <tr>
165
+ <td>Pycharm</td>
166
+ <td>pycharm</td>
167
+ </tr>
168
+ <tr>
169
+ <td>IntelliJ IDEA</td>
170
+ <td>idea</td>
171
+ </tr>
172
+ </table>
173
+
174
+ ## 🎨 支持列表
175
+
176
+ 下面是编译器、web 框架以及代码编辑器支持列表:
177
+
178
+ - 当前支持以下打包工具<br />
179
+ ✅ webpack(4.x/5.x)<br />
180
+ ✅ vite
181
+ - 当前支持以下 Web 框架<br />
182
+ ✅ vue2<br />
183
+ ✅ vue3<br />
184
+ ✅ react
185
+ - 当前支持以下代码编辑器<br />
186
+ [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/)
187
+
188
+ ## 📧 交流与反馈
189
+
190
+ 任何使用问题可以加入 QQ 群 `769748484` 或者添加作者微信 `zhoulx1688888` 进行咨询与反馈:
191
+
192
+ <div style="display: flex;">
193
+ <img src="https://github.com/zh-lx/code-inspector/assets/73059627/b107aac0-0582-4392-b2c5-c375ccc4fedc" width="200" />
194
+ <img src="https://user-images.githubusercontent.com/73059627/226233691-848b2a40-f1a9-414e-a80f-3fc6c6209eb1.png" width="200" />
195
+ </div>
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vite-code-inspector-plugin");function u(e){if(!(e!=null&&e.bundler)){console.error("Please specify the bundler in the options of CodeInspectorPlugin.");return}if(e.bundler==="webpack"){const r=require("webpack-code-inspector-plugin");return new r(e)}else return n.ViteCodeInspectorPlugin(e)}exports.CodeInspectorPlugin=u;
package/dist/index.mjs ADDED
@@ -0,0 +1,17 @@
1
+ import { ViteCodeInspectorPlugin as n } from "vite-code-inspector-plugin";
2
+ function c(e) {
3
+ if (!(e != null && e.bundler)) {
4
+ console.error(
5
+ "Please specify the bundler in the options of CodeInspectorPlugin."
6
+ );
7
+ return;
8
+ }
9
+ if (e.bundler === "webpack") {
10
+ const r = require("webpack-code-inspector-plugin");
11
+ return new r(e);
12
+ } else
13
+ return n(e);
14
+ }
15
+ export {
16
+ c as CodeInspectorPlugin
17
+ };
package/package.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "name": "code-inspector-plugin",
3
+ "version": "0.1.0",
4
+ "main": "./dist/index.js",
5
+ "module": "./dist/index.mjs",
6
+ "typings": "./types/index.d.ts",
7
+ "repository": "git@github.com:zh-lx/code-inspector.git",
8
+ "author": "zh-lx <18366276315@163.com>",
9
+ "license": "MIT",
10
+ "files": [
11
+ "dist",
12
+ "types"
13
+ ],
14
+ "exports": {
15
+ ".": {
16
+ "import": {
17
+ "types": "./types/index.d.ts",
18
+ "default": "./dist/index.mjs"
19
+ },
20
+ "require": {
21
+ "types": "./types/index.d.ts",
22
+ "default": "./dist/index.js"
23
+ }
24
+ }
25
+ },
26
+ "homepage": "https://github.com/zh-lx/code-inspector",
27
+ "description": "点击页面上的元素，将自动打开你的代码编辑器并将光标定位到元素对应的代码位置。",
28
+ "keywords": [
29
+ "webpack",
30
+ "vite",
31
+ "plugin",
32
+ "vue",
33
+ "vscode",
34
+ "inspector",
35
+ "inspect"
36
+ ],
37
+ "bugs": {
38
+ "url": "https://github.com/zh-lx/code-inspector/issues"
39
+ },
40
+ "dependencies": {
41
+ "vite-code-inspector-plugin": "0.1.0",
42
+ "code-inspector-core": "0.1.0",
43
+ "webpack-code-inspector-plugin": "0.1.0"
44
+ },
45
+ "devDependencies": {
46
+ "@types/node": "^16.0.1",
47
+ "typescript": "^4.9.3",
48
+ "vite": "^4.1.0"
49
+ },
50
+ "scripts": {
51
+ "build": "tsc && vite build"
52
+ }
53
+ }
package/types/index.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type WebpackCodeInspectorPlugin from 'webpack-code-inspector-plugin/types/index';
2
+ import { ViteCodeInspectorPlugin } from 'vite-code-inspector-plugin';
3
+ import { CodeOptions } from 'code-inspector-core';
4
+ export interface CodeInspectorPluginOptions extends CodeOptions {
5
+ framework?: 'vue';
6
+ bundler: 'vite' | 'webpack';
7
+ }
8
+ export interface CodeInspectorPluginVite extends CodeInspectorPluginOptions {
9
+ bundler: 'vite';
10
+ }
11
+ export interface CodeInspectorPluginWebpack extends CodeInspectorPluginOptions {
12
+ bundler: 'webpack';
13
+ }
14
+ export declare function CodeInspectorPlugin(options: CodeInspectorPluginVite): ReturnType<typeof ViteCodeInspectorPlugin>;
15
+ export declare function CodeInspectorPlugin(options: CodeInspectorPluginWebpack): WebpackCodeInspectorPlugin;