4 Incredible VS Code Features That You Can't Miss!
Tags: vscode, coding, programming, tooling
Published: 2023-08-23 11:39:28

## Table of Contents<a name=""></a>

- [Introduction](#Introduction)

- [Rulers](#Rulers)

- [Tasks](#Tasks)

- [Keybindings](#Keybindings)

- [Exclude Git Ignore](#Exclude_Git_Ignore)

- [In conclusion](#In_conclusion)


-----

## Introduction<a name="Introduction"></a>

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<a name="Rulers"></a>

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](https://github.com/bilalbro/recipes-rest-app), and then messed up with for the sake of this example:


![Some JavaScript code in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/501h30d2dq7iv7gxpvit.png)


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:


![Some JavaScript code in VS Code, with unwrapped comments.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyguj5q62zninecwe5i0.png)


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:


![Some JavaScript code in VS Code, with better comments.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0ylafsgf0ysfalkuko5.png)



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**<a name=""></a>

Click on the gear icon at the bottom-left corner in VS Code and select **Settings**. As a shortcut, you can also click `Ctrl` + `,`.


![VS Code Manage menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjy889o84buqfma83sfh.png)


### 2. Search for _'rulers'_<a name=""></a>

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.

![VS Code rulers setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aywi2lgeeybl9yrsf46d.png)



### 3. Create a ruler<a name=""></a>

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.

![Adding rulers in settings.json in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y388a5132ngg1ouqu6tj.png)


_And you're done!_

With the ruler set, let's now review the comment example shown above:


![Some JavaScript code in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n43s73z65ni543zb6p6c.png)


_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?](https://medium.com/gitconnected/do-you-know-about-rulers-in-visual-studio-code-f754b221a135)


-----

## Tasks<a name="Tasks"></a>

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](https://code.visualstudio.com/docs/editor/tasks).

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](https://www.codeguage.com/courses/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...**<a name=""></a>

From the top menu bar, go to **Terminal** and select **Configure Tasks...**.

![VS Code Terminal menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u44uj0r0c3zmroc58x48.png)


### 2. Choose **Create tasks.json file from template**<a name=""></a>

From the dropdown that pops up, choose the option **Create tasks.json file from template**.

![Configure tasks... dropdown in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wexhdmazmrajedzrw6ub.png) 


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**?<a name=""></a>
> 
> If, somehow, you don't see such an option, then it's probably because you already have a `tasks.json` file in your local `.vscode` directory, with at least one configured task.
> 
> In this case, select that task to open up the `tasks.json` file in the editor window and edit the file. Otherwise, you can also manually open up the `tasks.json` file by going to the `.vscode` directory in the Explorer panel.
> 
> With this, you can skip the next step as you already have a `tasks.json` file in place.


### 3. Select **Others** from the dropdown<a name=""></a>

From the next dropdown that opens up, select the last option, **Others**.

![Select a Task Template dropdown in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9vvmz88d0h37j1b6gqy.png)



### 4. Create the task<a name=""></a>

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.

![tasks.json file in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxj3dubvokapl7mkkof6.png)


### 5. Edit `label` and `command`<a name=""></a>

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:

```json
{
   "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](https://www.codeguage.com/courses/js/strings-basics#Template_literals), 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](https://code.visualstudio.com/docs/editor/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:

```json
{
   "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:

```python
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:


![Run task dropdown in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69fh8yx0hewhguzj656m.png)



_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:


![Output of Python code in the terminal in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhtfkreqqsxasxjpgzg3.png)

_Amazing!_

In the next section, we shall see how to perform this same manual work using a keyboard shortcut in VS Code.



-----

## Keybindings<a name="Keybindings"></a>

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**<a name=""></a>

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`.

![VS Code Manage menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcwj2mvzrzvoaxubiwko.png)


### 2. Open `keybindings.json`<a name=""></a>

From the window that opens up, click on the file icon at the top-right corner.

![Keyboard Shortcuts window in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xp0rpqvnk7nrsl9uo39.png)


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:

```json
[
   {
      "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.

![Output of Python code in the terminal in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egh2kebmixwbzpmz29np.png)



-----

## Exclude Git Ignore<a name="Exclude_Git_Ignore"></a>

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](https://github.com/bilalbro/recipes-rest-app), loaded into VS Code:

![Explorer panel in VS Code for a project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yosg1krgczq0x52vyc2z.png)



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**<a name=""></a>

Click on the gear icon at the bottom-left corner in VS Code and select **Settings**. As a shortcut, you can also click `Ctrl` + `,`.

![VS Code Manage menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d2zj1v5no0ur1feassi.png)



### 2. Search for _'exclude git ignore'_<a name=""></a>

In the Settings window, type in _'exclude git ignore'_ into the search bar. The first result that appears is the one that concerns us.

![Exclude Git Ignore setting in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wg7m8wh4n8fvrt4j4o5.png)



### 3. Toggle the setting<a name=""></a>

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.

![Exclude Git Ignore setting in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2apb6ymffrfea0x20bj.png)



_And that's it!_

With the setting enabled, let's now see the Explorer panel again for the GitHub repo:

![Explorer panel in VS Code for a project, after applying Exclude Git Ignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlm91548cwot8cd547ow.png)

Without a doubt, it's much cleaner and leaner this time, all thanks to **Exclude Git Ignore**.


-----

## In conclusion<a name="In_conclusion"></a>

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](https://www.codeguage.com/courses/css/), [JavaScript](https://www.codeguage.com/courses/js/), [Advanced JavaScript](https://www.codeguage.com/courses/advanced-js/), [AJAX](https://www.codeguage.com/courses/ajax/), and [React](https://www.codeguage.com/courses/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](https://twitter.com/codeguage) 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.