Teasim for VS Code

Teasim is a Visual Studio Code extension that provides an IDE-grade authoring experience for @teasim/styles utilities, including inline decorations, hover CSS previews, color chips, rem-to-px hints, and context-aware autocomplete.

Installation

Install from the Visual Studio Code Marketplace, or search for Teasim in the VS Code Extensions panel.

Feature Highlights

1. Real-time annotation and hover preview Matched utilities are underlined in editor, and hovering shows generated CSS.

2. Visual color preview Color-related utilities render inline color indicators for faster UI inspection.

3. rem to px conversion hints Optional rem-to-px hints are appended in hover output to improve readability.

4. Selection CSS inspector Select multiple utilities and hover to see their combined CSS result.

5. Utility autocomplete Autocomplete suggestions are available in supported languages with configurable matching behavior.

6. Class function string support Utilities inside configured class functions (for example defineVariants(...) and mergeClass(...)) support autocomplete, underline annotation, and hover CSS preview.

Quick Start

1. Open a workspace that contains UnoCSS/Teasim config.
2. Ensure your config is discoverable, preferably as uno.config.* or unocss.config.* in project root.
3. Open a supported file type and start editing utility classes.
4. Use Teasim: Reload Teasim after changing config files.

Commands

Configuration

Recommended baseline:

{
  "teasim.strictAnnotationMatch": true,
  "teasim.autocomplete.strict": true,
  "teasim.autocomplete.matchType": "prefix",
  "teasim.autocomplete.classFunctions": ["defineVariants", "mergeClass"],
  "teasim.remToPxRatio": 16
}

Skip Annotations

Use skip annotations to exclude specific code from utility analysis.

HTML / Vue / Svelte:

<!-- @unocss-skip -->
<div class="...">...</div>

Block-level skip:

<!-- @unocss-skip-start -->
<div class="...">...</div>
<!-- @unocss-skip-end -->

CSS:

/* @unocss-skip */
.selector { color: red; }

JavaScript / TypeScript:

// @unocss-skip
const cls = "text-red-500";

Supported Languages

Enabled by default for:

astro, css, ejs, erb, haml, hbs, html, javascript, javascriptreact, less, markdown, marko, php, postcss, rust, sass, scss, stylus, svelte, typescript, typescriptreact, vue, vue-html

You can extend support using teasim.languageIds.

JS/TS File Matching

For performance, utility detection in JavaScript/TypeScript defaults to:

• *.jsx and *.tsx
• *.props.js and *.props.ts

If you need hover/annotation in other .js / .ts files, add an include annotation (@unocss-include) or widen content.pipeline.include in your UnoCSS config.

Development

Prerequisites:

• VS Code ^1.109.0
• Bun runtime

Local workflow:

bun install
bun run develop

Build and package:

bun run build
bun run pack

Regenerate extension metadata:

bun run update

Troubleshooting

1. No hover or annotation appears Check that your project config is detected (uno.config.*/unocss.config.*), then run Teasim: Reload Teasim. For JS/TS files, also confirm the filename matches the default scope (*.jsx, *.tsx, *.props.js, *.props.ts) or explicitly include the file.

2. Suggestions are too noisy Enable teasim.autocomplete.strict and teasim.strictAnnotationMatch.

3. A language is not supported Add it to teasim.languageIds.

Links

• Homepage: https://vscode.teasim.com
• Repository: https://github.com/teasim/vscode
• Issues: https://github.com/teasim/vscode/issues

License

MIT