A little background
Visual Studio Code was announced on the 29th of April 2015 by Microsoft. In April of 2016, it would go on and be released to the web. It now ranks as one of the most popular development environments. In the stack overflow survey in 2019, it was ranked the most popular IDE with 50.7% of 87,317 people saying they used it. It’s tough to meet a developer who doesn’t use it or hasn’t heard of it these days.
While it contains a lot of features you’d be familiar within a modern IDE, it also has a lot of features you might not have known about!
No more debugging sessions over Skype with Visual Studio Code Live Preview
Live share is an extension that allows you to share your project with other people without them needing to download or unzip any files. It works via a shareable link that you send to participants and then they open it either through a webpage or VSCode. If you press CTRL/CMD + P and then type ‘Live Share’ you will see all the live share commands. An important one is changing the presence which means people will or will not be able to join. Clicking on the live share tab on the left hand side will give you this view. Here you can see who is in the session and what file they have opened; you can open a chat to discuss things and even share a terminal with them.
All very useful for helping with projects. Far more convenient than sharing screens and requesting control on teams which can be a very laggy affair. This feature is amazing, and it provides a very quick way to do some pair programming remotely, something that has become increasingly more important in recent times.
Make Real Symbols with Font Ligatures
A font ligature is where two or more letters are joined to combine a glyph. Within programming we combine lots of symbols to create one symbol, for example, a double equal in JavaScript compares two values. There is also the arrow function which combines => to create a symbol that gives you extra functionality.
In VSCode there is a feature called “Font Ligatures” which allows you to combine symbols into one, making it easier to read. To set this up all you must do is install the font and then set it as your default font inside of VSCode. One of the most popular fonts is one called FiraCode which is available to download through GitHub.
Emmet can literally type code for you!
Emmet allows you to type shorthand commands for commonly reusable code. For example, I can create 3 divs, these simply divide up the page, with the class “navbar” by typing “.navbar*3”. If you learn all the shortcuts you’ll save yourself a lot of time. There’s a rather useful emmet cheat sheet. Once you get to learn emmet and you’ll never want to go back to actually typing the real code yourself. If you’re doing HTML templates then this can save you a lot of time as often you’re typing out the same reusable code to achieve a certain style. This is definitely worth learning!
Do your maths equation inside of Visual Studio Code
If you find yourself leaving your code to go and work out something on a calculator then you’ll find this one very successful. Simply type the expression you want to evaluate and then press CTRL/CMD + P, ‘>math’ and it will evaluate the expression you have typed. All without leaving VSCode. This is super handy if you need to just do a quick multiplication or addition as you can carry straight on with the problem without having to leave the code - avoiding the distractions that lay outside of VSCode.
Pretty code with Prettier
Visual Studio Code also comes with a formatter called Prettier. Press CTRL/CMD + P and then search for “Format Document” press enter and your code is now pretty. This will format things such as consistency between tabs and spaces, curly braces on the same lines, and missing semicolons. If everyone on a team is using Prettier then it will make the collaboration of code much easier as it’ll be formatted consistently.
My favourite part is that you can change a setting to make it format the document when you save it. Now you don’t even have to worry about formatting it! File > Preferences > Settings and then search for “Format On Save” and tick the box and now when you save your document will also be formatted.
There are so many wonderful tools ready to help you within Visual Studio Code and I can’t wait until it’ll do the coding for me!
Software Developer
Tom is an apprentice APL developer. He was born in Haywards Heath and has grown up in Southwater. At college he studied I.T, Media Studies and Sport BTEC where he realised that he was interested in software. After finishing college he started his career as a Mobile Application Tester before moving into an apprenticeship in software development. More about Tom
Ask Tom about Software Solutions