前端开发必学的VSCode插件设置技巧-VSCode-PHP中文网

vscode插件生效关键在配置贴合开发流：需确保语言模式正确、defaultformatter设为对应插件id（如esbenp.prettier-vscode）、且无工作区或配置文件覆盖。

前端开发必学的vscode插件设置技巧

VSCode插件不是装了就完事，关键在配置是否贴合真实开发流。很多开发者装了 Prettier 却发现保存不格式化，装了 ESLint 却报一堆红波浪线却不会自动修复——问题不在插件本身，而在配置断点没对上。

这个设置看似简单，但实际生效依赖三个隐性条件：当前文件语言模式正确、有可用的默认 formatter、没有被其他插件或 workspace 设置覆盖。

检查右下角状态栏显示的语言模式是否为 javascript 或 vue，不是 plaintext 或 undefined
确认 editor.defaultFormatter 已设为对应插件 ID，比如 esbenp.prettier-vscode，而非留空
若项目根目录存在 .prettierrc 或 eslint.config.js，优先级高于用户设置，需确保规则无冲突（例如 prettier.semi 和 eslint rules 同时启用分号会导致报错）

这不是插件坏了，而是它默认只监听当前打开的 HTML 文件及其直接引用的 JS/CSS——如果项目用了构建工具（如 Vite、Webpack），Live Server 就不适用，它只适合纯静态页。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

确认你右键点击的是 .html 文件，而不是 index.tsx 或 main.js
检查浏览器地址栏 URL 是否以 http://127.0.0.1:5500/xxx.html 开头，而非 file:// 协议
若用 Vue/React 项目，改用官方推荐方式：npm run dev 启动本地服务，再配合 Debugger for Edge 或 Debugger for Chrome 插件调试

VSCode 默认不认识 @ 这种 Webpack/Vite 别名，必须靠插件桥接配置和解析逻辑。

装插件 Vue Alias Skip 或 Path Intellisense 后，还需在项目根目录配 jsconfig.json 或 tsconfig.json 的 compilerOptions.baseUrl 和 paths

示例配置：

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

它默认只开 html 语言支持，JSX 属于 javascriptreact 模式，不手动加就不管用。

在 settings.json 中补全："auto-rename-tag.activationOnLanguage": ["html", "javascriptreact", "typescriptreact", "vue"]
注意大小写：javascriptreact 不是 jsx，也不是 react
若用 TypeScript 写 React，还必须同时启用 typescriptreact，否则 tsx 文件里 rename 不触发

真正卡住人的从来不是插件数量，而是每个插件背后那一两行关键配置是否和你的项目结构、语言模式、构建方式严丝合缝。少一行 paths、错一个语言 ID，整个功能就悬在半空。