VSCode中让前端开发效率起飞的插件分享-VSCode-PHP中文网

ESLint与Prettier必须协同配置，否则因规则重叠（如分号、引号）导致格式循环变动；应安装eslint-config-prettier并置于.eslintrc.js的extends末尾以禁用ESLint格式规则，VSCode中设editor.defaultFormatter为esbenp.prettier-vscode且开启editor.formatOnSave。

vscode中让前端开发效率起飞的插件分享

ESLint 和 Prettier 必须配对使用，否则格式和校验会打架

单独装 ESLint 会标红未定义变量、console、重复声明等逻辑问题；单独装 Prettier 能自动把 const a=1 变成 const a = 1，但两者规则有重叠（比如分号、引号），不协调就会出现「保存一下变一种格式，再保存又变回去」的循环。

实操建议：

装 eslint-config-prettier，并在 .eslintrc.js 的 extends 里把它放在最后，它会关掉 ESLint 所有和格式相关的规则
VSCode 设置里把 editor.defaultFormatter 设为 esbenp.prettier-vscode，同时开启 editor.formatOnSave
别在 .prettierrc 里设 semi: true，又在 ESLint 里开 semi: ["error", "always"]——这是最常踩的坑

Path Intellisense 要配合 jsconfig.json 才能识别 @/src 别名

直接装 Path Intellisense 插件后，输入 import 时按 Ctrl+Space 只能补全相对路径（比如 ../components/Button.vue），对 @/components/Button 这类别名毫无反应。

必须手动配 jsconfig.json（TS 项目用 tsconfig.json）：

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

注意点：

创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

下载

文件必须放在项目根目录，且名字是 jsconfig.json（不是 jsconfig.js 或其他）
如果用了 Vite，还要确保 vite.config.ts 里也配了 resolve.alias，否则运行时会报错
改完配置要重启 VSCode，插件不会热加载

Live Server 启动后页面不自动刷新？检查端口和 MIME 类型

Live Server 点击右下角 Go Live 后，浏览器打开页面但修改 HTML/JS 文件后没刷新，常见原因不是插件坏了，而是环境干扰。

排查步骤：

看终端输出的地址是不是 http://127.0.0.1:5500 —— 如果是 localhost，某些防火墙或 hosts 会拦截
打开浏览器开发者工具 → Network 标签，刷新页面，看 index.html 的 Response Headers 里有没有 Content-Type: text/html；如果是 application/octet-stream，说明服务器没正确识别文件类型，需在插件设置里加 "liveServer.settings.CustomBrowser": "chrome"
确认没同时开着另一个占用了 5500 端口的服务（比如另一个 Live Server 实例或本地 Node 服务）

Vue/React 开发别漏掉框架专属插件

Vue VSCode Snippets 和 ES7+ React/Redux/React-Native snippets 不只是写得快，它们生成的代码自带语义和结构约束。比如输入 vbase 回车，直接生成带 defineComponent、setup() 和 return 的完整 Vue 3 组件骨架；输入 rfc 就生成函数组件模板，连 PropTypes 或 useEffect 都预置好了。

容易忽略的细节：

Vue 插件依赖 Vue Language Features (Volar)，不是旧版 Vetur；装错会导致 .vue 文件语法高亮失效
React 插件在 TSX 文件里可能不触发片段，需要检查 VSCode 设置里 files.associations 是否把 *.tsx 关联到了 typescriptreact
这些片段默认不带注释，但可以进插件设置搜 snippets，勾选 javascript.preferences.includeComments 让它自动生成 JSDoc 占位符

真实项目里，插件之间的协同比单个功能更重要。比如 Auto Rename Tag 在 JSX 里生效，但遇到 v-if 或 ngIf 就失灵；Bracket Pair Colorizer 对 JS 的大括号有用，可一旦嵌套了模板字符串里的 ${}，颜色就乱套——这些边界情况，得靠实际编码时多试几次才能摸清。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！