umi 3.x 在 window 10 环境无法唤醒 vscode

[tazyong]

使用 ant-design-pro 开发的时候发现了 react-dev-inspector 插件。后来自己使用 umi 3.x 搭框架时，同样的环境、配置和操作，ant-design-pro 表现正常，可是自己搭的 umi 3.x 一直无法唤醒 vscode ，请问这个问题怎么解决？

环境和依赖

• window版本：10
• node版本：14.15.3
• chrome版本：91.0.4472.101
• umi版本：3.4.25
• react版本：17.0.2
• react-dev-inspector版本：1.6.0

操作步骤

第一步

安装 react-dev-inspector 依赖。

tyarn add react-dev-inspector --dev

第二步

在 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 。

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 。

[tazyong]

问题已解决， 是工程路径的问题造成的。 我的工程目录包含了特殊字符 @ ，把目录名称改了就可以了。 react-dev-utils 要求所有文件的路径必须是 字母 数字 . - _ 这些字符组成的。