GitHub - CZDanol/vscode-code-widgets: Interactive widgets embedded in source code · GitHub
/" data-turbo-transient="true" />
Skip to content
Type / to search
Sign in<br>Sign upAppearance settings
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
CZDanol
vscode-code-widgets
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
master
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>162 Commits<br>162 Commits
.vscode
.vscode
demos
demos
src
src
.gitignore
.gitignore
.pre-commit-config.yaml
.pre-commit-config.yaml
.prettierrc.json
.prettierrc.json
.vscodeignore
.vscodeignore
CHANGELOG.md
CHANGELOG.md
CONTRIBUTING.md
CONTRIBUTING.md
IDEAS.md
IDEAS.md
LICENSE.md
LICENSE.md
README.md
README.md
WIDGETS.md
WIDGETS.md
build-extension.mjs
build-extension.mjs
logo.png
logo.png
logo.svg
logo.svg
package-lock.json
package-lock.json
package.json
package.json
tsconfig.json
tsconfig.json
View all files
Repository files navigation
Code Widgets
Interactive widgets embedded in source code.
This VS Code extension turns annotated comments into widgets that get embedded directly into the source code. The comments travel with the code through git, and to anyone without the extension installed they are just comments. Nothing needs to be stored outside the file.
The widgets offer various ways to interact with the code using CodeLens and Document Links they generate, for example commenting/uncommenting a block of code (commentToggle/commentRadio), selecting a value from the list (select) or sorting lines (block). All widgets are documented in the widget library .
Usage
# @codeWidget spin Request timeout {steps: [5,10], min: 5, max: 60}<br>TIMEOUT_S = 30
turns into:
# — single-line comment prefix for the language the file uses.
@codeWidget — marker that identifies the comment as a Code Widgets annotation .
spin — keyword identifying the widget to generate. All widgets are documented in the widget library .
Request timeout — user-defined label that gets visually highlighted.
{steps: [5,10], min: 5, max: 60} — options , in YAML flow syntax. Optional. Options for all widgets are documented in the widget library .
The widget acts on the line below the annotation, or on a block of lines when the widget supports it.
The extension features a completion assistant, for both keywords and options. Simply run the Create Code Widget command to get going.
Use case examples
Set up widgets for the constants you keep nudging, the logging code you keep commenting and uncommenting, the token you keep regenerating.<br>Anything you edit by hand often enough to resent it.
Annotate the config file you ship, and setting your service up becomes clicking rather than editing —<br>pick a database, generate a secret, turn on HTTPS, without anyone reading a paragraph of documentation first.
Contributing
Ideas and bug reports are welcome; pull requests are not.<br>See CONTRIBUTING.md.
License
PolyForm Perimeter 1.0.1, with an added clause converting the license to GPL if the repository becomes dormant.<br>Free to use, including commercially; you may not build a competing product from it.
About<br>Interactive widgets embedded in source code<br>Resources<br>Readme<br>License<br>Contributing<br>Contributing<br>Activity<br>Stars<br>9 stars<br>Watchers<br>0 watching<br>Forks<br>0 forks<br>Report repository
Releases
Packages
Contributors
Languages
You can’t perform that action at this time.