devtext

A VS Code extension for JSON/JSONC editing, jq filtering, regex testing, text diff, password generation, PlantUML JSON rendering, and conversion utilities.

Features

JSON Tools (JSON / JSONC)

Activated automatically on json and jsonc files. A CodeLens toolbar appears at the top:

FormatJson | MinifyJson | TreeView | PlantUML

The same commands are also available from DevText → JSON.

jq Filtering

Run jq filters against the current JSON/JSONC file through DevText → JSON → Run jq....

• Pick a filter from devtext.jq.commands
• Or choose Custom jq filter... to type an expression on the fly
• Results open in a side preview panel
• jq errors are shown in the preview panel instead of popup messages

Requires jq installed on your system.

Regex Testing

Run regex rules against selected text (or the full document) through DevText → Regex → Run Regex....

• Pick a rule from devtext.regex.rules
• Or choose Custom regex... to type a pattern and flags on the fly
• Results show matches sorted by count and by value, with totals
• Runs in a worker thread with a timeout to protect against catastrophic regex

PlantUML JSON Rendering

Render the current JSON/JSONC file as a PlantUML diagram through DevText → JSON → Render JSON as PlantUML or the PlantUML CodeLens button.

• Converts JSONC comments/strip to clean JSON
• Wraps it in @startjson ... @endjson
• Calls your local java -jar plantuml.jar -tsvg to generate an SVG
• Displays the SVG in a webview, with the PlantUML source available to copy

Requires Java and a local plantuml.jar. Set the jar path in devtext.plantUml.jarPath.

Password Generator

Generate secure random passwords through DevText → Generator → Generate Password.

• Choose length (1–256)
• Choose character sets: lowercase, uppercase, digits, special characters
• Inserts the password at the cursor and copies it to the clipboard

Uses Node.js crypto.randomInt for randomness.

cURL Request Execution

Select a curl command and run it directly from VS Code through DevText → cURL → Run cURL.

• Parses method (-X), headers (-H), body (-d, --data-raw, --json, --data-urlencode), and cookies (-b)
• Executes the request using Node.js fetch() with a 30-second timeout
• Results open in a side preview panel showing request details, response status, headers, and body
• Supports comparing two cURL requests side-by-side via Diff → Compare with Selected (Formatted) → cURL

Supports common flags including merged short options (-XPOST, -sL), --insecure, --location, and many others.

Text Diff

Compare selected text across editors or within the same file:

Invalid JSON/URL/curl content on either side is shown raw with an error marker so you can still compare.

DevText (Right-Click Menu)

Select text (or use the current document), right-click, and choose from the categorized DevText submenu:

JSON | Command | Description | |---------|-------------| | Render JSON as PlantUML | Render JSON as PlantUML diagram | | Run jq... | Run a jq filter from settings or type custom | | Format JSON | Pretty-print JSON/JSONC | | Minify JSON | Compact JSON/JSONC | | Open Tree View | Read-only tree preview | | String → JSON | Unescape a JSON string | | JSON → String | Escape as a JSON string |

URL | Command | Input | Output | |---------|-------|--------| | URL Encode | hello world | hello%20world | | URL Decode | hello%20world | hello world | | Parse URL | https://example.com/path?a=1&b=2 | JSON structure (editable) | | Build URL | JSON structure | URL string |

Encode / Decode | Command | Input | Output | |---------|-------|--------| | Base64 Encode | hello | aGVsbG8= | | Base64 Decode | aGVsbG8= | hello |

Date / Time | Command | Input | Output | |---------|-------|--------| | Timestamp → Date | 1716681600 | 2024-05-26 00:00:00 | | Date → Timestamp | 2024-05-26 08:30 | 1716705000 |

Diff | Command | Description | |---------|-------------| | Select for Compare | Store current selection for diffing | | Compare with Selected | Open diff view (plaintext) | | Compare with Selected (Formatted) | Submenu: JSON, Parsed URL |

Regex | Command | Description | |---------|-------------| | Run Regex... | Run a regex rule from settings or type custom |

