Home

Redis for Visual Studio Code

yarn is required

1. npm i -g yarn
2. yarn install
3. Download backend for your platform using yarn download:backend
4. Click on the VSCode sidebar Run and Debug icon
5. Chose one of the options in the select control and click on the green play icon. Options:
   a. Run Dev Extension - start 2 background dev tasks and the debug vscode instance with extension
   b. Run only Extension - start only the debug vscode instance with extension
6. In the opened Visual studio code instance, click the Redis for VS Code icon in the sidebar

Scripts:

download:backend - download backend for current platform
dev - run web server with custom router in the RI_DATA_ROUTE env variable. Like RI_DATA_ROUTE=settings yarn dev dev:sidebar - run web server with sidebar router
l10n:collect - auto find all new strings and add them to ./l10n/bundle.l10n.json
storybook:dev - run web storybook dev server
package:prod - package plugin as *.vsix file for prod
package:stage - package plugin as *.vsix file as prerelease build
watch - start node part of the plugin in dev mode
build - build web part of the plugin and run in dev mode

General docs

vsc toolkit storybook
vsc toolkit figma

Docs for developers

Technologies:

tailwind
msw (mock be responses)
storybook
storybook + msw (mock BE response)
storybook + vitest (use stories as component for tests)
vsc icons
vite
vitest

Visual studio code

vsc extension overview
vsc extension webview
How to Code a VSCode Extension (youtube)

Visual studio code plugins

tailwind vsc plugin
vitest vcs plugin
The F5 command starts 3 tasks:

• dev mode for node vsc
• dev mode for web view
• open a new vsc instance with the plugin
  F5 is a shortcut to start the "Run and Debug" => "Run Dev Extension" task
  To run only vsc instance without background dev tasks chose:
  "Run and Debug" => "Run only Extension"