a7madgamal / vscode-visualize-typescript

A vscode plugin to enable images and colors for typescript types

visualize-typescript

Ever wished to add thumbnails to a typescript component or type OR see the color of a theme variable? I know I did so many times so I built this extension for both of us!

just add this magical comment at the type definition and you will see it when you hover over it from any file!

for colors: // color(#ffff00) for images: // image(/full/image/path.png) or // image(../relative/path/path.jpg)

type ColorsType = {
  inlineColor: string; // color(#ff0000)

  // color(#ff0000)
  previousLineColor: string;

  inlineImage: string; // image("/abs/path/mindblown.jpg");

  // image("./rel/path/mindblown.jpg")
  previousLineRelImage: string;
};

const alsoWorksDirectly = {
  inlineColor: "red", // color(#ff0000)
};

Extension Settings

This extension contributes the following settings:

• visualize-typescript.enabled: enable/disable this extension

Known Issues

this is an alpha stage project so please report any issues

• only hex colors for now

Release Notes

check the ./CHANGELOG.md file for details

vscode-visualize-typescript's Issues

Type string union

Would be great if it also worked with type union...

type IconName =
  // image(../../assets/icons/icon1.svg)
  | 'icon1' 
  // image(../../assets/icons/icon2.svg)
  | 'icon2'
  // image(../../assets/icons/icon3.svg)
  | 'icon3'
  // image(../../assets/icons/icon4.svg)
  | 'icon4'

Then I could use something like:

const icon: IconName = 'icon2' // <-- here it could show on autocomplete or while hovering