Table of Contents
Introduction
VS Code is one of the most popular code editors in use today. A brainchild of Microsoft's development community, VS Code has rapidly ascended to become the de facto choice for developers seeking an unparalleled coding experience.
It hosts an extremely large collection of tools and features that are exceptionally customizable out of the box. If we learn how to leverage the most out of this simple yet powerful editor, we might never want to think about another editor again. Believe it!
In this article, we explore 4 commendable features of VS Code, each of which can individually upscale our coding experience of this remarkable piece of software.
Without further ado, let's start exploring these features.
Rulers
Rulers are one of the most useful features of VS Code. Essentially, they help us keep track of when we're about to hit a line length limit in our code.
We all want to write readable code, right?
Well, one aspect of writing readable code is to be wary of the average line length of the code, or maybe even just take note of the length of a few 'outlier' lines (that are very very long).
Consider the following JavaScript code, extracted from this GitHub repo, and then messed up with for the sake of this example:
Even though, the nomenclature of identifiers is convincing, the spacing is spot on, and the indentation is there as well, the code still isn't that readable — the comment is way too long than it should ideally be.
Worse yet, if we disable the word-wrapping feature of VS Code, which is enabled in the screenshot above, we'd get an even poorer result:
If we take a look at some popular projects on GitHub to get a sense of how experienced developers typically approach writing comments, we see that they almost never write extremely long comments; instead, they manually break their comments into multiple lines as soon as a particular line starts to exceed a threshold line-length limit.
This limit is commonly chosen to be 80 characters, the reason for which dates back to mid 20th century, when 80 used to be the maximum number of characters printable in OS terminals and typewriters.
The number 80 really has a fascinating history to it which is worth the read.
The code shown in the screenshot above, as stated earlier, was deliberately messed up with. Now, let's see the actual code in the repo:
As is evident, now the comment is streets ahead in terms of readability. We no longer have to rely upon the word-wrapping feature of VS Code in order to completely see the comment in the editor window — it's all nice and compact.
It's important to keep in mind that it's not just comments where the need of line length thresholds is handy; sometimes, certain executable expressions grow so long that they exceed the line length limit.
In either case, having a concrete limit is helpful.
But if we say that our threshold is 80 and start coding, we won't obviously be able to abide by it unless our editor has some way to demarcate the limit visually. Fortunately, VS Code is one of these editors.
Rulers in VS Code are vertical guidelines that can be configured to be shown at a given line length.
Better yet, we can even have multiple rulers at a time. And if this ain't enough, we can even apply colors to those rulers individually.
Here's how to apply a ruler in VS Code at the user level; they can even be applied at the workspace level.
1. Open Settings
Click on the gear icon at the bottom-left corner in VS Code and select Settings. As a shortcut, you can also click Ctrl + ,.
2. Search for 'rulers'
In the Settings window, type in 'rulers' into the search bar. The first result that appears is the one that concerns us. Click on Edit in settings.json on this result.
3. Create a ruler
Clicking on Edit in settings.json navigates to the settings.json file and automatically creates an editor.rulers property.
This property defines all of the rulers in the current environment (user, in our case). Each ruler can either be an integer or an object containing the position of the ruler and its color.
Type in 80 and save the settings.json file.
And you're done!
With the ruler set, let's now review the comment example shown above:
See the vertical line near the right edge of the screenshot?
That's our ruler.
Now we can clearly see that the comment is nicely within the 80-character limit.
Perfect!
Further reading:
To learn more about how to configure rulers with given colors, check out the article
Do You Know About Rulers in Visual Studio Code?
Tasks
Tasks in VS Code are a means of executing command-line programs directly from within VS Code, instead of having to go out into a separate terminal window for them.
Usually VS Code tasks are used to carry out certain useful tasks — hence the name 'tasks' — such as transpiling code files, running test suites, spinning up servers, and so on.
If you're familiar with npm and npm scripts, npm scripts are one instance of the application of VS Code tasks. But obviously, there are many other instances as well.
Further reading:
The official VS Code website has a great discussion on tasks. You can check it out at Tasks in Visual Studio Code.
The best part of VS Code tasks is that we can even create custom tasks.
In the following example, we'll create a custom task to run a Python file from within VS Code, even without having to go to the Integrated Terminal (in VS Code) and entering the python command manually. The task will itself figure out the path of the Python file that we want to execute.
Let's begin.
1. Select Configure Tasks...
From the top menu bar, go to Terminal and select Configure Tasks....
2. Choose Create tasks.json file from template
From the dropdown that pops up, choose the option Create tasks.json file from template.
Sometimes, it's possible to not have such the option Create tasks.json file from template in the dropdown, as discussed below.
Can't see the option Create tasks.json file from template?
If, somehow, you don't see such an option, then it's probably because you already have a
tasks.jsonfile in your local.vscodedirectory, with at least one configured task.In this case, select that task to open up the
tasks.jsonfile in the editor window and edit the file. Otherwise, you can also manually open up thetasks.jsonfile by going to the.vscodedirectory in the Explorer panel.With this, you can skip the next step as you already have a
tasks.jsonfile in place.
3. Select Others from the dropdown
From the next dropdown that opens up, select the last option, Others.
4. Create the task
This creates and launches a tasks.json file in the editor window. A new task template is already configured in the file to begin with.
5. Edit label and command
Now we need to do two things: edit the label property of the task and then its command property.
The label property is used to literally label the task so that it's easy for us to distinguish it when it's shown within a list of tasks to execute in VS Code.
It can also be used to associate a particular task's execution with a key binding, as we shall explore in the next section below.
We'll label the task as 'Run code' since we'll use it to run our Python code:
{
"version": "2.0.0",
"tasks": [
{
"label": "Run code",
"type": "shell",
"command": "echo Hello"
}
]
}
Next up, we'll now edit the command property.
command basically represents the command that'll be executed in the terminal by VS Code.
In our case, since we ought to run a Python source file, we'll use the python executable command (assuming that python has been added to PATH in the underlying operating system), followed by the path to the file to execute.
For obtaining the path of the file to execute, we'll leverage another commendable feature of VS Code — task variables.
VS Code defines a large collection of predefined variables that we could use in tasks.json, specifically in the command property. The syntax is the same as that of interpolated variables in template strings in JavaScript, that is, ${_variable_}.
For example, the ${file} variable holds the path to the current file in the editor window.
Further reading:
The complete collection can be seen in Visual Studio Code Variables Reference.
Coming back to the discussion, we'll use the ${file} variable next to python in our task's command to be able to execute the currently opened file in the editor.
Here's the tasks.json code:
{
"version": "2.0.0",
"tasks": [
{
"label": "Run code",
"type": "shell",
"command": "python ${file}"
}
]
}
And we're done!
Now, let's quickly create a super basic Python file and execute it via our Run code task.
Here's the Python file:
print('Hello World!')
In order to run it, we'll first navigate to Terminal in the top menu bar and then select Run Task. This will open up the following dropdown menu:
See the Run code option in there? This is the task we just configured above.
Click on it and then select Continue without scanning the task output.
This gets our Python file to be executed:
Amazing!
In the next section, we shall see how to perform this same manual work using a keyboard shortcut in VS Code.
Keybindings
VS Code is an extremely customizable code editor. One quite handy customization is to be able to change the key bindings associated with given tools and utilities.
For instance, as per the convention, Ctrl + O is used to open a new file in VS Code. If we want to, we can change the keybinding for opening a new file to anything we like, as long as it's not used by another tool or utility.
However, changing such conventional key bindings is not recommended. Technically, one can swap the functionality of Ctrl + S with that of Ctrl + O, but who would want to do this anyway?
Keybindings are a handy feature when we want to configure or change very specific keyboard shortcuts for not-so-conventional tools or utilities. As an elementary example, we can configure key bindings to run particular tasks in VS Code.
In the following discussion, we create a key binding for running the Run code task that we created in the previous section. This is a super useful thing to do to be able to quickly execute a Python program in VS Code as it's edited.
1. Open Keyboard Shortcuts
Click on the gear icon at the bottom-left corner in VS Code and then select Keyboard Shortcuts. Alternatively, you can also press Ctrl + K followed by Ctrl + S.
2. Open keybindings.json
From the window that opens up, click on the file icon at the top-right corner.
This opens up the corresponding keybindings.json file, defining all the new key bindings for the current VS Code installation.
Copy paste the following code into the file:
[
{
"key": "ctrl+numpad1",
"command": "workbench.action.tasks.runTask",
"args": "Run code"
}
]
What this does is that is simply configures the Ctrl + Numpad1 (the key 1 on the number pad) key combination to run a task called Run code.
The key property specifies the key combination, command specifies which VS Code command to execute in case that key combination is pressed, and args specifies the arguments to provide to the given command.
Save the changes made to keybindings.json and then go back to the Python file in the editor.
Now press Ctrl + Numpad1, and voila, you should see the file executed in the terminal.
Exclude Git Ignore
If you have experience of Git and working in a complex project along with it, you'll be familiar with one pain point in relation to working in VS Code.
That is, most of the times, files and directories mentioned in .gitignore aren't really necessary for us to see in the Explorer. They extraneously clutter the Explorer view.
For example, here's a screenshot of the Explorer panel, for the same GitHub repo, loaded into VS Code:
Notice the visibility of the .vscode and node_modules directories and such files as index.css, index.css.map (both created by compiling SASS styles), package-lock.json, index.js (in the dist directory), and so on.
All of these directories/files are specified in the .gitignore file which, more or less, means that we don't really want them while working on the project.
Wouldn't it be amazing if we could somehow, temporarily, hide these from the Explorer panel and only see the directions/files that concern us?
Well, VS Code allows us to do so!
The respective setting associated with this is called Exclude Git Ignore and simply indicates whether or not the files/directories mentioned in .gitignore should be excluded from the Explorer.
💡 Notice: Even if .gitignore is part of the .gitignore file, VS Code won't exclude it from the Explorer, and rightly so — if it was excluded as well, we'd have to again and again toggle the setting just to be able to edit the .gitignore file.
By default, it is set to false, i.e. everything is visible, but we can modify it as we like.
Here's how to modify this setting.
1. Open Settings
Click on the gear icon at the bottom-left corner in VS Code and select Settings. As a shortcut, you can also click Ctrl + ,.
2. Search for 'exclude git ignore'
In the Settings window, type in 'exclude git ignore' into the search bar. The first result that appears is the one that concerns us.
3. Toggle the setting
Depending on whether you want the setting to be applied at the user level or at the workspace level, select the appropriate tab, User or Workspace, from below the search bar.
Thereafter, simply toggle the Exclude Git Ignore checkbox to enable/disable the setting.
And that's it!
With the setting enabled, let's now see the Explorer panel again for the GitHub repo:
Without a doubt, it's much cleaner and leaner this time, all thanks to Exclude Git Ignore.
In conclusion
To summarize it, when people say that VS Code is an exceptional code editor and more than just an editor, they really mean it. As a matter of fact, VS Code is more customizable than certain IDEs, and its innovations never stop.
The 4 features discussed in this article will undoubtedly take your VS Code productivity to the next level, and you'll start to love the editor more and more.
There are many other notable features as well, but they deserve separate articles, and with time, we'll create more such useful feature compilations for VS Code.
In the meanwhile, happy learning and happy coding. 😊
More about CodeGuage
At CodeGuage, we offer absolutely free-of-cost courses on CSS, JavaScript, Advanced JavaScript, AJAX, and React, to get better at frontend development. In addition, many more courses are planned to be introduced in the near future.
You can follow us on Twitter in order to stay updated with all of the latest endeavors happening on our website.
And if you enjoyed reading this article, don't forget to ❤ it and share it with others.
Top comments (0)