I use Visual Studio Code every day, and it is one of the biggest productivity tools in my arsenal thanks to its incredible built in features. Over the years, I’ve expanded VSC’s potential with a set of tips I found really useful for day to day tasks, so in this article I would like to share some of them with you.
1. Better Merge
If you worked in a team, you will run into merge conflicts sooner or later, and instead of manually resolving conflicts, this extension will make your life a lot easier by allowing you to pick the version of code you want to keep or toss with a click of a button:
2. Emmet Snippets
VSC supports Emmet Snippets out of the box, this means no more manually type out HTML in full.
for example:
ul.mylist>lorem10.item*4
will generate the following HTML
<ul class="mylist">
<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, a.</li>
<li class="item">Non itaque quo, officia, minima neque inventore deleniti modi aspernatur!</li>
<li class="item">Aut ab, dolor iusto excepturi facere possimus quisquam deserunt temporibus.</li>
<li class="item">Voluptas eveniet corporis possimus aliquam cumque iste reprehenderit quos a!</li>
</ul>For a full list of Emmet shortcuts visit Emmet Cheatsheet
3. Auto JS Doc Generation
As a Javascript developer, documentation is very important to me, and the latest release of VSC has made it easier than ever to do that. To automatically add JS Doc style comments, type /** and press tab before your functions, and it will auto generate a JS Doc style documentation, all you have to do is specify what each parameter values and what return values are.
4. Auto Console.log
Javascript developers will love this: is console.log your debugger of choice? Then rejoice, as I show you an extension that will prevent you from typing console.log ever again.
I have an in depth tutorial on how you can accomplish this: How to never write Console.log again
5. Instant Markdown Preview
Are you tired of visualizing markdowns in your mind? VSC Comes with the ability to let you see your markdown files instantly side by side
This is a powerful feature that will save you a ton of time. If you prefer previewing markdowns in the browser then the Instant Markdown extension is the tool you’re looking for. With this plugin, whenever you open a .md file, your default browser will automatically open at http://localhost:8090 to show you exactly how your markdown file looks like.
6. Go to file from source
As developers, we tend to link to various files from our source code, a prime example of this is the ES6 import or require() command in Node, what usually happens is you try to figure out how to traverse to a specific file with ../ path navigation, for example:
import myModule from '../../../../../myModule';
import testModule from '../../../myModule';usually it takes multiple tries for you to find the actual relative path to your file. However, with VSC, this couldn’t be easier, all you have to do is press and hold the command (⌘) key and hover over your import path, and if the cursor turns into a hand symbol, then that means the path is valid, and you can click it to verify:
7. Multi Select
If you’ve use other editors like Sublime or Atom, then this feature should be an essential part of your day to day workflow. To select something, simply highlight it and hold down command (⌘) + D and it will select all other occurances of that selection, and as soon as you make changes, it will apply that change across everywhere. A really practical usage of this is when you have to format a file with hundreds of lines of badly formatted text, you can use this to painlessly and quickly format it:
8. Zen Mode
Ever want to remove all distractions from your workspace? Then turning on the Zen Mode may work wonders for you with a simple key combo of command(⌘)+shift p, then type in “zen”
9. Quick Navigation
Quick Open
Another feature I use daily is the quick navigation feature. Press command(⌘)+p and type in any part of a file name and VSC will automatically and quickly find matching files from your workspace and then press enter to open it. VSC had done a great job optimizing this feature because you can tell by how fast the search results pop up.
Go To Line
Another handy navigation tip is to use commpand(⌘) + p :122 to quickly go to line number 122.
Minimap
This feature was included in latest VSC release 1.10, and it’s an essential navigation feature for you sublime or atom lovers, it allows you to quickly drag across the minimap to navigate to location in the source code. This feature is disabled by default, so if you want to turn it on, you would have to set this in your configuration:
"editor.minimap.enabled": true
10. Snippets
VSC comes with the ability to insert snippets of code predefined by you, to turn on this feature, you need to set “editor.tabCompletion”: true in your user preferences. To see a list of snippets you have press cmd + shift +p, and type “snippet” and you will see a list.
Using it is as simple as typing first few characters of the snippet and press tab to autocomplete:
You can define as many snippets as you want: Code -> Preferences -> User Snippets -> Select the language you want
Let’s make an HTML snippet:
"HTML BASE": {
"prefix": "html",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
"<meta charset=\"utf-8\">",
"<title>App</title>",
"</head>",
"<body>",
" ",
"</body>",
"</html>"
],
"description": "Inserts an html template"
}The only annoying thing about this is that if you want to define a multi-line snippet, you would have to put each line as a separate element of the body array:
Luckily there are plenty of extensions out there to give you predefined snippets for the language of your choice, here are some good ones:
- Python (https://marketplace.visualstudio.com/items?itemName=donjayamanne.python)
- HTML (https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
- Go (https://marketplace.visualstudio.com/items?itemName=lukehoban.Go)
- Javascript (https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
- PHP (https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense)
I hope you enjoyed these tips and tricked I’ve enjoyed over the years to boost my productivity. If you have tricks of your own, please let me know in the comments below.
If you enjoyed this tutorial, you may want to check out:
- 7 reasons why I switched to Visual Studio Code from Sublime Text
- My Visual Studio Code Setup
- Interview With Wade Anderson, Program Manager Of Visual Studio Code
If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!
