基于VSCode插件开发实现前端工程静态代码扫描-VSCode-PHP中文网

因为vscode插件能提供编辑时即时反馈，通过监听文件保存等事件触发轻量诊断，在编辑器内实时标红提示；但受限于单文件上下文和内存，无法替代ci中全量、跨文件、强类型分析的eslint或sonarqube扫描。

基于vscode插件开发实现前端工程静态代码扫描

为什么用 VSCode 插件做静态扫描，而不是直接跑 ESLint 或 SonarQube？

因为用户需要的是「编辑时即时反馈」，不是等 CI 跑完才看到问题。VSCode 插件能监听文件保存、光标移动、甚至 AST 变化，把 eslint.verify() 或自定义规则封装成轻量级诊断（Diagnostic），直接在编辑器里标红、悬停提示。但别指望它替代完整 CI 扫描——插件受限于 Node.js 进程内存和单文件上下文，跨文件引用、类型推导、宏展开都容易漏判。

适合场景：单文件 JSX/TSX 组件 props 类型校验、禁止 console.log 提交、检测未使用的 useEffect 依赖项
不适合场景：全项目循环依赖分析、基于 JSDoc 的接口契约验证、需要完整 TS 服务的类型流追踪
关键取舍：用 vscode.workspace.onDidSaveTextDocument 触发扫描比实时监听更稳；避免在 onDidChangeTextDocument 里调用耗时规则，否则会卡住编辑

如何让自定义规则识别 React/TSX 而不只是 JS？

ESLint 默认不解析 JSX 和 TypeScript 语法，插件必须显式配置 parser 和 parserOptions。VSCode 插件启动时若复用工作区已有的 .eslintrc.cjs，要确保其中 parser 指向 @typescript-eslint/parser，且 parserOptions.project 指向有效的 tsconfig.json 路径——否则 eslint.linter.verify() 会抛 Cannot read property 'map' of undefined 错误。

实操要点：在插件激活逻辑中，用 vscode.workspace.getConfiguration('eslint').get('options') 读取用户配置，而非硬编码 parser 路径
TSX 特有坑：parserOptions.ecmaFeatures.jsx 必须设为 true，否则 <div></div> 会被当成非法 token
性能注意：每次验证都重新加载 tsconfig.json 很慢，建议缓存解析结果，或改用 typescript.parseJsonConfigFileContent 预热

怎么把扫描结果准确显示在编辑器里，又不干扰用户操作？

VSCode 的 DiagnosticCollection 是唯一合法出口，但它的生命周期和范围必须严格匹配：collection name 要全局唯一，uri 必须是 vscode.Uri.file() 格式，range 坐标必须基于 document.getText() 的 UTF-16 编码偏移（不是字节或 Unicode 码点）——否则定位错位、悬停空白、甚至崩溃。

PigX UI 前端开发

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

下载

常见错误：new vscode.Position(line, char) 中 char 传了字符串长度（如 'const a = 1'.length），实际该用 document.positionAt(offset) 换算
避免覆盖：同一 uri 的 collection 不能重复 set()，需先 get(uri) 清空旧诊断，否则旧 warning 永远残留
用户友好细节：用 severity: vscode.DiagnosticSeverity.Information 标记低风险建议（如「可改用 optional chaining」），别全用 Error 导致红波浪线泛滥

插件打包后规则不生效，本地调试却正常？

根本原因是 node_modules 未正确打包进 extension.js。VSCode 插件运行在独立 Node.js 环境，不会自动 resolve 工作区里的 node_modules，所有依赖（包括 eslint、@typescript-eslint/experimental-utils）必须通过 webpack 构建时 external 掉或 inline 进 bundle。

推荐方案：用 webpack.config.js 配置 externals: { vscode: 'commonjs vscode' }，其余全部 target: 'node' 打包
验证方法：解压 .vsix 文件，检查 extension.js 是否包含 require('eslint') 字样；若看到 var eslint_1 = __importDefault(require("eslint")); 就对了
隐蔽陷阱：TypeScript 类型声明文件（.d.ts）不会被打包，但 eslint 的类型定义被 import type 引用时，tsc 仍会报错——此时需在 tsconfig.json 中设 "types": [] 显式屏蔽