Visual Studio Code, Intellisense & Emmet
Visual Studio Code is a great editor which brings Microsoft’s new found dedication to the open source world into practice. The single best thing about this editor is the Intellisense engine which through VSCode is now available cross platform! It also has a host of other things going for it like multi-cursor support, side by side editing, a host of keyboard short-cuts and the great for rapid prototyping Emmet snippets engine.
To get Intellisense working for your favourite framework you have a few options. The option that I use is to create a ‘definitions’ directory in your VSCode working directory and add the Typescript definition for what I’m working on in there. For example if I’m working on a PIXI.js project I would look up the latest PIXI.d.ts file and save it to the definitions directory. I could then add a reference in my code to that file and have full Intellisense working!
Add a reference:
Another option to get Intellisense working is to install tsd and manage your definitions through there.
Emmet allows you to type shorthand code, then hit tab to auto generate the proper HTML/CSS code. For example if you type
Emmet will auto-insert a full HTML template stub for you like so:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
I can recommend this cheatsheet to give you an understanding of the power of Emmet for both HTML & CSS templating.
VSCode defaults to the Visual Studio Dark theme which I am a big fan of as it’s easy on the eyes (writing code on a bright white screen burns my eyes out after a few hours!) and is easy to read. It’s worth trying VSCode as it’s free, cross platform and under constant improvement. I’m liking the new Microsoft!