Skip to content

Commit 65c7bff

Browse files
xxxsfxxxsf
committed
feat: add meadme.en
1 parent e35f8fd commit 65c7bff

4 files changed

Lines changed: 432 additions & 29 deletions

File tree

‎README.en-US.md‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<p align="center">
2+
<a href="https://github.com/hellof2e/vite-plugin-dev-inspector">
3+
<img src="https://raw.githubusercontent.com/hellof2e/vite-plugin-dev-inspector/988a71dca91490cf4a604c98609b24f80f7eb383/logo.svg" width="180" alt="vite-plugin-dev-inspector">
4+
</a>
5+
</p>
6+
7+
<p align="center">
8+
<a href="https://www.npmjs.com/package/vite-plugin-dev-inspector" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-dev-inspector" alt="NPM Version" /></a>
9+
<a href="https://github.com/hellof2e/vite-plugin-dev-inspector/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/hellof2e/vite-plugin-dev-inspector" alt="License" /></a>
10+
</p>
11+
12+
<p align="center">
13+
<a href="https://stackblitz.com/edit/vitejs-vite-shxjct?file=src%2FApp.vue"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
14+
</p>
15+
16+
17+
18+
## Introduction
19+
20+
A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
21+
22+
<p align="center">
23+
<img src="./preview.gif" alt="vite-plugin-vue-inspector">
24+
</p>
25+
26+
## Installation
27+
28+
```bash
29+
30+
# vite-plugin-dev-inspector
31+
32+
npm install vite-plugin-dev-inspector -D
33+
34+
35+
```
36+
37+
## Usage
38+
39+
40+
### Keyboard shortcut (快捷键)
41+
42+
* Mac: Command(⌘) + Shift(⇧)
43+
* Windows: Ctrl + Shift(⇧)
44+
45+
46+
### Configuration Vite
47+
48+
```ts
49+
// for Vue2
50+
51+
import { defineConfig, } from 'vite'
52+
import { createVuePlugin, } from 'vite-plugin-vue2'
53+
import inspector from 'vite-plugin-dev-inspector'
54+
55+
export default defineConfig({
56+
plugins: [
57+
createVuePlugin(),
58+
inspector(),
59+
],
60+
})
61+
```
62+
63+
```ts
64+
// for Vue3
65+
66+
import { defineConfig } from 'vite'
67+
import Vue from '@vitejs/plugin-vue'
68+
import inspector from 'vite-plugin-dev-inspector'
69+
70+
export default defineConfig({
71+
plugins: [
72+
Vue(),
73+
inspector()
74+
],
75+
})
76+
```
77+
78+
```ts
79+
// for react
80+
import { defineConfig } from 'vite'
81+
import react from '@vitejs/plugin-react'
82+
import inspector from 'vite-plugin-dev-inspector'
83+
84+
// https://vitejs.dev/config/
85+
export default defineConfig({
86+
plugins: [
87+
react(),
88+
inspector(),
89+
],
90+
})
91+
```
92+
93+
```ts
94+
// for preact
95+
import { defineConfig } from 'vite'
96+
import preact from '@preact/preset-vite'
97+
import inspector from 'vite-plugin-dev-inspector'
98+
99+
// https://vitejs.dev/config/
100+
export default defineConfig({
101+
plugins: [
102+
preact(),
103+
inspector(),
104+
],
105+
})
106+
```
107+
108+
109+
```ts
110+
// for preact
111+
import { defineConfig } from 'vite'
112+
import { svelte } from '@sveltejs/vite-plugin-svelte'
113+
import inspector from 'vite-plugin-dev-inspector'
114+
115+
// https://vitejs.dev/config/
116+
export default defineConfig({
117+
plugins: [
118+
svelte(),
119+
inspector(),
120+
],
121+
})
122+
```
123+
124+
### Options
125+
126+
127+
```ts
128+
inspector({
129+
/**
130+
* Toggle button visibility
131+
* @default 'active'
132+
*/
133+
toggleButtonVisibility?: 'always' | 'active' | 'never'
134+
135+
/**
136+
* Default enable state
137+
* @default false
138+
*/
139+
enabled?: boolean
140+
141+
/**
142+
* Define a combo key to toggle inspector
143+
* @default 'control-shift' on windows, 'meta-shift' on other os
144+
*
145+
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
146+
* examples: control-shift, control-o, control-alt-s meta-x control-meta
147+
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
148+
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
149+
* You can also disable it by setting `false`.
150+
*/
151+
toggleComboKey?: string | false
152+
153+
154+
/**
155+
* append an import to the module id ending with `appendTo` instead of adding a script into body
156+
* useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
157+
*
158+
* WARNING: only set this if you know exactly what it does.
159+
*/
160+
appendTo?: string | RegExp
161+
162+
/**
163+
* Customize openInEditor host (e.g. http://localhost:3000)
164+
* @default false
165+
* @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
166+
*/
167+
openInEditorHost?: string | false
168+
169+
/**
170+
* lazy load inspector times (ms)
171+
* @default false
172+
*/
173+
lazyLoad?: number | false
174+
175+
/**
176+
* disable inspector on editor open
177+
* @default false
178+
*/
179+
disableInspectorOnEditorOpen?: boolean
180+
181+
/**
182+
* Hide information in VNode and produce clean html in DevTools
183+
*
184+
* Currently, it only works for Vue 3
185+
*
186+
* @default true
187+
*/
188+
cleanHtml?: boolean
189+
190+
/**
191+
* Target editor when open in editor
192+
*
193+
* @default code (Visual Studio Code)
194+
*/
195+
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'
196+
})
197+
```
198+
199+
200+
## Notes
201+
Vite-plugin-dev-inspector is inspired by [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector), but it does not repy on front-end frameworks. It can support any front-end technology stack at the same time, such as Vue 2 & 3, React, Angular, Svelte, Nuxt and SSR.
202+
203+
## License
204+
205+
[MIT LICENSE](./LICENSE)

‎README.md‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,36 +19,33 @@
1919
</p>
2020

2121

22+
## 介绍
2223

23-
## Introduction
24-
25-
A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
24+
一个vite插件，当你点击浏览器的元素时，它可以自动跳转到本地IDE。同时支持 Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
2625

2726
<p align="center">
2827
<img src="./preview.gif" alt="vite-plugin-vue-inspector">
2928
</p>
3029

31-
## Installation
30+
## 安装
3231

3332
```bash
3433

3534
# vite-plugin-dev-inspector
3635

3736
npm install vite-plugin-dev-inspector -D
38-
39-
4037
```
4138

42-
## Usage
39+
## 使用
4340

4441

45-
### Keyboard shortcut (快捷键)
42+
### 快捷键
4643

4744
* Mac: Command(⌘) + Shift(⇧)
4845
* Windows: Ctrl + Shift(⇧)
4946

5047

51-
### Configuration Vite
48+
### Vite 配置
5249

5350
```ts
5451
// for Vue2
@@ -132,7 +129,7 @@ export default defineConfig({
132129
```ts
133130
inspector({
134131
/**
135-
* Toggle button visibility
132+
* Toggle button visibility / 切换按钮隐藏展示
136133
* @default 'active'
137134
*/
138135
toggleButtonVisibility?: 'always' | 'active' | 'never'
@@ -155,11 +152,6 @@ inspector({
155152
*/
156153
toggleComboKey?: string | false
157154

158-
/**
159-
* Toggle button display position
160-
* @default top-right
161-
*/
162-
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
163155

164156
/**
165157
* append an import to the module id ending with `appendTo` instead of adding a script into body

0 commit comments

Comments
 (0)