如何让JSX文件在Visual Studio 2017（搭配ReactJS.NET）中正常工作

我之前在使用ReactJS.NET（.NET Framework版本）时也碰到过一模一样的问题——项目能正常运行，但VS对JSX文件完全没智能提示，看着一堆无语法高亮的代码实在难受。下面是我亲测有效的几个解决步骤：

• 安装React类型定义
  VS的智能提示依赖类型定义文件来识别React的API，哪怕你用的是纯JSX而非TypeScript，也需要安装这些类型。打开项目根目录的命令行，运行：

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

  安装完成后，VS就能识别React的组件、props等语法细节了。

• 添加jsconfig.json配置文件
  给项目根目录新建一个jsconfig.json文件，内容如下：

  {
    "compilerOptions": {
      "jsx": "react",
      "target": "ES6",
      "module": "ESNext",
      "allowSyntheticDefaultImports": true
    },
    "include": [
      "./**/*.jsx",
      "./**/*.js"
    ],
    "exclude": [
      "node_modules",
      "wwwroot/lib"
    ]
  }
  

  这个文件会告诉VS你的项目是React项目，该如何解析JSX语法，同时指定要包含的文件范围，避免解析无关的第三方库。

• 调整JSX文件的编辑器关联
  你现在把JSX关联到了TypeScript编辑器，但更合适的是关联到专门的「JavaScript React」编辑器：

  1. 打开VS的「工具」→「选项」→「文本编辑器」→「文件扩展名」
  2. 找到扩展名jsx，在「编辑器」下拉菜单里选择「JavaScript React」（如果没这个选项，确保你安装了VS的JavaScript和TypeScript工作负载）
  3. 点击「确定」保存设置

• 启用VS的JavaScript语言服务
  检查一下语言服务是否开启：

  1. 「工具」→「选项」→「文本编辑器」→「JavaScript/TypeScript」→「语言服务」
  2. 确保「启用JavaScript语言服务」和「启用TypeScript语言服务」都勾选了
  3. 同时可以开启「自动完成」「参数信息」这些智能提示相关的选项

• 清理VS缓存并重启
  有时候VS的缓存会导致配置不生效，你可以：

  1. 关闭所有VS窗口
  2. 删除%LOCALAPPDATA%\Microsoft\VisualStudio\<你的VS版本>\ComponentModelCache目录下的文件
  3. 重新打开项目，等待VS加载完成，智能提示应该就正常了

这些步骤下来，我的VS就能正常识别JSX文件，提供React的智能提示和语法高亮了，你可以挨个试试～

内容的提问来源于stack exchange，提问作者Cowborg