How to code faster - VS Code edition
Tags: vscode, productivity, programming
Published: 2023-11-24 07:00:00

Pair programming can be very productive. But there's nothing so annoying as seeing your fellow programmer struggle with his coding. And with struggle, I don't necessarily mean that he lacks experience, but rather that he's coding so slowly. It almost feels like the scene with Flash from Zootopia (a must-see movie).

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz8fhsv26fdej6k6djip.jpg"><figcaption>Source: Alphacoders.com</figcaption>
</figure>

How to not be Flash? Here are some tips and tricks for coding in Visual Studio Code (VS Code).

> Note: I do not own a Mac, so the short keys mentioned here are for Windows only. You can find a translation to Mac [here](https://www.makeuseof.com/windows-vs-mac-shortcuts/), but since I can't reproduce them on a physical Mac, I did not include them in this guide.

## Copy and paste smarter

I've seen people copy-pasting code by doing the following:
1. Move the cursor of the mouse to the beginning of the word.
2. Hold left-click.
3. Drag all the way to the end of the word.
4. Release left-click.
5. Right-click the selection.
6. Click "copy".
7. Scroll in the file explorer of VS Code to find the destination file.
8. Click the destination file.
9. Move the cursor to the desired location within the file.
8. Right-click in destination.
9. Click "paste".

This is a somewhat slow process to do. Especially if you need to apply this several times... Some ways to improve your copy-pasting are:

- Use `CTRL + C` to **copy** and `CTRL + V` to **paste**.
- Use `CTRL + SHIFT + left/right arrow` to **increase/decrease selection by words**.
- Use `SHIFT + left/right` arrow to **increase/decrease selection by character**.
- Clicking a line of code in VS Code and pressing `CTRL + X` will **put that line in your clipboard**. Using `CTRL + V` anywhere will **insert that line of code there**.
- Use `ALT + up/down arrow` to **move a line of code up/down** a spot.

Copy-pasting smarter also means navigating smarter.

## Navigate smarter

Instead of going through the explorer pane manually, use the key combination `CTRL + P`. With this, you can search files by name. This is a "smart" search, meaning that it will not only look for words containing your search text but also a combination, e.g., `prodetcon` will also find `project-details-container.component.ts`. Using `CTRL + P` is a lot faster than seeing someone struggle through their file explorer pane, which is a pain in itself (pun intended).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgi4edfc61mjln700yon.gif)

Instead of looking for some code inside a file by scrolling, use these key combinations:
- `CTRL + G`: go to line
- `CTRL + F`: search in file (using the `ENTER` key navigates to the next occurrence)
- `CTRL + click class/function/etc.`: go to definition of said class/function/etc.

Use `CTRL + TAB` to switch between the last opened file and the current (or `TAB` further to switch to other opened files). This is a lot faster than moving your cursor to the taskbar, looking for the correct tab, and clicking it to open.

> Note: switching between opened files is efficient this way in VS Code. Also, make use of `ALT + TAB` in Windows to switch between open windows.

## Rename smarter

Do not rename every single occurrence of a variable yourself. It is time-consuming and prone to errors. Instead, go to the definition of that variable and press `F2`, rename it, and press `ENTER`. This will change every occurrence. Not only does this work on variables, but also on functions, classes, interfaces, etc. This also works across files.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jls5prhd81ua6o24w6hl.gif)

## Use Emmet

[Emmet](https://emmet.io/) is a content/code assist tool to write code faster and more efficiently. It comes [standard with VS Code](https://code.visualstudio.com/docs/editor/emmet) so there is no need for any plugin. The concept is simple: you start typing an Emmet abbreviation, press `TAB` or 'ENTER', and a full Emmet snippet for that abbreviation will come out.

An example Emmet abbreviation could be `.grid>.col*3 `. When you press `TAB` or `ENTER`, VS Code fills out the entire piece of code for you:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wt5s8wb3splmpvylkhm.gif)

