DevKit - Developer Toolkit for VS Code

中文文档

A lightweight VS Code extension that provides everyday text processing tools for developers. Select text, transform it with one action, and the result replaces your selection in place.

Features

Usage

Context Menu

1. Select text in the editor
2. Right-click to open the context menu
3. Find the DevKit submenu
4. Pick the tool you need

The DevKit submenu only appears when text is selected.

Command Palette

1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type DevKit to filter commands
3. Select the desired command

Keyboard Shortcuts

All shortcuts require a text selection (except JSON Viewer). Forward operations use 3 keys; reverse operations add one more modifier.

Mac:

Windows / Linux:

Mnemonic: each letter matches the feature — Url, Base64, Md5, Json, Escape, Viewer, Timestamp.

JSON Viewer (Tree View)

The JSON Viewer displays JSON data as an interactive tree in the Explorer sidebar. It gives you a structured overview of complex JSON without scrolling through raw text.

What it shows:

• Object nodes: displayed as key: Object{n} where n is the number of properties, with a collapsible arrow to expand
• Array nodes: displayed as key: Array[n] where n is the number of elements
• String values: displayed with quotes, e.g. "model": "tts"
• Number / Boolean / Null values: displayed inline with type-specific icons
• Nested structures: fully expandable — drill into deeply nested objects and arrays

How to use:

• Auto-detect: Select JSON text or open a .json file, and the tree updates automatically
• Manual trigger: Use ⌥⌘V (Mac) or Ctrl+Alt+V to open and focus the viewer
• Array nodes show element count: Array[4]
• Object nodes show property count: Object{6}
• Click a primitive value to copy it to clipboard
• Collapse All button to fold the entire tree

Curl Runner (CodeLens)

The extension automatically scans all open files for curl commands and displays a ▶ Run Curl button above each one.

Supported curl formats:

Single-line:

curl https://api.example.com/users

Backslash continuation:

curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name": "test"}'

Multi-line JSON body (single-quoted):

curl -X POST https://api.example.com/chat \
  -H "Content-Type: application/json" \
  -d '{
    "model": "gpt-4",
    "messages": [
      {"role": "user", "content": "hello"}
    ]
  }'

Click ▶ Run Curl and the full command is merged into a single line and sent to the terminal.

You can also select curl command text and run DevKit: Run Curl from the command palette.

Detailed Reference

URL Encode / Decode

• Encode: uses encodeURIComponent for percent-encoding
• Decode: uses decodeURIComponent to restore original text
• Shows an error for invalid encoded strings (e.g. %ZZ)

Before: hello world&foo=bar
After:  hello%20world%26foo%3Dbar

Base64 Encode / Decode

• Encode: converts UTF-8 text to Base64
• Decode: restores Base64 back to UTF-8 text
• Shows an error for invalid Base64 input (e.g. !!!)

Before: Hello, World!
After:  SGVsbG8sIFdvcmxkIQ==

MD5 Hash

• Computes the MD5 hash of selected text
• Outputs a 32-character lowercase hexadecimal string
• Uses Node.js built-in crypto module — no extra dependencies

Input:  hello
Output: 5d41402abc4b2a76b9719d911017c592

JSON Format / Minify

• Format: expands JSON with 2-space indentation
• Minify: compresses JSON into a single line with no extra whitespace
• Shows an error for invalid JSON

Before minify:
{
  "name": "test",
  "value": 123
}

After minify: {"name":"test","value":123}

JSON Escape / Unescape

• Escape: converts ", \, \n, \r, \t to escape sequences
• Unescape: restores escape sequences to original characters
• On unescape, surrounding double quotes are automatically stripped (useful for strings copied from JSON values)
• Shows an error if no valid escape sequences are found

Before escape: {"name": "test"}
After escape:  {\"name\": \"test\"}

Before unescape: "[{\"id\":\"123\"}]"
After unescape:  [{"id":"123"}]

Timestamp Conversion

• Timestamp → Date: auto-detects seconds (10 digits) and milliseconds (13 digits)
• Date → Timestamp: outputs seconds-level timestamp
• All conversions use UTC+8 timezone
• Date format: YYYY-MM-DD HH:mm:ss

Timestamp:    1704067200
Date:         2024-01-01 08:00:00

Milliseconds: 1704067200000
Date:         2024-01-01 08:00:00

Installation

From Marketplace

Search for Dev Kit in the Extensions view, or install from the VS Code Marketplace.

From VSIX

1. Download the .vsix file
2. Open VS Code / Kiro
3. Cmd+Shift+P → Extensions: Install from VSIX...
4. Select the .vsix file
5. Reload the window (Cmd+Shift+P → Developer: Reload Window)

Build from Source

git clone https://github.com/xuxiao415/vs-dev-tools.git
cd vs-dev-tools
npm install
npm run package

Tech Stack

• TypeScript
• VS Code Extension API
• Node.js built-in crypto module (MD5)
• Zero runtime dependencies

License

Apache-2.0