VSCode插件打造极致前端开发体验-VSCode-PHP中文网

eslint与prettier需分工明确：eslint管代码质量，prettier管格式；通过plugin:prettier/recommended禁用冲突规则，vscode设editor.defaultformatter为prettier并关闭eslint.format.enable。

vscode插件打造极致前端开发体验

VSCode 本身不提供开箱即用的前端开发体验，必须靠插件组合才能稳定支撑现代工程流。光装插件不够，关键在配置协同和冲突规避。

ESLint + Prettier 怎么配才不打架

常见错误现象：eslint --fix 和 prettier 同时运行时，格式反复被改、保存后代码缩进错乱、单引号双引号来回切。

根本原因不是插件不行，而是规则重叠没剥离。Prettier 负责格式，ESLint 负责逻辑检查，两者必须分工明确。

安装 esbenp.prettier-vscode 和 dbaeumer.vscode-eslint
在 .eslintrc.js 中显式禁用所有格式类规则：extends: ['eslint:recommended', 'plugin:prettier/recommended']（注意是 plugin:prettier/recommended，不是 prettier）
VS Code 的 settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"，并关掉 "eslint.format.enable"
不要同时开启 "editor.formatOnSave" 和 "eslint.autoFixOnSave" —— 只留前者，后者已废弃且易冲突

Vue/React 项目里怎么让跳转和提示真正准

很多开发者装了 Vue Language Features 或 ES7+ React/Redux/React-Native snippets，但 Ctrl+Click 跳不到组件定义，props 提示为空，本质是语言服务没识别到项目结构。

使用场景：Vue 3 + Vite、React 18 + TypeScript 项目，非 CRA 或 Vue CLI 默认模板。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

确保项目根目录有 tsconfig.json 或 jsconfig.json，且 "compilerOptions.baseUrl" 和 "paths" 配置正确（尤其别漏掉 "*": ["*"]）
Vue 项目必须启用 "vue.preferences.useVolar"（Volar 已取代 Vetur），并在设置中关闭旧的 vetur
React 项目若用 TypeScript，确认 node_modules/.pnpm 或 node_modules/.yarn 被 TS 语言服务纳入——可通过命令面板执行 TypeScript: Restart TS server 强制重载
路径别名（如 @/components）需在 jsconfig.json 中声明，否则自动导入和跳转会失效

为什么 Debugger for Chrome 总连不上 localhost

错误信息常为：Unable to launch browser: "Can't find Chrome or Edge" 或断点灰掉、Paused in debugger 却不进断点。

这不是插件问题，而是调试协议链路断在某一层。

先确认本地 Chrome 已安装，且路径被识别：Windows 查 where chrome，macOS 查 which google-chrome；若未命中，手动在 launch.json 加 "runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
"webRoot" 必须指向实际源码目录，不是构建产物目录；Vite 项目通常是 "${workspaceFolder}"，Create React App 则是 "${workspaceFolder}/src"
务必开启 source map：Vite 中设 build.sourcemap: true，Webpack 中设 devtool: 'source-map'；否则断点无法映射回源文件
如果用 HTTPS 或代理，url 字段必须与浏览器地址栏完全一致（含端口、协议），否则 CDP 连接被浏览器拒绝

Live Server 热重载为啥不生效或报 404

典型表现：改了 index.html 保存后页面不刷新，或访问 /api/users 返回 404，但后端明明在跑。

Live Server 是静态服务器，不代理 API 请求，也不理解构建产物路径。

它只适合纯 HTML/CSS/JS 原生项目；Vue/React 项目应直接用框架自带 dev server（vite dev / npm start），而非 Live Server
若真要用，必须把构建后的 dist 目录设为根目录，并在 settings.json 中配置 "liveServer.settings.root": "./dist"
API 请求 404 是因 Live Server 不支持代理；解决办法只有两个：换用框架 dev server 的 proxy 配置，或装插件 vscode-live-server-proxy 手动转发
热重载失败大概率是浏览器缓存，加 "liveServer.settings.donotShowInfoMsg": true 并手动清缓存，或改用 Ctrl+R 强制刷新