前端开发必备VSCode插件安装与调优-VSCode-PHP中文网

prettier和eslint必须配对禁用冲突规则，因其职责重叠：prettier负责代码样式（如引号、分号），eslint默认启用同类格式规则，配置不一致时保存会反复修改同一处，导致报错和卡顿；需禁用eslint格式规则或使用eslint-config-prettier并置于extends末尾，同时设prettier为vscode默认格式化器。

前端开发必备vscode插件安装与调优

别装超过 12 个插件——这是实测能保持 VSCode 响应速度的硬上限，再多就不是“增强”，而是“拖垮”。

为什么 `Prettier` 和 `ESLint` 插件必须配对禁用冲突规则？

单独启用 Prettier 会格式化代码，ESLint 又想按自己规则修复，保存时两者打架：一个加分号，一个删分号，光标卡住、控制台报 Conflict with another formatter。这不是配置问题，是设计冲突。

必须在 settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"，且只设这一个
安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 数组末尾加上它，否则 eslint --fix 仍会覆盖 Prettier
关闭 ESLint 插件的自动修复（eslint.codeAction.showDocumentationCodeActions 设为 false），只保留静态检查

`Auto Import` 在 TypeScript 项目里为何不自动补全第三方组件？

它依赖 tsconfig.json 中的 baseUrl 和 paths 配置识别别名路径，但默认只扫描 node_modules 和当前项目 src 下的声明文件。如果用了 @/components/Button 这类别名，又没配好 compilerOptions.typeRoots 或 types 字段，Auto Import 就不知道该从哪找类型定义。

PigX UI 前端开发

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

下载

确认 tsconfig.json 含 "baseUrl": "src" 和对应 "paths" 映射
若组件库无内建类型（如某些 UI 库的 UMD 版本），需手动安装 @types/xxx 或在 src/types/shims.d.ts 中补充声明
重启 TS Server（命令面板执行 TypeScript: Restart TS server），否则缓存不更新

远程开发时 `Remote Explorer` 连不上 SSH 主机？

常见错误是 Failed to connect to the remote extension host，根本原因往往不是网络，而是远端 vscode-server 版本与本地 VSCode 不匹配，或远端用户主目录权限异常。

先在远端执行 rm -rf ~/.vscode-server，再重连触发重新下载（VSCode 会自动拉取匹配版本）
检查远端 ~ 目录属主是否为当前用户（ls -ld ~），非 root 用户但目录属 root 会导致启动失败
若用密码登录，确保 SSH 配置中未禁用 passwordAuthentication；密钥登录则确认 ~/.ssh/authorized_keys 权限为 600

`Quokka.js` 运行时报 `Cannot find module 'typescript'` 怎么办？

它默认走全局 typescript，但现代项目多用 pnpm 或 yarn 管理本地依赖，全局没装或版本不一致就会崩。这不是 Quokka 的 bug，是 Node 模块解析路径没对上。

在项目根目录下运行 npx tsc --version 确认本地 TS 版本
打开 Quokka 配置（命令面板输入 Quokka: Configure Plugin），把 tsconfigPath 指向项目 tsconfig.json，并设 nodeArgs 为 ["-r", "ts-node/register"]（若用 ts-node）
更稳的做法：在项目里装 typescript 为 devDependency，Quokka 就会优先读 node_modules/typescript