# vscode-plugin
**Repository Path**: imnewsea/vscode-plugin
## Basic Information
- **Project Name**: vscode-plugin
- **Description**: vscode 中，逻辑非高亮 插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-26
- **Last Updated**: 2026-06-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# VS Code 逻辑非高亮插件开发说明
本文档用于说明在 VS Code 中实现“逻辑非高亮”插件时，推荐采用的开发技术体系、需要安装的工具、建议安装的 VS Code 插件，以及相关参考资料。
## 1. 开发技术体系
### 1.1 开发语言
推荐使用：`TypeScript`
可选语言：`JavaScript`
推荐 `TypeScript` 的原因：
- VS Code 官方扩展开发文档对 TypeScript 支持最完整。
- `vscode` API 的类型提示更好，开发时更容易定位问题。
- 后续涉及配置项、编辑器高亮范围、主题适配、命令注册时，TypeScript 更稳定。
- 后期维护成本更低，适合把插件长期做下去。
### 1.2 推荐技术栈
推荐技术栈：`TypeScript + VS Code Decoration API`
核心思路：
- 插件监听当前打开的编辑器与文档内容变化。
- 扫描代码中的逻辑非相关符号，例如：`!`、`!=`、`!==`。
- 排除字符串、注释中的 `!`，避免误高亮。
- 对 Kotlin 这类语言中的 `!!` 非空断言做特殊排除，避免把它识别成逻辑非。
- 使用 VS Code 的 `TextEditorDecorationType` 为目标文本添加样式。
- 根据插件设置，支持以下样式模式：
- 无样式
- 仅高亮 `!`
- 高亮 `!表达式`
- 边框显示 `!表达式`
- 根据当前主题，分别使用浅色主题和深色主题下的不同颜色配置。
- 当用户修改设置后，自动刷新当前编辑器中的高亮效果，而不需要重启 VS Code。
### 1.3 为什么不优先选其它方案
#### 方案一：TextMate Grammar 注入
这个方案更适合做静态语法着色，不适合本项目这种“可配置、跨语言、带规则排除”的高亮需求。
不足点：
- 很难优雅处理 `!!` 非空断言排除。
- 很难根据设置项动态切换“仅高亮叹号”或“高亮整个表达式”。
- 适合语法着色，不太适合复杂逻辑规则。
#### 方案二：Language Server / AST 语义分析
这个方案最精确，但对于当前需求来说实现成本过高。
不足点：
- 需要针对 JavaScript、TypeScript、Java、Kotlin、C#、C/C++ 分别做语义支持。
- 开发、调试和维护成本高。
- 第一版插件没有必要一上来走这么重的技术路线。
### 1.4 当前阶段的推荐实现路径
第一阶段建议先实现：
- `if (!expr)`
- `if (!a || !b)`
- `a = !b && !c`
- `!=`
- `!==`
- 排除字符串和注释中的 `!`
- 排除 Kotlin 表达式结尾的 `!!`
- 提供样式与颜色设置
- 修改设置后自动刷新高亮
这个路线实现快、风险低，而且和当前 IntelliJ IDEA 插件里的逻辑目标基本一致。
## 2. 必装工具、作用及安装方法
下面这些工具是 VS Code 插件开发过程中建议安装的基础组件。
### 2.1 Node.js
作用：
- 运行插件开发脚本
- 安装 npm 依赖
- 编译 TypeScript
- 打包 VS Code 插件
安装方式：
- 官网下载安装：
- 或使用 `nvm` 安装指定版本
建议：
- 推荐使用 LTS 版本
- 当前机器上已经安装了 Node.js，可继续使用
### 2.2 npm
作用：
- 安装依赖包
- 执行项目脚本
- 安装脚手架和打包工具
安装方式：
- 通常随 Node.js 一起安装
### 2.3 Visual Studio Code
作用：
- 插件开发、调试、运行和体验的宿主环境
安装方式：
- 官网下载安装：
### 2.4 yo 与 generator-code
作用：
- 快速生成 VS Code 插件项目骨架
- 自动生成常见的目录结构、示例代码和配置文件
安装方式：
全局安装：
```bash
npm install -g yo generator-code
```
不想全局安装时，也可以临时使用：
```bash
npx --package yo --package generator-code -- yo code
```
说明：
- 如果只是初始化一次项目，`npx` 方式更轻量。
- 如果后面会频繁创建插件项目，全局安装更方便。
### 2.5 vsce
作用：
- 用于打包 VS Code 插件
- 生成 `.vsix` 安装包
- 后续如果需要发布到 Marketplace，也会用到
安装方式：
```bash
npm install -g @vscode/vsce
```
常见命令：
```bash
vsce package
```
### 2.6 TypeScript
作用：
- 作为插件开发主语言时，需要进行类型检查和编译
安装方式：
通常在项目内安装：
```bash
npm install --save-dev typescript
```
说明：
- 如果使用 `yo code` 的 TypeScript 模板，通常会自动帮忙生成相关配置。
### 2.7 VS Code 扩展测试工具
作用：
- 用于自动化测试 VS Code 插件
- 启动测试环境，验证命令、高亮、配置等行为
安装方式：
在插件项目中安装：
```bash
npm install --save-dev @vscode/test-cli @vscode/test-electron
```
### 2.8 ESLint
作用：
- 检查 TypeScript / JavaScript 代码风格与潜在问题
安装方式：
在插件项目中安装，通常会和 TypeScript ESLint 一起使用：
```bash
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```
## 3. VS Code 建议安装的插件
下面这些插件不是运行目标插件的必需条件，但对开发和测试非常有帮助。
### 3.1 ESLint
作用：
- 实时代码检查
- 发现潜在问题
- 统一代码风格
适用场景：
- 使用 TypeScript / JavaScript 开发 VS Code 插件时非常推荐安装
Marketplace：
-
### 3.2 Extension Test Runner
作用：
- 用于更方便地运行和调试 VS Code 插件测试
适用场景：
- 后续增加自动化测试时推荐安装
Marketplace：
-
### 3.3 Java 扩展包
作用：
- 为 Java 文件提供语法支持、代码提示、工程支持等
适用场景：
- 需要测试 `!` 在 Java 文件中的显示效果时建议安装
Marketplace：
-
### 3.4 Kotlin 插件
作用：
- 为 Kotlin 文件提供语法支持和基础开发能力
适用场景：
- 需要测试 Kotlin 中 `!` 与 `!!` 的区分显示时建议安装
Marketplace：
-
说明：
- Kotlin 在 VS Code 中的生态不如 IntelliJ IDEA 成熟，但做语法层面的测试足够用了。
### 3.5 C# / C# Dev Kit
作用：
- 为 C# 文件提供语言支持和工程支持
适用场景：
- 需要测试 C# 文件中的逻辑非显示效果时建议安装
Marketplace：
- C# Dev Kit：
### 3.6 C/C++
作用：
- 为 C / C++ 文件提供语法支持、代码提示、调试支持
适用场景：
- 需要测试类 C 语言中的逻辑非显示效果时建议安装
Marketplace：
-
### 3.7 JavaScript / TypeScript 语言支持
作用：
- JavaScript / TypeScript 的基础语法支持
说明：
- VS Code 已内置，一般不需要额外安装插件。
## 4. 参考文档
### 4.1 VS Code 官方文档
- 扩展开发入门：
- VS Code API 文档：
- 语法高亮指南：
- 扩展测试：
- 扩展发布与打包：
### 4.2 本项目实现时重点会用到的能力
后续实现“逻辑非高亮”时，重点会使用：
- `TextEditorDecorationType`
- `window.createTextEditorDecorationType(...)`
- `editor.setDecorations(...)`
- `workspace.getConfiguration(...)`
- 文档变化监听与活动编辑器变化监听
### 4.3 后续开发建议
建议后续按以下顺序推进：
1. 先用 `yo code` 或手工方式初始化 TypeScript 插件骨架。
2. 先实现最小可用版本：仅高亮 `!`。
3. 再扩展到 `!表达式`、`!=`、`!==`。
4. 再补上字符串、注释、Kotlin `!!` 排除规则。
5. 最后增加设置页、主题颜色、样式切换和自动刷新。
这样推进比较稳，也方便随时验证效果。
## 5. 打包：
```
1. npm install -g @vscode/vsce
2. vsce package
3. 安装： code --install-extension tuohai-negation-highlight-0.0.1.vsix
4. 或在VsCode扩展里安装
```