Skip to content
| Marketplace
Sign in
Visual Studio Code>Linters>Check PluginNew to Visual Studio Code? Get it now.
Check Plugin

Check Plugin

Jim Yang

|
3 installs
| (0) | Free
前端代码兜底检测插件
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Check Plugin

前端代码兜底检测 VSCode 插件

功能

  • 检查常见的未兜底代码场景,防止运行时异常。
  • 支持对象/数组解构赋值、对象属性访问、链式访问等兜底检测。
  • 支持文件保存时自动检测和命令面板手动检测。

安装

  1. 打包插件(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、
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft