Check Plugin
前端代码兜底检测 VSCode 插件
功能
- 检查常见的未兜底代码场景,防止运行时异常。
- 支持对象/数组解构赋值、对象属性访问、链式访问等兜底检测。
- 支持文件保存时自动检测和命令面板手动检测。
安装
- 打包插件(
npm run package ),在 VSCode 中通过"扩展:从 VSIX 安装..."选择生成的 .vsix 文件进行安装。
使用方法
自动检测
- 只要保存 JS/TS/JSX/TSX 文件,插件会自动检测并高亮兜底风险。
手动检测
- 通过命令面板(Cmd+Shift+P)运行
分析对象解构兜底(Check Plugin) ,可手动触发检测。
检测结果查看
- 检测到的问题会在编辑器中高亮,并在"问题"面板(Problems)中显示详细提示。
支持的检测类型与示例
1. 对象解构赋值兜底
const {a} = obj; // 警告:对象解构赋值,请检查是否有兜底处理(如 obj || {})
const {a} = obj || {}; // ✅ 已兜底,不警告
2 函数参数解构兜底
function foo({x, y}) { /* ... */ } // 警告:函数参数解构,请检查是否有兜底处理(如 function foo({x, y} = {}))
function foo({x, y} = {}) { /* ... */ } // ✅ 已兜底,不警告
3. 数组解构赋值兜底
const [a] = arr; // 警告:数组解构赋值,请检查是否有兜底处理(如 arr || [])
const [a] = arr || []; // ✅ 已兜底,不警告
4. 对象属性访问兜底(含链式访问)
const a = {b: 1};
console.log(a.b.d); // 警告:变量a.b中可能不包含属性d,请注意兜底(可用?.)
console.log(a.c.d); // 警告:变量a.c中可能不包含属性d,请注意兜底(可用?.)
console.log(a && a.b && a.b.c); // ✅ 已判空,不警告
console.log(a?.b?.c); // ✅ 已兜底,不警告
5. 语法错误容错
- 即使代码有语法错误,插件也会尽量检测能分析的部分,并友好提示"代码存在语法错误,部分检测未完成"。
其他说明
- 插件检测逻辑已模块化,便于后续扩展更多兜底场景。
- 检测提示内容友好,便于快速定位和修复问题。
兼容性与生态支持
- 支持 Vue2/Vue3 Options API、Composition API、
| |