Pinceau VSCode

Pinceau provides an extension that gives additional features providing the last mile of DX.

Open VSCode Marketplace

Tokens definitions

The extension will detect where each of your tokens actual value is defined (including the tokens that gets overwritten by another layer).

That allows Pinceau to create links when you hover token values in your editor, and point you to the token definition path when using Ctrl+Click on the token.

Missing tokens warnings

The extension will detect when you are using a token, both with '{your.token}' and $dt('your.token') syntaxes.

If the origin of the token cannot be found in one of your loaded configurations, then this token will be marked as a warning in your editor Problems section.

You can modify the level of the problem, or completely disable it from your VSCode settings.

Color hints

When a token value is detected as being a color, or a reference to a color token, then Pinceau will display a color hint in your IDE.

More to come!

This extension started as a week-end project, and ended up being very fast to implement.

I'm sure we can go a lot further polishing the DX with it!