VS Code 打开 JS 文件后不识别语法或无智能提示？

Question

常见问题：VS Code 打开 `.js` 文件后无语法高亮、无类型提示（如 `undefined` 方法报错不提示）、`require`/`import` 无自动补全，甚至 `console.log()` 都不显示参数提示。根本原因多为：① 当前文件未被识别为 JavaScript（右下角语言模式显示非“JavaScript”或“JavaScript React”）；② 工作区缺少 `jsconfig.json`（用于普通 JS 项目）或 `tsconfig.json`（含 JSDoc 类型标注时），导致 TypeScript 语言服务无法启用智能提示；③ 内置 TypeScript 插件被禁用或版本异常；④ 文件位于符号链接路径或网络驱动器中，触发 VS Code 的安全限制而禁用语言功能。该问题**并非插件缺失所致**，而是 VS Code 基于语言服务（TypeScript Server）的静态分析机制未正常激活——即使纯 JS 项目，也依赖 TS 服务提供现代 JS（ES2015+）的完整语义支持。

Answer 1

```html

一、表层现象：VS Code 中 .js 文件“失能”的直观症状

打开一个 .js 文件后，开发者常遭遇如下“静默失效”现象：

• 语法无高亮（全为单色文本，或仅基础关键字着色）；
• console.log() 输入时无参数签名提示（如未显示 (message?: any, ...optionalParams: any[]): void）；
• 调用 obj.nonExistentMethod() 不报红波浪线，也无“Property 'nonExistentMethod' does not exist”提示；
• require('./utils') 或 import { helper } from './lib' 无路径补全、模块解析失败；
• 鼠标悬停无 JSDoc 注释渲染，/** @type {string[]} */ 类型标注完全被忽略。

这些并非编辑器“卡顿”，而是语言服务（Language Service）彻底未挂载——本质是 TypeScript Server（TSServer）未参与 JS 文件的语义分析。

二、中层诊断：四类核心阻断机制逐项验证

以下为可复现、可验证的诊断路径，建议按序执行：

检查项	验证方式	典型异常表现
① 语言模式识别	查看窗口右下角状态栏，点击语言标签	显示 “Plain Text”、“JSON” 或 “TypeScript JSX”，非 “JavaScript” / “JavaScript React”
② 配置文件存在性	在工作区根目录执行：ls jsconfig.json tsconfig.json	二者均缺失，或 jsconfig.json 存在但 "checkJs": true 未启用
③ TS 插件状态	Cmd/Ctrl+Shift+P → “Extensions: Show Built-in Extensions” → 搜索 “TypeScript”	“TypeScript and JavaScript Language Features” 显示禁用，或版本号为 0.0.0（损坏标志）
④ 路径安全策略	在 VS Code 设置中搜索 security.allowedUNCHosts，并检查文件路径是否含 \\ 或 /mnt/	状态栏出现黄色警告：“This file is in a restricted location. Language features are disabled.”

三、深层原理：为何纯 JS 项目必须依赖 TypeScript Server？

VS Code 自 v1.23 起已将 JavaScript 支持完全重构为基于 TypeScript 的语言服务（官方公告）。其架构本质如下：

JS File → (VS Code TextBuffer) 
        ↓ 
TSServer (tsserver.js) ←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←......```html
一、现象层：表征性症状诊断（What You See）
打开 .js 文件后，代码呈纯灰白底色——无语法高亮；
console.log() 输入时无参数签名提示（如未显示 (message?: any)）；
调用 obj.undefinedMethod() 不触发红色波浪线警告；
require('') 或 import 无模块路径自动补全；
右下角状态栏语言模式显示为 Plain Text、JSON 或 JavaScript (Legacy)，而非 JavaScript 或 JavaScript React。

二、识别层：语言模式与上下文绑定（Why It’s Not JS）
VS Code 的语言服务启动严格依赖「文件语言模式」（Language Mode）与「工作区根目录」的双重判定。若文件被错误关联（如通过 File → Open File... 单独打开而非 Open Folder），或 `.vscode/settings.json` 中存在 "files.associations" 覆盖规则，则 TypeScript Server 拒绝加载——即使文件扩展名为 .js。
触发场景
VS Code 行为
TS Server 状态
单文件打开（非文件夹）
默认 Plain Text 模式
完全不启动
路径含 node_modules 或 dist
自动禁用 TS 服务（性能保护）
跳过语义分析

三、配置层：jsconfig.json —— JS 项目的“类型系统契约”（The Missing Contract）
纯 JavaScript 项目必须显式声明 jsconfig.json 才能启用 TS 语言服务的完整能力。该文件本质是 TypeScript 编译器对 JS 的“宽容型配置”，启用 allowJs: true、checkJs: true 及模块解析支持：
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "target": "ES2020",
    "module": "commonjs",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["**/*.js", "**/*.jsx"],
  "exclude": ["node_modules"]
}

四、服务层：TypeScript Server 的隐式依赖与健康检查（The Engine Under the Hood）
VS Code 内置的 TypeScript 插件（vscode.typescript-language-features）并非“可选增强”，而是 JS 智能提示的**唯一执行引擎**。其运行状态可通过以下方式验证：
执行命令：Developer: Toggle Developer Tools → 控制台搜索 TS Server 错误；
查看输出面板：Output → TypeScript 是否打印 Starting TS Server；
若出现 Cannot read property 'getProgram' of undefined，大概率是 TS 版本与 VS Code 内置版本冲突。

五、安全层：符号链接、网络驱动器与语言服务熔断机制（The Security Gate）
为防范路径遍历与远程文件注入风险，VS Code 默认对以下路径禁用语言服务：
Windows 下映射的网络驱动器（如 Z:\project\）；
macOS/Linux 中通过 ln -s 创建的符号链接路径（如 ~/workspace → /Volumes/SSD/project）；
WSL2 中跨发行版访问的 Windows 路径（/mnt/c/Users/...）。
解决方案需在工作区设置中显式启用：
// .vscode/settings.json
{
  "typescript.preferences.disableAutomaticTypeAcquisition": false,
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  "security.workspace.trust.untrustedFiles": "open"
}

六、验证与闭环：端到端诊断流程图

flowchart TD
  A[打开 .js 文件] --> B{右下角语言模式是否为 JavaScript？}
  B -->|否| C[手动切换：Ctrl+Shift+P → “Change Language Mode”]
  B -->|是| D{工作区是否存在 jsconfig.json 或 tsconfig.json？}
  D -->|否| E[创建最小化 jsconfig.json]
  D -->|是| F{Output → TypeScript 面板是否有启动日志？}
  F -->|无| G[检查内置 TS 插件是否启用
重启 TS Server：Cmd/Ctrl+Shift+P → “TypeScript: Restart TS Server”]
  F -->|有| H[检查文件路径是否为 symlink/network drive]
  H -->|是| I[添加信任设置或改用本地路径]
  H -->|否| J[✅ 语言服务已就绪]

```