Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>ToloFrameWork (TFW) VSCode ExtensionNew to Visual Studio Code? Get it now.
ToloFrameWork (TFW) VSCode Extension

ToloFrameWork (TFW) VSCode Extension

Tolokoban

|
48 installs
| (0) | Free
Tools to help working fast with React/Typescrip and TFW.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

toloframework-vscode-extension

Visual Studio Code extension to help coding React/Typescript applications with ToloFrameWork (a.k.a. TFW).

Features

Switching files

In TFW we use to have the CSS file in the same directory than the TS, TSX, JS or JSX file, with the same basename.
For example the module foobar could look like this:

foobar/
├── index.ts
├── foobar.css
├── foobar.ts
└── foobar.yaml

This extension provide the following commands to navigate between different files of the same module. Sometime, they are several extensions tested. The first existing file is opened. But if no file is found, the first extension is used and a file is created.

  • Switch to CSS (C+F12 C): css.
  • Switch to TS/JS (C+F12 J): ts, tsx, js, jsx.
  • Switch to TEST/SPEC (C+F12 T): test.ts, spec.ts, test.tsx, spec.tsx, test.js, spec.js, test.jsx.
  • Switch to TSX (C+F12 X): tsx, jsx, ts, js.
  • Switch to YAML (C+F12 Y): yaml, yml, json, jsn.
  • Switch to JSON (C+F12 N): json, jsn, yaml, yml.
  • Switch to VERT (C+F12 V): vert.
  • Switch to FRAG (C+F12 F): frag.

Loading font from the web

The command [tfw] Load font locally will create a folder with the CSS file needed to use a font. All the fonts will also be loaded locally.

You can generate a font URL by using Google Fonts.

Creating files/folders from Templates

You can define your own templates in templates/ folder at the root of your project (where package.json is). Each template must have its own subfolder and contain at least the file @index.json5.

Requirements

No requirements.

Extension Settings

No settings.

Known Issues

No known issues.

Release Notes

0.11.2

Bug fix: when several VSCode windows are open the translations are edited in the wrong one.

0.11.1

Bug fix: adding new translation items doesn't work.

0.11.0

New interface for translations.

0.10.1

Added string translation. Select a text and press C-F12 S-I.

0.9.1

Added export name for new View.

0.9.0

Dependency graph.

0.8.0

CSS switch can now go to SCSS files. Simplified React View, more hook oriented.

0.7.0

Ctrl-F12 T switches to test/spec instead of Typescript. You can switch to Typescript with Ctrl-F12 J.

0.4.0

Added templates.

0.3.0

Added a feature to create modules.

0.2.0

Added a feature to locally import CSS fonts.

0.1.0

First release.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft