DevToys for VSCode

A Swiss Army knife for developers.This is the vscode extension version of Devtoys!

Code-2022-17-05-20

View Website View Github

Free, open source and offline

DevToys works entirely offline! No need to use many untruthful websites to do simple tasks with your data.

21+ tools are available, including:

  • Json to Yaml and Yaml to Json converter
  • JWT decoder
  • Text comparer
  • Hash generator

and more are coming!

Code-2022-17-07-51

Go faster with Smart Detection

DevToys can automatically detect the best tool that fits the clipboard content.

A lightbulb icon indicates the tool(s) that can be used with the clipboard content. If only one tool is detected, the clipboard content will be automatically pasted in that tool*.

*Smart detection behavior can be customized in the app settings.

Code-2022-17-07-43

Made with for Windows

DevToys is designed to embrace Windows ecosystem.

  • Compact Overlay aka. Picture-in-Picture mode
  • Pin tools to Start Menu
  • Tool search
  • Syntax highlighting
  • Multiple instances
  • Dark / Light theme
  • Modern and responsive UI

Development

To set up your environment to develop DevToys, run yarn.

Add New Tool

example add JWT Encoder/Decoder tool

  1. yarn new

❯ yarn new
? Tool label JWT
? Tool panel title JWT Encoder/Decoder
? Tool category Encoder/Decoder
? Tool webview framework React
✔  ++ /svelte-stuff/pages/Jwt.tsx
✔  ++ /svelte-stuff/components/Jwt/index.tsx
✔  ++ /src/Panel/Jwt.ts
✔  ++ /svelte-stuff/components/Jwt/locales/en.json
✔  ++ /svelte-stuff/components/Jwt/locales/zh-CN.json
✔  ++ /svelte-stuff/components/Jwt/i18n.ts
✨  Done in 15.52s.
  1. add PanelType in src/common/IToolData.ts

enum PanelType {
  ...,
  jwt = "jwt"
}
  1. add tree item in src/Tree, JWT tool is in Coders category,so edit src/Tree/Coders.ts

export class CodersProvider extends ToolGrpupProvider {
  constructor() {
    super([
      ...,
      {
        label: i18n.t("view.devtoys.coders.jwt.label"),
        tooltip: i18n.t("view.devtoys.coders.jwt.tooltip"),
        panel: PanelType.jwt,
      }
    ]);
  }
}
  1. show tool in src/extension.ts

vscode.commands.registerCommand("devtoys.showTool", (type: PanelType) => {
  switch (type) {
    ...
    case PanelType.jwt:
      jwt.createOrShow(context.extensionUri);
      break;
  }
})
  1. Make JWT tool and I18N key, and then test the tool!

NOTE: webview i18n file in svelte-stuff/components/TOOLNAME/locales, extension i18n file in locales

Screenshots

guid_generator

case_converter

base64_encoder_decoder_compact_overlay

base64_encoder_decoder

all_tools