How do I setup Scriban on VSCode for code generation? - visual-studio-code

I would like to use Scriban as a code generator and VSCode as an editor. Ideally, I would like Intellisense and syntax coloring for editing templates along with the ability to generate and preview the output on save. Unfortunately,there's a dearth of information on how to achieve this using the Scriban Plugin for VSCode. There's also a SiteCore Scriban plugin, but it's unclear if it requires the SiteCore platform.

Related

How to start creating a language extension for VS Code?

Pursuant to the discussion in Add XHTML support, I'd like to start creating an extension for Visual Studio Code which would implement support for XHTML. Which is HTML with XML syntax, so the the desired functionality is already (mostly?) implemented elsewhere – for XML and HTML languages, the latter having two extensions bundled with VS Code: html and html-language features. But it's disparate.
As the first step, should I clone the VS Code repo and delete everything except the two directories named html and html-language features? Or Language services for HTML? Or the latter and html from the former? Or start with html, make it work for XHTML and only then deal with language features?
Should the second step be just adding the extension(s) I'm developing on my computer to my installation of VS Code? The GUI seems to allow adding only extensions from the Visual Studio Marketplace. Is it the right solution to place the extensions under development into VS Code's directory for extensions (either directly or with symbolic links)? I'm on Manjaro Linux.
If you can offer any other helpful advice, I welcome it too.

Custom VSCode extension: embed native editor in webview

Goal
I want to have a webview, that embeds the native editor (see image).
The embedded part does not need to have a tabbing-feature. It would be enough to have the editor object, that I fill and update manually per Javascript.
Question
Is that possible? How would I do that?
Background
I want to show various file contents within my own webview. These contents should be editable and have all functionality, that the vscode editor has (e.g. syntax highlighting, multiple cursors, intellisense,...). At best, also 3rd party extensions should work within them.
I don't want to start implementing the whole editor again, so I'm searching for a way to embed the editor.
It is not possible to embed the native editor that comes with VS Code. The extension API simply does not support it.
The closest you can get is to import the code of the editor into your webview. The editor is called Monaco and is available via the npm package monaco-editor. It supports most (or all?) of the features offered by VS Code editor, such as IntelliSense.
However, since this editor would be unaware of the installed VS Code extensions, themes and configuration options, it will behave differently than native editors. You might be able to improve the user experience by manually propagating configuration options and themes, but this would require a significant amount of work and might not be possible for other things, such as support for language servers or third party extensions.

How to get WebStorm code formatting in VS Code

In the company we are using WebStorm for React, and for the last 3 years I have been working in VS Code.
Is there a way to get exact code formatting for all languages in VS Code as in WebStorm on default settings, and how to achieve that in order to prevent unnecessary diffs in git?
I can only tweak VS Code settings, I must not touch WebStorm.
To get the same formatting/functionality as Webstorm, I suggest using VS Code extensions. You will find an extension for almost every language/framework available on the VS Code marketplace.
Here is a list of recommended extensions that makes VS code behave as Webstorm.
For your particular case, I suggest you to use and configure Prettier.
Note that you might not want to install too many extensions but only the ones you need because loading too many extensions will probably slow down your IDE.

How can I configure Visual Studio Code to recognize files with extensions other than .js as Javascript

We have a QA tool (SmartBear's TestComplete) that uses javascript as a scripting language, but names the file with a ".sj" extension instead of ".js". I would like to use Visual Studio Code to edit those files, with all the nice intellisense and other tooling that comes with it, but I can't figure out how to configure it to recognize .sj files as javascript files. Any ideas?
Answering my own question, just for future readers that may be searching for the same thing.
According to a tweet from #code, this is not yet possible, but is coming "soon".

Visual Studio Code Plugins (Format / Spell Check)

Using the new Visual Studio Code editor vs 1. This is not the full Visual Studio IDE but their atom.io based code editor. I would like to install plugins specifically for spell check and formatting my code. How can I do this?
I've followed instructions here: Is there a command for formatting HTML in the Atom editor?
but realized that I do not have a install plugin command.
It's been a few months since the question was asked (and answered), but thankfully, things have changed!
VSCode now support extensions!
Here's a relevant excerpt from the above blog post:
Extension Marketplace/Gallery
To complement the extensibility mechanism, we have also launched an in product gallery and web based extension marketplace. These allow you to discover and install extensions. To open this up in VSCode, simply hit F1 and select Extensions: Install Extensions.
Alternatively, you can browse the Extension Marketplace at https://marketplace.visualstudio.com/#VSCode.
I gave the marketplace a quick search and easily found multiple extensions for spelling and source formatting, but I'll forego making any specific recommendations since everyone's requirements are different.
For anyone looking to write their own extensions for VSCode, take a look at the documentation for extending VSCode, as it has a lot of the information you'd need to start writing your own extensions.
Lastly, thanks to Daniel for his comment. It helped me find the information I needed, but to save future visitors some time, I thought it was worth sharing my findings.
Plugin support is not currently enabled in the VSCode editor. The development team were not happy with the plugin API, so they have disabled them until further work can be made on this.
For more information, see this post: https://stackoverflow.com/a/30006220/495328
Nowadays you can use Prettier and Code Spell Checker for the purposes.
Here are some use case for spell check:
Load a CSS, JavaScript, Text, etc. file. Words not in the dictionary files will have a squiggly underline below the text.
To see the list of suggestions just click on the 💡 (lightbulb) in the left hand margin. You have the option to add your own words to the workspace dictionary.