Generator | Command | Description | |---------|-------------| | Generate Password | Generate a random password |

cURL | Command | Description | |---------|-------------| | Run cURL | Parse and execute a selected cURL command, showing results in a side panel |

Parse URL / Build URL Workflow

1. Select a URL → Parse URL → replaced by JSON:

   {
     "protocol": "https:",
     "hostname": "example.com",
     "port": "",
     "pathname": "/path",
     "params": { "a": "1", "b": "2" },
     "hash": ""
   }
   

2. Edit the params object (add, remove, or change query parameters).
3. Select the JSON → Build URL → replaced by the rebuilt URL.

Configuration

Example Settings

{
  "devtext.jq.commands": [
    { "name": "All Keys", "expression": "keys" },
    { "name": "Count", "expression": "length" },
    { "name": "Pretty", "expression": "." }
  ],
  "devtext.regex.rules": [
    { "name": "Find IPs", "pattern": "\\b\\d{1,3}(?:\\.\\d{1,3}){3}\\b", "flags": "g" },
    { "name": "Find emails", "pattern": "[\\w.-]+@[\\w.-]+\\.\\w+", "flags": "gu" }
  ],
  "devtext.plantUml.jarPath": "/opt/plantuml/plantuml.jar",
  "devtext.jsoncCodeLens.autoEnable": false
}

When jsoncCodeLens.autoEnable is false, use the command Toggle DevText CodeLens for Current File to enable the toolbar per file.

Requirements

• jq: Required for Run jq.... Download from jqlang.github.io/jq.
• Java + plantuml.jar: Required for Render JSON as PlantUML. Download PlantUML from plantuml.com.
• Graphviz: May be required by PlantUML depending on the diagram type and your PlantUML version.

Development

npm install
npm run compile

Press F5 in VS Code to launch an Extension Development Host.

devtext（中文）

一个 VS Code 扩展，提供 JSON/JSONC 编辑、jq 过滤、正则测试、文本对比、密码生成、PlantUML JSON 渲染及转换工具。

功能

JSON 工具（JSON / JSONC）

打开 json 或 jsonc 文件时自动激活，顶部显示 CodeLens 工具栏：

FormatJson | MinifyJson | TreeView | PlantUML

这些命令也可以在 DevText → JSON 里找到。

jq 过滤

通过 DevText → JSON → Run jq... 对当前 JSON/JSONC 文件运行 jq 过滤器。

• 从 devtext.jq.commands 中选择过滤器
• 或选择 Custom jq filter... 临时输入表达式
• 结果在侧边预览面板中打开
• jq 报错显示在预览面板中，而不是弹窗

需要系统安装 jq。

正则测试

通过 DevText → Regex → Run Regex... 对选中文本（不选则为全文）运行正则规则。

• 从 devtext.regex.rules 中选择规则
• 或选择 Custom regex... 临时输入 pattern 和 flags
• 结果按出现次数和按名称排序展示，并显示总数
• 在 worker 线程中运行，带超时保护，防止灾难性正则

PlantUML JSON 渲染

通过 DevText → JSON → Render JSON as PlantUML 或 PlantUML CodeLens 按钮，将当前 JSON/JSONC 渲染为 PlantUML 图表。

• 将 JSONC 的注释去除，得到干净 JSON
• 包装为 @startjson ... @endjson
• 调用本地 java -jar plantuml.jar -tsvg 生成 SVG
• 在 Webview 中展示 SVG，并支持查看/复制 PlantUML 源码

需要 Java 和本地 plantuml.jar。在 devtext.plantUml.jarPath 中设置 jar 路径。

密码生成器

通过 DevText → Generator → Generate Password 生成安全随机密码。

• 选择长度（1–256）
• 选择字符集：小写、大写、数字、特殊字符
• 自动插入到光标处，并复制到剪贴板

使用 Node.js crypto.randomInt 产生随机数。

cURL 请求执行

选中一条 curl 命令，通过 DevText → cURL → Run cURL 直接在 VS Code 中执行。

