code-server — Run VS Code on any machine anywhere and access it in the browser

code-server allows you to run on any machine, preferably on a Cloud Server, and access it from anywhere.

Yes, that means you can use VS Code on your iPad for example 😉

Once installed you’ll also need to set up authentication and the like. Alternatively you can run code-server --link and get a .cdr.co subdomain, protected by logging in using your GitHub account.

If you want to test it out locally, you can also install it locally using brew install, after which it’ll run on port 8080. Docker image also available.

code-server
code-server Setup Guide →

GitHub1s — One second to read GitHub code with VS Code

This tool — not endorsed nor affiliated with GitHub — lets you quickly load any GitHub repo in an online hosted Visual Studio Code environment.

Just add 1s after github and press Enter in the browser address bar for any repository you want to read.

Note that this is a *viewer* only, no editing. For that you’ll need to wait on GitHub Codespaces or run VSCode in the cloud yourself.

GitHub1s →

Visual Studio Code “Custom Editors”

An exciting new feature that shipped with Visual Studio Code 1.44 is support for Custom Editors.

Custom editors let extensions provide custom editing experiences using HTML, CSS, and JavaScript in place of VS Code’s normal text based editor. Custom editors support both text based files and binary files, and enable some neat new scenarios such as wysiwyg editors, previews, and even image editors!

The true power behind Custom Editors is the fact that these editors have both read and write support, and offer way more than simply “an alternate view of a certain file type”. Changes in the original source file are immediately reflected in the custom editor, and vice versa.

I’m quite excited for the Custom Text Editors feature, as it opens up a ton of possibilities. Here’s a few examples the docs hint at:

  • Previewing assets, such as shaders or 3D models, directly in VS Code.
  • Creating WYSIWYG editors for languages such as Markdown or XAML.
  • Offering alternative visual renderings for data files such as CSV or JSON or XML.
  • Building fully customizable editing experiences text files.

~

An example editor is vscode-asciiflow2, a tool to easily draw ASCII diagrams. Thanks to the Custom Editor API it can be used directly inside of Visual Studio Code

~

To get started with creating your own Custom Editor, be sure to check this video:

Custom Editor API →
Custom Editor Examples →
vscode-asciiflow2

💁‍♂️ For a project I’m working on I’ve created a “Pump Configurator” in React. It allows a user to visually define the tanks and pumps layout of a Petrol Station (see video below). The generated configuration is stored as JSON. If we wanted, we could use the Custom Editors API to bring this editor into VS Code.

GitLens – Git Supercharged Extension for Visual Studio Code

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Just installed it and must say it’s really nice. Here’s an introductory video walking you through the extension:

GitLens — Git Supercharged →
GitLens on the Visual Studio Marketplace →

Visual Studio Code: Visually Hide Secrets in Environment Files with Cloak

Sparked by an idea by Wes Bos, John Papa has created and released a first version of Cloak:

Cloak hides/shows your secrets in environment files, to avoid accidentally sharing them with everyone who sees your screen.

Handy when doing screencasts and the like.

Do note that it only visually hides the secrets, no changes are made. Only ENV files are supported for now.

Visual Studio Marketplace: Cloak →

React Food Truck – A curated set of Visual Studio Code extensions for React Developers

Burke Holland:

I spent a lot of time combing the depths of the VS Code Extension Marketplace to find the tastiest and most delicious extensions that are guaranteed to make your life as a React developer 129% more enjoyable. All you have to do is install the React Food Truck extension and it will automatically install my handpicked extension smorgasbord.

Introducing React Food Truck →
React Food Truck →