Visual Studio Code语法高亮消失代码变灰，代码与指令全部显示在浏览器如何解决

• VS Code语法高亮失效原因
  • 文件后缀名与代码语言不匹配，或被误修改为.txt等纯文本后缀，导致VS Code无法识别对应语言的语法规则
  • VS Code右下角的语言模式被手动切换为「纯文本」
  • 对应编程语言的官方支持插件被意外禁用或卸载
  • VS Code颜色主题被修改为无语法高亮的纯文本主题
• 浏览器直接显示源代码原因
  • 你直接将.js等脚本文件拖入浏览器打开，没有通过.html文件引入脚本，浏览器默认会将纯文本格式的代码直接渲染出来而非执行
  • 若使用服务端开发框架，可能是本地服务配置错误，将源代码当作静态文本直接返回给浏览器，没有做解析执行

VS Code语法高亮修复 #

1. 检查文件后缀：确认代码文件的后缀与所用语言匹配，例如前端HTML文件后缀为.html、JavaScript文件后缀为.js，不要使用.txt等纯文本后缀
2. 修正语言模式：点击VS Code右下角显示的语言标识（如果是纯文本会显示「纯文本」字样），在弹出的下拉列表中选择对应代码的语言即可
3. 检查插件状态：打开VS Code扩展面板，搜索对应语言的官方支持插件（例如JavaScript and TypeScript Nightly、HTML Language Features），确认插件处于启用状态，若被禁用重新启用后重启VS Code即可
4. 恢复默认主题：按下快捷键Ctrl+K Ctrl+T（Mac系统为Cmd+K Cmd+T）打开主题选择面板，选择默认的Dark+/Light+主题即可恢复默认高亮配置

浏览器显示代码修复 #

• 若开发前端静态页面：直接用浏览器打开后缀为.html的入口文件，不要单独打开.js/.css文件，JS脚本需要通过<script>标签引入到HTML文件中才会正常执行，向控制台输出内容
• 若使用服务端开发框架：确保你已启动对应本地开发服务，通过服务提供的本地地址（例如http://localhost:端口号）访问页面，不要直接打开本地源代码文件

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