前端开发必备VSCode插件安装避坑心得-VSCode-PHP中文网

live server 保存不自动刷新因默认仅监听工作区根目录，需用“open folder”打开项目、确保右下角显示“go live”、配置root路径、避免与vite等工具端口冲突。

前端开发必备vscode插件安装避坑心得

Live Server 为什么保存不自动刷新？

这是前端新手最常遇到的问题：装了 Live Server，改完 HTML/CSS/JS 文件一保存，浏览器没反应。根本原因不是插件坏了，而是它默认只监听当前工作区根目录下的文件变更，且对某些路径结构不敏感。

确保你已用 File > Open Folder 打开整个项目文件夹，而不是单个文件——否则 Live Server 无法建立正确的监听上下文
检查右下角状态栏是否显示 Go Live，没显示说明服务根本没启动；点击它手动开启
如果用了 src/ 或 public/ 子目录存放入口文件，需在设置中配置 liveServer.settings.root，比如设为 "./src"
某些构建工具（如 Vite、Webpack Dev Server）会自带热更新，此时再开 Live Server 会造成端口冲突或重复监听，建议关闭其中一个

ESLint 和 Prettier 冲突导致格式化失效

装了两个插件后，Ctrl+S 时代码要么没格式化，要么被反复重排甚至报错，大概率是它们的执行顺序和规则打架了。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

不要同时启用 ESLint 的 format on save 和 Prettier 的 format on save —— VSCode 不知道该听谁的
推荐方案：只开 Prettier 的格式化，把 ESLint 当作校验器；在 settings.json 中加这两行："editor.formatOnSave": true 和 "eslint.validate": ["javascript", "typescript", "vue"]
若用 Vue 或 TypeScript 项目，务必安装对应解析器插件，比如 eslint-plugin-vue 或 @typescript-eslint/eslint-plugin，否则 ESLint 会直接跳过这些文件
检查 .eslintrc.js 里有没有和 prettier 规则相反的配置，例如 "semi": ["error", "never"] 和 Prettier 的 semi: true 就会冲突

vscode-icons 显示异常或图标不生效

装完 vscode-icons 后，文件夹还是默认图标，或者部分文件类型没变化，通常不是插件问题，而是主题或设置未联动。

必须手动启用图标主题：按 Ctrl+, 打开设置，搜索 Icons Theme，从下拉菜单选 VSCode Icons —— 插件安装后不会自动切换
如果用了自定义主题（比如 Nord 或 One Dark Pro），确认该主题没有禁用图标渲染；个别精简主题会覆盖 workbench.iconTheme
重启 VSCode 是必须步骤，仅重载窗口（Developer: Reload Window）有时无法触发图标主题初始化
某些文件扩展名未被识别（比如 .env.local），可手动在 settings.json 中添加映射："vsicons.associations.files": { ".env.local": "config" }

Remote-SSH 连不上，报错 “Could not establish connection to …”

远程开发看似方便，但首次连接失败率极高，多数卡在 SSH 配置或权限环节，而非网络本身。

先本地验证 SSH 是否通：终端运行 ssh user@host，能登录说明基础链路没问题；不通就别折腾 VSCode
~/.ssh/config 文件里 Host 别名不能含空格或特殊字符，且必须有 HostName 和 User 字段，缺一不可
如果服务器禁用了密码登录，只支持密钥，确保私钥文件权限是 600（chmod 600 ~/.ssh/id_rsa），否则 VSCode 会静默拒绝使用
VSCode Remote 插件实际调用的是本地 ssh 命令，不是自己实现的 SSH 客户端，所以系统 PATH 里的 ssh 版本必须 ≥ 8.0 —— 老版本 macOS 自带的 OpenSSH 7.x 会连接失败