• 解析 Method（-X）、Headers（-H）、Body（-d, --data-raw, --json, --data-urlencode）和 Cookies（-b）
• 使用 Node.js fetch() 发起请求，30 秒超时
• 结果在侧边预览面板中展示请求详情、响应状态、Headers 和 Body
• 支持通过 Diff → Compare with Selected (Formatted) → cURL 对比两个 cURL 的执行结果

支持常见的合并短参数（-XPOST, -sL）、--insecure、--location 等大量 curl 选项。

文本对比

在不同编辑器或同一文件中对比选中文本：

JSON、URL 或 cURL 解析失败的一侧会保留原始文本并标注错误，不影响对比。

DevText（右键菜单）

选中文本后右键，从分类的 DevText 子菜单中选择：

JSON | 命令 | 说明 | |------|------| | Render JSON as PlantUML | 将 JSON 渲染为 PlantUML 图表 | | Run jq... | 从设置中选择或临时输入 jq 表达式 | | Format JSON | 格式化 JSON/JSONC | | Minify JSON | 压缩 JSON/JSONC | | Open Tree View | 只读树形预览 | | String → JSON | 将 JSON 字符串反转义 | | JSON → String | 转义为 JSON 字符串 |

URL | 命令 | 输入 | 输出 | |------|------|------| | URL Encode | hello world | hello%20world | | URL Decode | hello%20world | hello world | | Parse URL | https://example.com/path?a=1&b=2 | JSON 结构（可编辑） | | Build URL | JSON 结构 | URL 字符串 |

编解码 | 命令 | 输入 | 输出 | |------|------|------| | Base64 Encode | hello | aGVsbG8= | | Base64 Decode | aGVsbG8= | hello |

日期 / 时间 | 命令 | 输入 | 输出 | |------|------|------| | Timestamp → Date | 1716681600 | 2024-05-26 00:00:00 | | Date → Timestamp | 2024-05-26 08:30 | 1716705000 |

Diff | 命令 | 说明 | |------|------| | Select for Compare | 存储当前选中文本以供对比 | | Compare with Selected | 打开 diff 视图（plaintext） | | Compare with Selected (Formatted) | 子菜单：JSON、Parsed URL |

Regex | 命令 | 说明 | |------|------| | Run Regex... | 从设置中选择或临时输入正则 |

Generator | 命令 | 说明 | |------|------| | Generate Password | 生成随机密码 |

cURL | 命令 | 说明 | |------|------| | Run cURL | 解析并执行选中的 cURL 命令，在侧边面板显示结果 |

Parse URL / Build URL 工作流

1. 选中 URL → Parse URL → 被替换为 JSON：

   {
     "protocol": "https:",
     "hostname": "example.com",
     "port": "",
     "pathname": "/path",
     "params": { "a": "1", "b": "2" },
     "hash": ""
   }
   

2. 编辑 params 对象（增删改查询参数）。
3. 选中 JSON → Build URL → 被替换为重新构建的 URL。

配置

配置示例

{
  "devtext.jq.commands": [
    { "name": "All Keys", "expression": "keys" },
    { "name": "Count", "expression": "length" },
    { "name": "Pretty", "expression": "." }
  ],
  "devtext.regex.rules": [
    { "name": "Find IPs", "pattern": "\\b\\d{1,3}(?:\\.\\d{1,3}){3}\\b", "flags": "g" },
    { "name": "Find emails", "pattern": "[\\w.-]+@[\\w.-]+\\.\\w+", "flags": "gu" }
  ],
  "devtext.plantUml.jarPath": "/opt/plantuml/plantuml.jar",
  "devtext.jsoncCodeLens.autoEnable": false
}

当 jsoncCodeLens.autoEnable 为 false 时，可使用 Toggle DevText CodeLens for Current File 命令按文件启用工具栏。

环境要求

• jq：Run jq... 需要。下载地址 jqlang.github.io/jq。
• Java + plantuml.jar：Render JSON as PlantUML 需要。下载地址 plantuml.com。
• Graphviz：部分 PlantUML 图表或版本可能需要。

开发

npm install
npm run compile

在 VS Code 中按 F5 启动扩展开发宿主窗口。