根本原因是vscode默认将.js文件识别为javascript语言模式,未启用jsx解析;需手动将.js文件关联为javascriptreact语言模式,并重启eslint server以加载react相关规则。

VSCode 里 .js 文件写 JSX 没高亮、不报错、跳转失效
根本原因不是你代码写错了,是 VSCode 默认把 .js 当纯 JavaScript 解析,压根不启用 JSX 语法树。它不认识 <div> 是 JSX 元素,自然不会校验 <code>onClick 拼写,也不会给组件名加跳转。
临时解决:打开任意 .js 文件 → 点右下角语言模式(显示 “JavaScript”)→ 输入 javascriptreact 回车。
永久生效(推荐):在项目根目录建 .vscode/settings.json,写入:
{
"files.associations": {
"src/**/*.js": "javascriptreact",
"pages/**/*.js": "javascriptreact"
}
}
注意:javascriptreact 不能拼成 jsx 或 react,拼错就完全无效;改完后必须执行 Ctrl+Shift+P → 输入 ESLint: Restart ESLint Server,否则 lint 规则(如 react/react-in-jsx-scope)不会加载。
TSX 文件不识别、<div> 灰色、补全失效
<p>VSCode 默认把 <code>.tsx 当 TypeScript 处理,但不等于自动启用 JSX 支持——它仍可能用普通 TS 解析器,导致 JSX 标签无高亮、无语义补全、不校验 props 类型。
确认两件事:
- 项目
.vscode/settings.json中有:"*.tsx": "typescriptreact" -
tsconfig.json里启用了 JSX 编译选项:"jsx": "react-jsx"
缺任一者,.tsx 都只是“带扩展名的 TS”,不是真正的 React + TS 环境。验证方式:在 .tsx 文件里写 const a = <div>,如果没报 <code>Parsing error: Unexpected token ',说明语言模式或 tsconfig 没生效。
<h3>Node.js 运行时找不到、<code>node -v 在终端报 command not found
这不是插件问题,是 VSCode 启动时没继承 shell 的 PATH。macOS/Linux 下从 Dock 或 Spotlight 启动 VSCode,不会加载 ~/.zshrc;Windows 下 Node.js 安装时若没勾选 “Add to PATH”,系统环境变量里就没有 C:\Program Files\nodejs\。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
验证唯一标准:在 VSCode 内置终端(Ctrl + `)里运行 node -v。没输出就别配 launch.json,也别点 F5 —— 所有调试配置都白搭。
修复方法:
- macOS/Linux:改完
~/.zshrc后必须重启 VSCode,或直接在终端执行code .启动项目 - Windows:进“系统属性 → 高级 → 环境变量”,把
C:\Program Files\nodejs\加进“系统变量”的PATH,再重启 VSCode
ESM 项目里 import 报错、调试断点不命中
Node.js 默认按 CommonJS 解析,遇到 import 就抛 Cannot use import statement outside a module;即使写了 "type": "module",VSCode 调试器若没读到,照样当 CJS 处理。
必须同时满足三项:
- 项目根目录
package.json含"type": "module" -
launch.json中"program"指向的是真实可执行的 JS 文件(如dist/index.js),不是.ts或.tsx源码 - TypeScript 项目还需
tsconfig.json开启"sourceMaps": true,且编译后.js和.js.map在同一目录
容易被忽略的是:launch.json 里不要手填 runtimeExecutable,除非你明确用 nvm 切版本并需要锁定路径;绝大多数情况,让 VSCode 自动找系统 node 更可靠。










