前端开发常用VSCode插件汇总与分析-VSCode-PHP中文网

结论：eslint 负责「逻辑正确性」，prettier 负责「格式一致性」，二者必须解耦，否则保存后反复格式化又报错；关键配置是安装 eslint-config-prettier 和 eslint-plugin-prettier，将 'prettier' 放入 .eslintrc.js 的 extends 数组末尾，并禁用 vscode 的 editor.formatonsave 对 eslint 的触发。

前端开发常用vscode插件汇总与分析

ESLint 和 Prettier 冲突时怎么配才不报红

直接说结论：ESLint 负责「逻辑正确性」，Prettier 负责「格式一致性」，二者必须解耦，否则保存后反复格式化又报错。常见现象是 eslint-config-prettier 没装、或没在 extends 里排最后。

装插件不是关键，关键是项目级配置：在 .eslintrc.js 的 extends 数组末尾加上 'prettier'（注意不是 'eslint-config-prettier'，那是包名，实际引入的是规则别名）
prettier 规则必须放在 eslint 规则之后，否则会被覆盖；推荐写法：extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier']
VSCode 设置里禁用 editor.formatOnSave 对 ESLint 的触发——只留 Prettier 响应，否则 ESLint 的 auto-fix 会和 Prettier 抢着改同一行
检查 package.json 是否同时装了 eslint 和 prettier，且版本兼容（2026 年主流组合是 eslint@8.57+ + prettier@3.3+）

Vue 项目里 import '@/' 路径点不进去怎么办

这不是插件问题，是 TypeScript + Webpack/Vite 配置缺失导致的路径解析失败。VSCode 默认不认识 @ 别名，需要显式告诉它怎么映射。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

确保项目根目录有 tsconfig.json 或 jsconfig.json，里面包含 "baseUrl": "src" 和 "paths": { "@/*": ["*"] }
如果用了 Vite，还要确认 vite.config.ts 中 resolve.alias 也写了 { '@': path.resolve(__dirname, 'src') }
装插件 lihuiwang.vue-alias-skip 只是补救手段，本质是模拟跳转逻辑；优先修配置，而不是依赖插件
重启 VSCode 后按 Ctrl+Click 测试，若仍无效，在命令面板运行 Developer: Restart Language Server

想实时看 JS 表达式结果，Quokka 和 Code Runner 选哪个

Quokka 是真·实时执行环境，Code Runner 是单次脚本运行器，用途完全不同，别混用。

Quokka 在编辑器侧边实时显示变量值、函数返回、console 输出，适合调试逻辑分支、验证 API 响应结构、快速试写工具函数；启动后对当前文件所有可执行语句生效
Code Runner 本质是调用 node / ts-node 执行整个文件，适合跑完整小脚本（比如生成 mock 数据），但无法响应光标所在行的局部表达式
Quokka 需要项目里装 typescript 或 @types/node 才能支持 TS；Code Runner 对 TS 支持弱，常报 Cannot find module
两者快捷键冲突风险高：Quokka 默认 Ctrl+K Q，Code Runner 是 Ctrl+Alt+N，建议在键盘快捷键设置里明确区分

为什么 Live Server 一开就 404，而本地 http-server 正常

Live Server 默认只服务当前打开文件夹的根目录，且不代理构建产物，它不是开发服务器替代品。

它只认 index.html 为入口，如果你打开的是子目录下的 src/index.html，它会尝试访问 http://127.0.0.1:5500/src/index.html，但实际服务的是 / 目录
解决办法：右键点击你真正想预览的 HTML 文件 → “Open with Live Server”，它会自动把该文件所在目录设为根
遇到路由 history.pushState 时必然 404，因为 Live Server 不做 fallback；这时必须切回 Vite/webpack dev server
它不读 vite.config.ts 或 vue.config.js，所有 alias、proxy、public 静态资源都不生效