CodeKit

English | 中文

A VSCode extension toolbox: collect common dev utilities into the sidebar, always within reach.

Quick Start

Click the CodeKit icon in the Activity Bar to open the Tools list
Click any tool (e.g. JSON Parser) to open a WebView tab in the editor area
Select text in the editor, right-click to open the CodeKit menu, and run encode/decode/format operations in place

Tool	Description
Hello World	Animated demo tool with language switcher and context menu toggle
JSON Parser	Real-time JSON parsing, dual-window toggle, editable tree, line numbers, Prism syntax highlighting
Unix Time	Unix timestamp ↔ human-readable date (auto-detect seconds/milliseconds, global timezones)
Base64	Base64 encode/decode (UTF-8 safe, dual-pane editing)
Unicode	Text ↔ `\uXXXX` escape conversion
UUID	Batch generate RFC 4122 v4 UUIDs (upper/lower case, per-line copy)
MD5	Compute MD5 hash of input text
URL Encode	URL component encode/decode
Variable Name	camelCase / snake_case / kebab-case / PascalCase / CONSTANT_CASE conversion
SHA Hash	Compute SHA-1 / SHA-256 / SHA-512 hashes
JWT Decoder	Decode JWT header and payload (base64url, UTF-8 safe)
Color Converter	Convert between HEX, RGB and HSL with live preview
Regex Tester	Test regular expressions with match count and highlighting
HTML Encode/Decode	Encode/decode HTML entities (`& < > " '`), dual-pane editing
Text Counter	Count characters, UTF-8 bytes, words, lines and non-whitespace chars
Letter Case	Convert selected text to UPPERCASE / lowercase in place
SQL Formatter	Format / beautify SQL statements (keywords uppercased, indentation)
Password Generator	Generate strong passwords (length 4-64, count 1-100, charset options, exclude ambiguous)
Number Base Converter	Binary / Octal / Decimal / Hex real-time conversion across four panes
Diff	Beyond Compare-style compare: set left/right from selection, auto-diff via native editor

Right-click in the editor to run operations on selected text, replacing it in place:

Category	Always Available	Requires Selection
Json	Open JSON Parser	JSON Expand / JSON Collapse
Base64	Open Base64	Base64 Encode / Base64 Decode
URL	Open URL Encoder	URL Encode / URL Decode
Unicode	Open Unicode	Unicode Escape / Unicode Unescape
Unix Time	Open Unix Time / Insert Current Time	—
MD5	Open MD5	MD5 Hash
UUID	Open UUID / Insert UUID	—
Variable Name	Open Variable Name	camelCase / snake_case / kebab-case / PascalCase / CONSTANT_CASE
SHA	Open SHA Hash	SHA-256 Hash
JWT	Open JWT Decoder	—
Color	Open Color Converter	—
Regex	Open Regex Tester	—
HTML Encode	Open HTML Encode/Decode	HTML Encode / HTML Decode
Text Counter	Open Text Counter	—
Diff	Open Diff	Set as Left / Set as Right

Open xxx: Opens WebView and fills the input pane with selected text
In-place replace: Takes selected text → transforms → replaces selection; shows error on failure
Insert Current Time / Insert UUID: Replaces selection if any, otherwise inserts at cursor
Disabled state: Commands requiring selection appear grayed out with "(requires selection)" suffix when no text is selected
Toggle: Checkbox in Hello World WebView (top-left), enabled by default, persisted via VS Code configuration

Activity Bar entry: Dedicated CodeKit icon for one-click access to the tool panel
WebView panels: Tools open as tabs in the editor area with animations and interactions
Panel reuse: Clicking a tool reuses an open panel; right-click "Open New Window" forces a new instance
i18n: English / Simplified Chinese, switchable in Hello World, all open panels update in real time
Editor context menu: In-place text transformation on selected text, toggleable from Hello World
Lightweight: Native HTML/CSS/JS, only inlines Prism.js (~8KB) for JSON syntax highlighting

Click the CodeKit icon in the Activity Bar
Click a tool in the Tools list to open it as a WebView tab
Use the tool's input/output panes — all transformations update in real time
Click the same tool again to jump to the existing panel; right-click → "Open New Window" to force a new instance

Select text in the editor
Right-click → CodeKit → choose a category (Json / Base64 / URL / Unicode / Unix Time / MD5 / UUID / Variable Name / SHA / JWT / Color / Regex / HTML Encode / Text Counter)
Pick an action:
- Open xxx — Opens the tool's WebView and fills the input pane with selected text
- Encode/Decode/Format — Replaces the selected text with the transformed result in place
- Insert Current Time / Insert UUID — Replaces selection if any, otherwise inserts at cursor

Or search "CodeKit" in the VS Code Extensions panel (Ctrl+Shift+X).

0.0.1: Activity Bar icon + Tree View tool list + Hello World animation
0.0.2: JSON Parser (real-time parsing, editable tree, expand/collapse/sample buttons, word wrap)
0.0.3: JSON editor overhaul (overlapping dual-window toggle, shared toolbar, line numbers, error indicator)
0.0.4: JSON syntax highlighting (Prism.js text pane + tree type coloring)
0.0.5: i18n support (English / Simplified Chinese, switch in Hello World)
0.0.6: 7 converter tools + Converter framework + panel reuse + real-time language switching
0.0.7: Editor context menu (9 categories, 24 commands, in-place text replacement) + HelloWorld toggle
0.0.8: Extension icon
0.0.9: SHA Hash / JWT Decoder / Color Converter / Regex Tester tools + context menu entries
0.0.15: 差异比较工具 (Diff)：Beyond Compare 式交互，编辑器右键「设为左侧 / 设为右侧」读取选区填充，左右两侧齐备即自动调用原生 diff 编辑器比较；WebView 双栏手动输入 + 比较按钮；命令面板 / Tree View 入口
0.0.14: 字母大小写转换工具 (Letter Case)
0.0.13: 密码生成器 + 进制转换工具 + 右键菜单补充 (Password / Number Base 分类)
0.0.12: 网页版链接
0.0.11: Tree View 工具筛选 (按名称与描述)
0.0.10: HTML Encode/Decode + Text Counter tools + context menu entries

MIT