React代码运行正常但Visual Studio Code显示括号红标错误如何解决

问题根因 #

该报错属于IDE的JSX语法校验工具误判：你在<div>标签内直接写$紧跟{}时，IDE的校验插件（通常是ESLint规则或内置JavaScript语言服务）错误将这段内容识别为未被反引号包裹的模板字符串片段，才抛出异常。实际React运行时可以正确解析：$会被识别为普通文本，{}内的内容会被识别为JSX表达式，因此代码运行无任何问题。

解决方案 #

• 写法规避（无需修改配置，最简便）
  如果需要显示美元符号加表达式结果，可以把内容整体包裹为模板字符串放入JSX表达式：

  <div>{`${你的变量名称}`}</div>
  

  也可以将$单独作为文本表达式输出：

  <div>{'$'}{你的变量名称}</div>
  

  两种写法都不会触发误报，运行效果和原有写法完全一致。
• 调整IDE校验规则
  如果不想修改原有写法，可以调整校验配置：
  1. VS Code用户可打开设置，搜索javascript.validate.enable，关闭选项即可（如果你的项目有独立ESLint配置，不会影响正常校验）
  2. 如果是项目ESLint抛出的错误，找到项目根目录的.eslintrc配置文件，在rules字段中添加"no-template-curly-in-string": "off"即可关闭该误判规则
• 确认文件语言模式
  检查IDE右下角的文件语言模式，确保设置为JavaScript React（JSX模式），如果被误识别为普通JavaScript或其他模板语言，也会触发这类误报，点击语言模式切换即可。

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