VS Code Extension for Spaceweb

v0.0.6

Giving developers superpowers.

How To Install

To install this extension download the binary file .vsix by clicking on the above link. And install it directly from vscode as shown below.

else if you want to install it through command line on vscode insiders run

code-insiders --install-extension spaceweb-vscode-extension-0.0.6.vsix

code --install-extension spaceweb-vscode-extension-0.0.6.vsix

VS Code is one of the most popular code editors for web developers globally and also at Sprinklr. We have decided to look into its extension API and ways how we could enhance the VS Code experience for all Spaceweb users.

Code Snippets

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

How do you add an existing component in your code? You probably open some examples, copy & paste it and do the modifications. All that can take some significant time and a loss of focus. Code snippets are a much faster way to do all those things without switching windows:

• Start typing the snippet activation keyword, for example Button import.
• Press Tab to insert a suggested snippet.
• Keep pressing Tab to jump through predefined tabstops with placeholders to modify the default values.
• Let Prettier to take care of the final formatting (optional).

Our extension has two code snippets for each Spaceweb component. One is for the import statement and second for the components itself. There are also some additional snippets for importing React and functional component body. You might wonder how these snippets are defined. VS Code provides a special grammar for that. For example, this is a definition for the Button component:

"Button": {
  "scope": "javascript,javascriptreact,typescript,typescriptreact",
  "prefix": [
   "Button component"
  ],
  "description": "Base Button component.",
  "body": [
    "<Button",
    "  ${1:onClick={${2:() => alert("click")}\}}",
    "  ${3:startEnhancer={${4:undefined}\}}",
    "  ${5:endEnhancer={${6:undefined}\}}",
    "  ${7:disabled}",
    "  ${8:shape={${9:default}\}}",
    "  ${10:variant={${11:primary}\}}",
    "  ${12:size={${13:lg}\}}",
    "  ${14:intent={${15:default}\}}",
    "  ${16:isLoading}",
    "  ${17:isSelected}",
    "  ${18:fullWidth}",
    ">",
    "  ${19:Hello}",
    "</Button>"
  ]
}

Did we write definitions like that for all 50+ components? Nope! That would be

• a lot of work.
• prone to bugs.
• hard keeping up to date.

This is where React View comes to the picture. Our components are documented with React View and therefore they already have detailed documentation. We were able to leverage that and generate the snippets programmatically. If you are using React View now you can get VS Code snippets for free. For more information, go to the React View documentation.

Coloring

This feature can be configured in settings. You can disable it, switch between Dark, Light, HyperSpace Light and Hyperspace Dark themes or choose a different visual cue like the background color.

Theme Cheat Sheet

One of the most visited pages of our documentation is Theming. We already mentioned colors but there are many other theming values related to sizing, fonts, borders and others. We really want to streamline this look up process so we have added Theme Cheat Sheet. You can open it through the command palette:Spaceweb: Open theme cheat sheet.

Documentation shortcuts

There is also a command for each Spaceweb component to open the documentation site. This might save a few seconds as well.

Auto-completeClassName

We noticed that spaceweb users frequently visits atomic class cheat sheet page on our documentation website. Very often we forgot they styles that class brings with it. We again want to streamline this process so that you do not have to visit cheat sheet page again and again. Just start typing in classname or press Ctrl+space to open up the suggestions for all the classname.

Change Preferences From Settings

Extension offers different ways to highlight the color. You can change the theme. And even prefer to completely turn off the color highlight feature.

Conclusion

We have released our first Spaceweb extension. It has multiple features like code snippets, coloring, theme cheat sheet, auto-complete classnames, etc, to make developers more productive. We are looking forward to your feedback and if you have ideas for improvements or additional features, please let us know!