VSCode插件让前端开发变得简单高效-VSCode-PHP中文网

vscode中import路径自动补全与ctrl+click跳转需同时满足：安装path intellisense插件并启用path-intellisense.mappings、项目根目录配置jsconfig.json/tsconfig.json含baseurl和paths（如"@/": ["src/"]）、vue项目还需开启volar.implicitprojectconfig.checkjs，缺一不可。

vscode插件让前端开发变得简单高效

VSCode 插件不是“锦上添花”，而是前端日常开发的刚需基础设施。没装对插件，写个 import 都要手动拼路径、改个标签得手动同步闭合、保存后代码还是一团乱——这些不是你手速问题，是工具链缺位。

怎么让 import 路径自动补全且能 Ctrl+Click 跳转？

路径问题本质是 VSCode 不知道 @/ 指向哪。光装 Path Intellisense 不够，它只补全，不跳转。

必须配合项目级配置：在 jsconfig.json 或 tsconfig.json 中声明 baseUrl 和 paths，例如：
```
{ "compilerOptions": { "baseUrl": "src", "paths": { "@/*": ["*"] } } }
```
Path Intellisense 插件本身需开启 path-intellisense.mappings（在设置里搜），否则 alias 不生效
Vue 项目若用 Volar，还需确认 volar.implicitProjectConfig.checkJs 是否启用，否则 .vue 文件里的 import 可能跳转失败

为什么 ESLint 报错但 Prettier 不格式化？

两者规则冲突时，Prettier 会直接被 ESLint 的 --fix 覆盖掉，或者根本不动——这不是插件坏了，是配置没对齐。

前端美化

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

下载

必须安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加上它，顺序不能错：
```
["eslint:recommended", "prettier"]
```
→ 正确；
```
["prettier", "eslint:recommended"]
```
→ 失效
VSCode 设置中，editor.defaultFormatter 必须设为 esbenp.prettier-vscode，且 editor.formatOnSave 开启，否则保存时不会触发 Prettier
如果项目同时有 .prettierrc 和 eslint 规则，优先级是：Prettier 管格式、ESLint 管逻辑，别让 ESLint 去管缩进或引号