/ asp.net vNext

Customizing Code Colorization in VSCode

On my linux install where I've been doing my Mono .net work, I'm using VSCode. Since I'm lazy and VSCode is fairly light weight, I figured I'd use it as broader text editor.

Default Language Support in VSCode

VSCode does provide a few languages out of the default install

  • Javascript
  • C#
  • JSON
  • HTML
  • Markdown
  • CSS, Sass and Less
  • Dockerfile
Adding additional languages

Yeoman to the rescue again here. The command line world for asp.net vNext and linux uses yeoman scripts to assist with all of the boiler plate generation. ASP.NET vNext folks have even provided a VSCode Theme and Colorization package generator. In this article we will use it to import TextMate Language Definitions.

Install the Yeoman code generator

sudo npm install -g generator-code
Add Ruby Slim support

For this example we're going to add ruby slim template highlighting support.

Yeoman code generator will ask for a URL of the tmLanguage definition. There a number of them and searching on google will show that. In this case we are going to get Ruby-Slim from https://raw.githubusercontent.com/slim-template/ruby-slim.tmbundle/master/Syntaxes/Ruby%20Slim.tmLanguage

Change directory to the VSCode extensions directory. By default it's at ~/.vscode/extensions

yo code

When prompted for the URL or file: paste in the raw url for the tmLanguage. Yeoman should pickup the metadata and create a package locally in the correct spot (if you're in ~/.vscode/extensions)

Once installed restart VSCode and Open a slim file.

Have fun adding colorization to Visual Studio Code :)

Customizing Code Colorization in VSCode
Share this