One of the cool things about Emmet is that you can generate ["lorem ipsum" texts](https://docs.emmet.io/abbreviations/lorem-ipsum/) as well. E.g., `ul>li*4>lorem4` will generate an unordered list of 4 elements, with each list item containing 4 random words.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pgcocuj4r7nfbt6wvyb.gif)

## Use a formatter

Use a code formatter inside VS Code to format your code. I highly recommend [Prettier](https://prettier.io/docs/en/). 
One of the benefits of using a code formatter is that it also "beautifies" your code. So if you copy-paste code from somewhere that has no layout at all, you can hit the format key combination (`CTRL + ALT + F`) et voilá, your code is now "beautified" and, more importantly, readable.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/505nwj0kpv7eotq5e8ns.gif)

> Note: a good tip is to apply formatting on save. You can change this in the settings (look for "Format on save").

Formatting is not only useful for yourself but for the whole team because it enforces the team's code to be more consistent. Have a look at my other post [Enforcing front-end guidelines in an Angular project](https://dev.to/kinginit/enforcing-front-end-guidelines-in-an-angular-project-4199) to read more about it.

## Use code snippets

Code snippets are templates that will make it easier to write repeating pieces of code, e.g., for loops, while statements, etc.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v9g9v8mhlojm00aex6g.gif)

By making use of code snippets, you can easily create blocks of code by typing in the bare minimum. You can use the built-in code snippets, use extensions that provide snippets, or even create your own!

The built-in snippets provide templates for a number of languages, such as TypeScript, JavaScript, HTML, CSS, etc. You can use it to easily create a `switch` statement, as seen above, for example.

The VS Code Marketplace has several extensions that provide snippets for you. Examples are [Angular snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2), [Tailwind UI snippets](https://marketplace.visualstudio.com/items?itemName=evondev.tailwindui-snippets), [Bootstrap snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode), etc.

Finally, you can create your own snippets. You can either create global snippets for a specific language or create snippets specific to a project. I won't go into any details here, but have a look at the documentation on [how to create your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets).

## Make use of "quantum typing"

I call it "quantum typing" because this really speeds up the way you type out code in VS Code. It's all about multi-selection. When you need to change or add text to multiple lines, VS Code allows you to do so by selecting those multiple lines and simply starting to type on those lines at the same time.

Hold `SHIFT + ALT` and drag across multiple lines to make a selection. You'll see that multiple typing cursors appear across those lines. Simply start typing, and the text will be added simultaneously.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl37ca8jwo8sfnm07j0p.gif)

If you want to add the same text to several places but they do not align, you can hold `ALT` while clicking all the places where you want to type the same text.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/loqu6id3968iilj1o1jl.gif)

You can also hold `ALT` and select multiple words at the same time. Instead of clicking a position, simply drag for a selection and release left-click or double-click for a single word selection, all while holding that `ALT` key.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o05eg38ejzcxhtotlza9.gif)

## Quickly surround selection

Code often has to be surrounded by square, round, or curly brackets. Or something needs to be surrounded by quotes (single or double). To do this, people often go to the start position, type in the starting bracket, move the cursor to the end position, and type in the ending bracket. A more efficient way is to select the parts that need to be surrounded and simply type the starting bracket. VS Code will be smart enough to know that the whole part needs to be surrounded.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upt3uxf00b9j9ujoetq4.gif)

This works for `(`, `{`, `[`, `<`, `'` and `"`.

## Make use of VS Code refactoring skills

You can use VS Code to automatically refactor pieces of your code. E.g., instead of writing your own getters and setters, you could let VS Code generate them for you.
To refactor something, just select what needs to be refactored, right-click, and click `Refactor...` or even faster: use `CTRL + SHIFT + R`.

Depending on the file you're in, VS Code can offer you several kinds of refactoring. E.g., for TypeScript, you could use `Extract function`, `Extract constant`, or `Generate get and set accessors`. See the full list for TypeScript [here](https://code.visualstudio.com/docs/typescript/typescript-refactoring).

## Search and replace using RegEx

Regular expressions (RegEx) can be a very powerful tool in your developer toolkit, and it is worth your while to get better acquainted with them. Not only can you use it in your own code (e.g., validation patterns, string replacement, etc.), but you can also use it for an advanced search and replace in VS Code.

### Example

You are in a project where some CSS selectors start with `app-` and end with `-container`. Due to new guidelines, they want you to change the suffix `-container` to `-wrapper`. You could try a simple search and replace by looking up `-container` and replacing it with `-wrapper`, but when you do the replacement, you see that some occurrences have been replaced, which should not have been the case (e.g., a CSS selector called `.unit-container-highlight` becomes `.unit-wrapper-highlight`).

