React开发时点击浏览器报错链接能否跳转至VS Code对应代码行

该功能完全可以实现，针对不同的React项目搭建方式，对应方案如下：

1. Create React App（CRA）项目 #

CRA创建的项目默认已经内置该能力，开发环境下报错栈的文件路径默认是可点击链接，点击后会直接唤起VS Code定位到对应行。如果未生效，检查两个配置项：

• 确保当前运行的是development开发环境，生产环境打包会移除源码映射，不支持该功能
• 确保系统已经将VS Code设置为js/jsx/ts/tsx等源码文件的默认打开程序

2. 自定义Webpack的React项目 #

自己配置Webpack的项目需要做两处调整：

• 配置源码映射：在webpack.config.js中设置devtool: 'cheap-module-source-map'，生成编译代码和源码的映射关系，才能拿到正确的源文件路径和行号
• 安装配置错误弹窗插件：
  1. 执行安装命令：npm install error-overlay-webpack-plugin --save-dev
  2. 修改webpack配置文件：

  const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
  
  module.exports = {
    // 其余原有配置
    plugins: [new ErrorOverlayPlugin()],
    devtool: 'cheap-module-source-map',
  };
  

• 验证VS Code唤起协议：在浏览器地址栏输入vscode://file/你的项目绝对路径/src/components/SelectData/index.js:112，回车后如果能直接打开对应文件定位到112行，说明协议配置正常。如果未生效，打开VS Code设置搜索window.openFilesInNewWindow，将值设置为on即可

3. Vite搭建的React项目 #

Vite默认已经内置该能力，开发环境下报错路径可直接点击跳转。如果需要额外增强能力，可安装vite-plugin-react-inspector插件，支持点击页面元素直接跳转到对应组件源码位置。

注意：该功能仅可在开发环境使用，生产环境出于安全和包体积优化考虑，不要保留源码映射和调试相关配置

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