Applications of Visual Studio Code

 

VS Code is from Microsoft, so it's entirely anticipated that software’s like TypeScript will work. This article focuses mainly on features for the web as well as on JavaScript developers, VS Code has integrations with Go, Python, Java, and Ruby—just to name a few.

Interactive Playground

One of the best ways to learn the ins and outs of VS Code is through the Immersive Sandbox.

This is a special page that goes through popular keyboard shortcuts and concepts such as multiple cursors, split panels and keyboard shortcuts. Each of the examples is interactive so that you can practise lessons in the tutorials themselves.

The Interactive Tutorial is on the "Welcome" page when the editor is first opened.

Note: You can return to the Interactive Tutorial at any time by opening the VS Code command palette Ctrl/Cmd + Shift + P and choosing "Interactive Playground."

Now that you've mastered the basics, you're going to need a font that's as elegant as the code you're about to write. Look no further than FiraCode and Font Ligatures for that.

Font ligatures

Font Ligatures are fonts that contain special characters that are used to represent symbols that consist of more than one character. We've got a lot of these in the programming. There will be characters such as <=, >=, == and ===.

FiraCode is a lovely VS Code font ligature. Next, download the FiraCode font from GitHub and add it to your computer font. Then add the following lines to your Ctrl/Cmd+, User Preferences file.

Try a couple of the special characters I mentioned above to see the difference. Font Ligatures pop up in areas that you wouldn't usually expect. Places such as www and &&. Go ahead, try to see what you're learning!

Now that you've got a nice font ligature and some lovely new icons, it's time to exploit the muscle memory you've built up in previous editors over the years by installing a Keyboard Mapping.

Keyboard mapping

Part of my reluctance in moving to VS Code was that I had spent a lot of frustration and effort to learn about Sublime Text keyboard shortcuts. I was still a little proud of my keyboard prowess and I wasn't ready to give it up at all.

Luckily, I haven't had to.

VS Code's got something called Keymaps. These are extensions that map all of their shortcuts (well almost all) to other editors. There are main maps for all common editors, including Sublime, Atom.

Sync Settings

With the Settings Sync extension, you can export all of your VS Code settings to Gist, and then pull them all down from another VS Code installation and add them immediately.

This is also a good way to share your setup with your colleagues. Only give them an ID to your Gist, and they can sync all your settings to instal them. Some stores have a central gist, and all new team developers can get an exact configuration with a single button. This is productivity!

And speaking of productivity, let's get straight to one of my favourite productivity tools for web developers: Emmet.

Emmet

Emmet is a common expansion tool for markup and CSS that has been around for a long time. However almost every day, I meet people who either haven't heard of it or are new to creation, and just learn about it. That's all right! We all learn different things at different times.

Emmet is built into VS Code, so there's no extra work to get it going. Only start typing your Emmet syntax in an HTML or CSS file and let the editor do the rest. By default, VS Code will also show you a glimpse of the upcoming expansion of Emmet.

Intellisense In JSON Files

Intellisense is a well-known editor feature, but is mainly thought of only within code files. The VS Code expands the classical concept of intelligence and applies it to the JSON files as well.

You can see this if you add any settings to the User Preferences file. VS Code also provides intelligence for package.json files. What's even more remarkable is that it offers intelligence to npm packages within the .json file.

Type check your JavaScript

Remember the great TypeScript integration I told you about earlier? One of the little-known tricks is that you can also use the TypeScript compiler to search plain JavaScript files.

You do this by adding a/@ts-check to the top of every JavaScript file, and you will automatically get the TypeScript error checked in the file.

If you want to monitor the basic testing features of TypeScript, just drop the.tsconfig file in your project. When I say TypeScript "just works" in VS code, I mean it works so well that it's almost seamless for the developer.

Now that you've got code lining and even type testing when you need it it's time to let VS Code handle those problematic formatting issues with Prettier.

Prettier

Prettier is a fantastic open-source code formatting tool. Teams (and individuals) are commonly used to ensure that coding styles are universal across projects and developers.

It automatically reformats your code to meet certain specified requirements, such as which column to encode, how to format promises, and whether to use single or double quotes.

Prettier is supported with the Prettier Extension in VS Code. To instal it, open the Ctrl/Cmd+K Extensions panel on Ctrl/Cmd+X and check for "prettier"

When enabled, Prettier can see any file that Prettier knows how to format in the taskbar. You can invoke Prettier in a file using the command "Format Document": Alt/Option + Shift + F.

Live Share

VS Code Live Sharing has just been revealed at Microsoft Connect. It allows several developers to pair on a project at once. You don't need to verify the code in a repo or fire up a screen sharing tool.

Other developers will automatically upload your project to their editor and see your cursor in real time without having to configure something at the end of it.

This works for debugging, too. If you start a debug session, the other person will have the same complete debug experience right inside their editor. They can also monitor the debug process by entering, leaving, and transferring the code.

If the other person changes your code, it changes your editor as well. It's very hard to wrap your head around before you see it in reality.

 

By Mehak sachdeva