With RegEx, we can search more fine-grained. Using a capturing group, we can extract the words we want to keep while replacing the rest. The RegEx can look like `app-([a-z\-]+)-container`. We want to replace the results so they end with `-wrapper`. The replacement string will look like `app-$1-wrapper`. Just make sure you checked the `Use Regular Expression`.

> Caution: even though a RegEx allows for a more fine-grained search, check the results in the search pane before doing the actual replacement!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jojfb84q3ir9c2js61c7.png)

You can have even more control by allowing the search to be applied only to certain files. Examples could be only HTML files (`*.html`) or even an entire folder only (`src/app/modules`).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m03sd4p8nffhga5jveb.png)

If you want to try out the RegEx before doing the search to be sure it's the correct one, use an online RegEx tester, such as [Regex101](https://regex101.com/). If you have no or little experience with RegEx, take a look at [https://regexlearn.com/](https://regexlearn.com/learn/regex101).

## Use tools to automate monotonous work

Sometimes we have to do monotonous work like creating mock data, creating a function for each field in a class, creating HTML list items based on the properties of an interface, etc. Like the saying goes:

> Work smarter, not harder!

Use tools to automate such kinds of monotonous work instead of doing all the tedious work yourself. Tools I often use are:

- [NimbleText](https://nimbletext.com/live): converts input as rows to a certain output based on a given format.
- [Mockaroo](https://www.mockaroo.com/): generates mock data and outputs it in several formats (JSON, CSV, XML, etc.).
- [JSON Generator](https://json-generator.com/): also generates mock data, but for JSON specifically. It's a bit more complex, but it allows for tailor-made results.

A good example of using NimbleText would be creating an entire form in HTML based on a few fields. We have a list of fields that we want to show in a form. Each field will have a label and an input. Let's create some data for NimbleText to convert:

```text
first name, text
last name, text
email, email
street, text
number, number
city, text
postal code, text
```

Here we have 7 rows and 2 columns. Each row represents the form field. The first column is the name of the label, and the second column is the type of HTML input.
Inside NimbleText, we leave the settings as is (column separator `,` and row separator `\n`). 
Each form field should be in a `div` with the class `.form-field`, containing a `label` with the text and an `input` for the form field. The pattern for NimbleText will look like this:

```text
<div class="form-field">
  <label for="<% $0.toCamelCase() %>"><% $0.toSentenceCase() %>:</label>
  <input id="<% $0.toCamelCase() %>" type="$1"/>
</div>
```

When we have a look at the output, we see that **a lot** of work has been done for us:

```HTML
<div class="form-field">
  <label for="firstName">First name:</label>
  <input id="firstName" type="text"/>
</div>
<div class="form-field">
  <label for="lastName">Last name:</label>
  <input id="lastName" type="text"/>
</div>
<div class="form-field">
  <label for="email">Email:</label>
  <input id="email" type="email"/>
</div>
<div class="form-field">
  <label for="street">Street:</label>
  <input id="street" type="text"/>
</div>
<div class="form-field">
  <label for="number">Number:</label>
  <input id="number" type="number"/>
</div>
<div class="form-field">
  <label for="city">City:</label>
  <input id="city" type="text"/>
</div>
<div class="form-field">
  <label for="postalCode">Postal code:</label>
  <input id="postalCode" type="text"/>
</div>
```

So be creative and use these tools whenever you can.

## Conclusion

Coding faster in VS Code comes down to knowing your short keys and using the power of the IDE to your advantage. Here's a quick round-up of what was mentioned:

1. Use short keys for copy-pasting.
2. Navigate more efficiently by searching instead of manually navigating.
3. Rename using `F2` instead of doing it manually.
4. Use Emmet.
5. Use a formatter for neat outlining (and other advantages).
6. Use code snippets.
7. Quantum type, like there's no tomorrow.
8. Use VS Code refactoring.
9. RegEx to the rescue for search and replace.
10. Use tools such as NimbleText to automate monotonous work.

I hope you enjoyed reading this. If you know anyone who might need a little help with coding just a bit faster, feel free to share the article!

If you have any questions, don't hesitate to reach out! Thanks!