VSCode插件助力前端开发自动化-VSCode-PHP中文网

eslint与prettier协同工作需启用eslint-config-prettier关闭eslint格式规则，仅保留逻辑检查；配置中extends必须末尾加入'prettier'，ts项目还需eslint-config-prettier/@typescript-eslint；vs code需指定prettier为默认formatter并正确设置语言模式与路径映射。

vscode插件助力前端开发自动化

前端开发中，真正能减少重复劳动、提前暴露问题、让协作不靠嘴靠配置的，不是“装得多”，而是几个关键插件配得准、开得稳、用得熟。

ESLint + Prettier 冲突时 `eslint-config-prettier` 必须启用

常见错误现象是：保存后代码格式被 Prettier 调整了，但 ESLint 仍报“missing semicolon”或“quotes not consistent”这类格式类警告。这不是规则没生效，而是两者在“格式校验”上打架。

eslint-config-prettier 的作用是关掉 ESLint 中所有与格式相关的规则（比如 semi、quotes），只保留逻辑和安全类检查（比如 no-unused-vars、no-undef）
必须在 .eslintrc.js 的 extends 数组末尾加入 'prettier'，顺序不能颠倒
如果项目用 TypeScript，还需额外加 eslint-config-prettier/@typescript-eslint，否则 interface 或泛型写法可能被误标
VS Code 设置里要明确指定默认 formatter 是 esbenp.prettier-vscode，否则右键“Format Document”可能调用错工具

`Auto Rename Tag` 在 JSX/TSX 中默认不生效

该插件默认只监听 .html 和 .vue 文件，遇到 React 项目里的 .tsx 文件，改一个 <div> 标签，闭合标签不会同步更新——不是插件坏了，是语言模式没识别。 <ul> <li>打开 VS Code 设置（<code>Cmd+,），搜索 files.associations

添加映射："*.tsx": "javascriptreact"（或 "*.jsx": "javascriptreact"）

重启窗口或重载窗口（Cmd+Shift+P → “Developer: Reload Window”）

确认右下角语言模式显示为 Javascript React，而非 TypeScript，否则插件不触发

`Path Intellisense` 对 `@/` 别名路径补全失败

项目用了 jsconfig.json 或 tsconfig.json 配置了 "@/*": ["src/*"]，但在 import 语句里输入 @/ 后没提示，不是插件不支持，是它没读到配置。

PigX UI 前端开发

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

下载

Path Intellisense 默认只认 webpack.config.js 或 vue.config.js 中的 resolve.alias，不自动读取 jsconfig.json
需手动在 VS Code 设置中开启 path-intellisense.mappings，填入：{"@": "${workspaceFolder}/src"}
若项目用 Vite，且 alias 来自 vite.config.ts，则必须复制 alias 配置到 path-intellisense.mappings，否则补全无效
注意路径分隔符：Windows 用户写 "\src"，macOS/Linux 写 "/src"，混用会导致补全消失

`Live Server` 启动后页面空白或 404

右键 HTML 文件点 “Open with Live Server”，浏览器打开却是空白页或 Network 显示 GET / 404，大概率是入口文件没被识别，不是服务没起来。

Live Server 默认只把当前打开的 HTML 文件当作根入口；如果项目结构是 dist/index.html，但你打开的是 src/index.html，它就只会 serve src/ 目录
解决方法：右键点击项目根目录下的 index.html（确保它是真正部署时的入口），再启动
如果要用自定义端口或根路径，需在设置里修改 liveServer.settings.donotShowInfoMsg 关闭提示后，手动编辑 liveServer.settings.CustomBrowser 或通过 liveServer.settings.root 指定路径
Vue/React 项目别依赖它做开发服务器——它不处理路由 history fallback，/user/profile 这种路径刷新直接 404；仅适用于纯静态页或 demo 验证