最省事的方式是安装 Live Server 插件后右键 HTML 文件选择“Open with Live Server”，自动启动本地 HTTP 服务并支持保存即刷新，无需配置路径、终端或 Node 环境。
Mac 上 VS Code 跑前端页面，最省事的方式是什么？
直接用 Live Server 插件，右键 HTML 文件 → 选 Open with Live Server，自动起一个本地 <a href="https://www.php.cn/link/e6bebc499c445570ecbe7829ae23b881">https://www.php.cn/link/e6bebc499c445570ecbe7829ae23b881</a> 服务，改完代码保存就刷新，不用配路径、不碰终端、不装 Node 也能跑通。
- 必须先安装插件：在扩展面板搜
Live Server，点安装，重启（或重载窗口）后生效 - 不要双击 HTML 文件打开——那样走的是
file://协议，很多现代 API（如fetch、import模块）会因跨域被浏览器拦掉 - 默认端口是
5500，如果被占用了，它会自动跳到下一个可用端口，但你得看右下角状态栏提示的地址，别硬输:5500 - 它只服务当前文件所在文件夹及其子目录，所以
index.html和js/main.js放对位置才能加载成功
为什么刚写完 HTML，右键没看到 “Open with Live Server”？
常见原因不是插件没装，而是当前文件没被识别为 HTML，或者 VS Code 没“认出”它是可运行的前端入口。
- 确保文件后缀是
.html（不是.txt或没后缀），且右下角状态栏显示语言模式为HTML；如果不是，点一下状态栏语言名，选Change Language Mode→HTML - 如果文件是新建的空白页，还没保存，VS Code 可能没赋予语言上下文，先按
Cmd + S保存为index.html再试 - 插件装完没重启 VS Code？部分插件（尤其是老版本）需要重载窗口才激活，快捷键是
Cmd + Shift + P→ 输入Developer: Reload Window回车
想用 ES6 模块（import）却报错 “Not supported in current context”？
这是浏览器限制，不是 VS Code 的锅。本地直接开 HTML（哪怕用 Live Server）默认仍受同源策略和模块加载规则约束，尤其当你用 import 加载本地 .js 文件时。
- 必须确保
script标签加了type="module"：<script type="module" src="./js/main.js"></script>
- 所有模块路径必须是相对或绝对 URL（不能是裸文件名），且不能跨协议——Live Server 起的是
http://，所以./js/utils.js可以，但js/utils.js（缺./）可能失败 - 如果你 import 的是第三方包（比如
lodash-es），Live Server 压根不处理node_modules，这时就得切到Vite或Webpack开发服务器——它们能解析import并打包
Mac M 系列芯片装完 VS Code，中文乱码或终端命令不识别？
这不是 VS Code 本身的问题，而是 Shell 配置和环境变量没接上，尤其新 macOS（Sonoma/Ventura 后）默认用 zsh，但某些插件或脚本仍找 bash 的配置。
立即学习“前端免费学习笔记（深入）”；
- 终端里输入
echo $SHELL，确认是/bin/zsh；如果是/bin/bash，说明你手动改过，需统一 - 安装完 Node 或 nvm 后，必须把初始化脚本加进
~/.zshrc（不是~/.bash_profile），例如：export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
- 然后执行
source ~/.zshrc，再验证node -v和nvm -v是否正常 - VS Code 内置终端有时不会自动读取 shell 配置，关掉所有终端窗口，再按
Cmd + Shift + P→Terminal: Create New Terminal，让它重新加载环境
Live Server 是起点，不是终点；真正写项目时，你会很快撞上模块解析、样式作用域、API 调试这些事——那些时候，VS Code 的集成终端和调试器才真正派上用场，而不是靠右键点一下。
