虚拟机中配置代码提示支持React开发

在ref="/tag/438/" style="color:#EB6E00;font-weight:bold;">虚拟机里做前端开发，尤其是用 React 写项目时，如果没有代码提示，写组件就像闭着眼开车——心里没底。比如你敲个 useE，编辑器不弹出 useState 的建议，就得手动回忆拼写，效率直接打对折。

为什么虚拟机里容易丢代码提示

很多人在本地主机上用 VS Code 写 React，提示很顺滑，但一连到虚拟机里的项目目录，智能感知就变弱了。核心原因是语言服务器（如 TypeScript Server 或 ESLint）默认运行在本地，而虚拟机中的项目路径、依赖环境和类型定义没被正确识别。

关键一步：启用远程开发插件

以 VS Code 为例，装上 Remote - SSH 插件后，可以直接连接虚拟机。这时候编辑器的整个工作区都运行在远端，node_modules 里的类型定义、React 的声明文件都能被扫描到，代码提示自然就回来了。

打开命令面板，输入 “Remote-SSH: Connect to Host”，连上你的虚拟机 IP。进入项目根目录后，VS Code 会自动检测到 package.json，并加载相关依赖。

确保项目有正确的类型支持

React 的提示依赖于 @types/react 和 @types/react-dom。如果项目是用 Create React App 搭的，一般自带；如果是自己配的 webpack 环境，得手动装：

npm install --save-dev @types/react @types/react-dom

装完之后，TS Server 就能解析 JSX.Element 类型，函数组件的 props 提示也能正常弹出。

自定义组件也能提示？当然可以

比如你在虚拟机项目里写了这样一个组件：

interface ButtonProps {
  text: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
  return <button onClick={onClick}>{text}</button>;
};

只要类型写清楚，别人在调用 <Button 时，编辑器就会提示 text 和 onClick 是必填项，漏了会标红。这种体验在虚拟机里一样能实现，前提是开发环境跑在远端。

别忘了 .vscode 配置文件

在项目根目录加个 .vscode/settings.json，明确指定使用 TypeScript 的内置语法检查：

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

这样即使虚拟机里版本特殊，也不会误用本地的 TS 版本导致解析出错。

把开发环境完整搬进虚拟机，不只是为了隔离依赖，更是为了让工具链全程在线。代码提示看着小，但它每天帮你省下的搜索、查文档、试错时间，积少成多，才是真实生产力。