前端组件化开发常用的VSCode代码片段插件-VSCode-PHP中文网

es7+ react snippets需按语言模式生效：.tsx中rfc生成带fc类型组件，.js中无类型；usee补全后需手动补依赖数组，否则eslint报错react-hooks/exhaustive-deps。

前端组件化开发常用的vscode代码片段插件

这个插件不是“装了就完事”，它真正起效依赖你输入时的上下文和语言模式。比如在 .tsx 文件中输入 rfc，会生成带 FC 类型标注的函数组件；但在纯 .js 文件里，它只输出无类型声明的版本。

常见卡点：

useE 补全 useEffect 后，光标停在依赖数组里——但如果你没手动补上空数组或变量，保存时 ESLint 可能立刻报 react-hooks/exhaustive-deps
imr 导入 React，默认用 import React from 'react'，TypeScript 项目里更推荐 import { useState } from 'react' 这种具名导入，避免全量引入
不支持自动推导 Props 类型，rfce 生成的组件需要手动加 <props></props> 泛型或写 interface Props

Volar 是语言服务，Vue 3 Snippets 是纯文本替换，两者必须共存且配置对路，否则 vs（vue script）或 vt（vue template）这类缩写根本不会弹出来。

关键动作：

确保 Volar 已启用，并在 VSCode 设置中关闭 Vetur（冲突会导致 <script setup></script> 语法无法识别）
Vue 3 Snippets 插件默认只对 .vue 文件生效；如果项目用 .ts 单文件组件，需手动在插件设置里勾选 “Enable for TypeScript”
vs 补全后生成的 <script setup lang="ts"></script> 块，若项目没配 compilerOptions.types 或缺少 @vue/runtime-dom，TS 服务会报红，不是插件问题，是环境缺失

Path Intellisense 能自动提示 ./components/Button.vue 这类相对路径，但它原生不解析 @/、#src/ 这类 Webpack/Vite 别名——这不是缺陷，是设计如此。

PigX UI 前端开发

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

下载

要让它支持别名，必须配合项目配置：

在 jsconfig.json 或 tsconfig.json 的 compilerOptions.paths 里声明别名，例如："@/*": ["src/*"]
VSCode 需重启或重载窗口，让插件读取到新配置
即使配好了，它也只提示路径，不校验该路径下是否存在对应模块——真正报错靠的是 TypeScript 或 Volar 的语义检查

直接改 code-snippets JSON 文件容易被 VSCode 自动更新冲掉，尤其多人协作时。

稳妥做法是走插件发布流程，哪怕只是内部使用：

用 yo code 创建插件项目，在 package.json 的 contributes.snippets 字段里指定各语言路径
把团队通用的 Button、useApi、definePage 等逻辑封装成 snippet，明确限定 language 为 typescriptreact 或 vue
本地调试用 F5 启动扩展开发主机，验证 prefix 是否在正确文件类型中触发
不发布到 Marketplace？可打包为 .vsix 文件，团队成员用命令行 code --install-extension xxx.vsix 安装，比复制 JSON 稳定得多