Closed tazyong closed 3 years ago
使用 ant-design-pro 开发的时候发现了 react-dev-inspector 插件。后来自己使用 umi 3.x 搭框架时,同样的环境、配置和操作,ant-design-pro 表现正常,可是自己搭的 umi 3.x 一直无法唤醒 vscode ,请问这个问题怎么解决?
ant-design-pro
react-dev-inspector
umi 3.x
vscode
安装 react-dev-inspector 依赖。
tyarn add react-dev-inspector --dev
在 config/config.dev.ts 中引入插件。
config/config.dev.ts
import { defineConfig } from 'umi'; export default defineConfig({ plugins: [ // https://github.com/zthxxx/react-dev-inspector 'react-dev-inspector/plugins/umi/react-inspector', ], // https://github.com/zthxxx/react-dev-inspector#inspector-loader-props inspectorConfig: { excludes: [], babelPlugins: [], babelOptions: {}, }, });
在 src/app.tsx 使用 Inspector 。
src/app.tsx
Inspector
import { Fragment } from 'react'; import { Inspector } from 'react-dev-inspector'; import type { InspectParams } from 'react-dev-inspector'; const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : Fragment; /** * 框架布局配置 * @see https://procomponents.ant.design/components/layout */ export const layout: RunTimeLayoutConfig = ({ initialState }) => ({ childrenRender: children => ( <InspectorWrapper // https://github.com/zthxxx/react-dev-inspector#inspector-component-props keys={['control', 'shift', 'command', 'c']} disableLaunchEditor={false} onHoverElement={(params: InspectParams) => { }} onClickElement={(params: InspectParams) => { }} > {children} </InspectorWrapper> ), })
貌似一切正常,就是无法唤起 vscode 。
问题已解决, 是工程路径的问题造成的。 我的工程目录包含了特殊字符 @ ,把目录名称改了就可以了。 react-dev-utils 要求所有文件的路径必须是 字母 数字 . - _ 这些字符组成的。
@
react-dev-utils
字母
数字
.
-
_
使用
ant-design-pro
开发的时候发现了react-dev-inspector
插件。后来自己使用umi 3.x
搭框架时,同样的环境、配置和操作,ant-design-pro
表现正常,可是自己搭的umi 3.x
一直无法唤醒vscode
,请问这个问题怎么解决?环境和依赖
操作步骤
第一步
安装
react-dev-inspector
依赖。第二步
在
config/config.dev.ts
中引入插件。第三步
在
src/app.tsx
使用Inspector
。最终结果
貌似一切正常,就是无法唤起
vscode
。