Setup of a Development Environment
Learn how to set up VS Code for writing Viash components.
Viash supports a lot of different scripting
languages and requires
you to be familiar with a bit of YAML to create and edit config
While you’re free to use any editor of your choosing to write these files, we want to provide you with all the necessary information in order to use Visual Studio Code for both the writing of the scripts and the creation of a config file.
Installing Visual Studio Code
What is Visual Studio Code?
Visual Studio Code is an open source code-editor developed by Microsoft for Windows, Linux and macOS. As of 2021, it’s the #1 most popular developer environment tool, and for good reason. It’s lightweight, supports many languages and has a ton of features. Some of its most prominent features include:
- Syntax highlighting
- Intelligent code completion
- Code refactoring
- Embedded Git
- Extensions and themes
VS Code can be downloaded from this page:
There are installers available for all major operating systems, so simply download and install the version for your system.
Using VS Code
Opening files and folder via the UI
Once you’ve installed VS Code, start it up and you’ll be greeted with the Get Started screen. On the left side you can choose a file or folder to open.
When opening code files, VS Code will try to detect the language based on the file extension and will apply syntax highlighting. For example, when opening a bash file you’ll see that Shell Script appears at the bottom right in the blue status bar.
If you open a file that VS Code doesn’t recognize, it will search in the extension library for a match and prompt you to install a matching extension. We have a few extension recommendations of our own below to compliment or replace those.
Opening files and folder using the terminal
You can open files and folders using VS Code by passing it as a
code in a terminal:
To open your working directory in VS Code, simply pass
. to code:
Visual Studio Code supports installing extensions that extend the
capabilities and introduce quality of life changes.
The lists below are our recommendations for use with Viash.
These extensions are useful for most languages:
- Code Runner: This allows you to easily run any selected code and output the results to the built-in terminal. Make sure to take a look at the Configuration section of the page to set it up for the languages you’ll work with.
- Code Spell Checker: A quality of life extension that prevents you from making common spelling mistakes in your code by showing squiggly underlines below typos.
- Docker: Build, manage and deploy containerized applications with this extension. Also provides one-click debugging for Node.js, Python and .NET Core inside a container. Very useful for testing out scripts inside of a container before creating components.
- Error Lens: This extension makes errors and warnings more prominent by highlighting the entire line and adding the message at the end. This can speed up the writing of scripts tremendously.
- Prettier code formatter: Integrates the prettier code formatter into VS Code, which makes formatting your code extremely easy.
Config files are written in YAML, so it makes sense to have an extension for that language:
- YAML: This extension provides YAML validation, syntax highlighting, auto completion and document outlining for YAML. A must have for writing and editing Viash config files!
If you’re planning on writing documentation for components you write, can supplement the description and the CLI with a Markdown document. VS Code has Markdown support built-in, but the extension below makes writing markdown documents even easier!
- Markdown All in One: Some of the features include keyboard shortcuts for text formatting, list editing , GitHub flavored Markdown and auto completion for Markdown.
- shell-format: By installing this extension, you get syntax highlighting and code formatting for shell scripts.
- C#: Adds syntax highlighting, IntelliSense and debugging capabilities to VS Code for C#.
Node.js Extension Pack: VS Code actually already has a lot of Node.js features out of the box, but this extension pack adds adds even more. The extensions adds JS code hints, module search, code snippets and IntelliSense for NPM and paths just to name a few features.
R: This extension adds syntax highlighting, code analysis, keyboard shortcuts, package management and a lot more for the R language.
- Scala Syntax (official): Adds syntax highlighting for Scala 2 and 3.
- Scala (Metals): Adds code completion, debugging, formatting, renaming and much more for Scala.
If you’re using
probably want to install the Remote -
extension. This extension lets you use your Windows version of VS Code
in WSL, as if it was running native. The commands, extensions and the
terminal will run on WSL, which makes for an ideal hybrid environment.
Once installed, you can connect to WSL by clicking the green remote button at the bottom left and choosing New WSL Window in the list that pops up. Alternatively, you can use the command
code .) on the WSL side to open that file or folder in a remote
VS Code session.