VSCode默认浏览器预览显示代码而非页面，关联GitHub仓库时异常

1. 检查仓库文件的扩展名 #

• 确认GitHub仓库内的目标文件扩展名是.html，而非.txt或其他格式（比如误命名为index.html.txt，系统隐藏扩展名时会看不到后缀）。可在VSCode左侧文件列表查看完整扩展名，或在系统文件夹中开启“显示文件扩展名”选项。

2. 核对VSCode文件关联设置 #

• 打开VSCode设置（快捷键Ctrl+,），搜索files.associations，确认.html文件关联的是html语言模式，而非plaintext或其他。若存在错误关联，添加或修改配置：

  "files.associations": {
    "*.html": "html"
  }
  

3. 检查仓库的.gitattributes配置 #

• 查看仓库根目录下的.gitattributes文件，确认是否存在强制将HTML文件识别为纯文本的规则，比如*.html diff=plaintext。如果有这类规则，删除或修改后重启VSCode测试。

4. 规范Live Server的启动方式 #

• 确保通过Live Server的“Open with Live Server”右键选项，或点击VSCode右下角的“Go Live”按钮启动预览，而非直接用浏览器打开本地文件。仓库文件路径若含特殊字符（空格、中文），直接打开本地文件易出问题，Live Server通过本地服务器访问可规避此问题。

5. 排查工作区设置冲突 #

• 若以整个GitHub仓库作为工作区，查看工作区内的.vscode/settings.json文件，是否存在覆盖全局设置的配置（比如修改了files.associations或Live Server相关参数）。可暂时重命名该文件，重启VSCode后测试预览效果。

6. 验证Git自动换行设置 #

• 在仓库文件夹打开终端，执行以下命令查看Git的换行符配置：

  git config core.autocrlf
  

  若输出为true，可能导致HTML文件换行符被转换，影响浏览器解析。可临时修改配置测试：

  git config core.autocrlf false
  

  重新打开文件后用Live Server预览。

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