前端工程师高效开发必备VSCode插件-VSCode-PHP中文网

live server 启动后页面不刷新，需检查三处：默认仅监听.html/.htm等文件，.css/.js修改不触发重载；确认liveserver.settings.custombrowser未设为none；若项目已用vite/webpack等构建工具，应停用live server避免冲突。

前端工程师高效开发必备vscode插件

Live Server 启动后页面不刷新？检查这三处

保存 HTML/CSS/JS 文件后浏览器没自动更新，不是插件坏了，而是常见配置疏漏。Live Server 默认只监听 .html、.htm 和 .shtml 文件，改了 .css 或 .js 不触发重载。

在设置中搜索 liveServer.settings.CustomBrowser，确认没误设为 none
检查 liveServer.settings.AdvanceCustomBrowserCmdLine 是否被手动覆盖，导致启动异常
若项目用了构建工具（如 Vite、Webpack），别和 Live Server 混用——它只适合纯静态文件开发，否则会端口冲突或路径错乱

ESLint + Prettier 冲突报红？关掉这个开关

装了两个插件却总看到 Expected indentation of 2 spaces but found 4 这类矛盾提示，大概率是规则打架。Prettier 负责格式，ESLint 负责逻辑，但默认都抢着管缩进、分号、引号。

前端设计优化skill

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

下载

必须安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加上 'prettier'
VS Code 设置里关掉 eslint.autoFixOnSave，改用 editor.formatOnSave 统一交给 Prettier 处理
prettier.semi 和 eslint.rules['semi'] 别同时开——选一个风格并坚持到底

Vue / React 文件里 Ctrl+Click 跳不到定义？配 alias 映射

写 import { api } from '@/api/user'，按住 Ctrl 点击 @/api/user 却跳转失败，不是插件没装，而是 VS Code 不认识 @ 这个别名。

项目根目录下要有 jsconfig.json（Vue）或 tsconfig.json（TS），里面写清楚 baseUrl 和 paths

例如 Vue 项目需配：

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } }

别依赖插件“自动猜路径”，vue-alias-skip 类插件只是辅助，底层仍靠 TS/JS 配置生效

AI 补全插件响应慢或建议不准？调低上下文窗口

Copilot 或 Tabnine 在大型文件里卡顿、给出无关代码，不是网络问题，而是模型在拼命读你整个文件甚至整个工作区。

在设置里搜 tabnine.experimental.maxLinesToProcess，设成 200 以内（默认可能 1000+）
Copilot 关掉 copilot.advanced.context 中的 entireFile，保留 currentFile 和 surroundingCode 就够用
敏感项目禁用云端模型：Tabnine 可切到本地模型，Copilot 无法离线，但可关掉 copilot.enable 对 plaintext 和 markdown 的监听，减少干扰