Thomas King

Posted on Nov 24, 2023 • Edited on Nov 29, 2023

How to code faster - VS Code edition

#vscode #productivity #programming

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

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

Move the cursor of the mouse to the beginning of the word.
Hold left-click.
Drag all the way to the end of the word.
Release left-click.
Right-click the selection.
Click "copy".
Scroll in the file explorer of VS Code to find the destination file.
Click the destination file.
Move the cursor to the desired location within the file.
Right-click in destination.
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).

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.

Use Emmet

Emmet is a content/code assist tool to write code faster and more efficiently. It comes standard with VS Code 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:

One of the cool things about Emmet is that you can generate "lorem ipsum" texts as well. E.g., ul>li*4>lorem4 will generate an unordered list of 4 elements, with each list item containing 4 random words.

Use a formatter

Use a code formatter inside VS Code to format your code. I highly recommend Prettier.
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.

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

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, Tailwind UI snippets, Bootstrap snippets, 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.

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.

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.

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.

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.

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.

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!

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

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. If you have no or little experience with RegEx, take a look at https://regexlearn.com/.

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: converts input as rows to a certain output based on a given format.
Mockaroo: generates mock data and outputs it in several formats (JSON, CSV, XML, etc.).
JSON Generator: 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:



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:



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



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

Use short keys for copy-pasting.
Navigate more efficiently by searching instead of manually navigating.
Rename using F2 instead of doing it manually.
Use Emmet.
Use a formatter for neat outlining (and other advantages).
Use code snippets.
Quantum type, like there's no tomorrow.
Use VS Code refactoring.
RegEx to the rescue for search and replace.
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!

Top comments (25)

Hassan Suhaib • Nov 24 '23

This is actually useful. For selection, I have some further tips:

Use ctrl + shift + arrow keys to select a whole word or multiple words at one
Use shift + end while at the beginning of a line to select the whole line
Use shift + home when at the end of a line to select the whole line
Use ctrl + d to select multiple instances of a selection. The "f2" technique kinds works the same but with "ctrl + d" you have more control

Thomas King • Nov 25 '23

Thanks for your feedback!! I would say whatever works fastest for you. I end up using a combination of short keys together with a few fast mouse clicks. But your tips might help others as well!

Ed Rutherford • Nov 28 '23

Nicely Done!

One extremely convenient keyboard shortcut I use all the time in VSCode is an alternate of one you list above. Instead of moving a line up or down using alt+up/down, you can add the shift key to that button combination to actually duplicate the line.

Even better, if you're working with a React component that you'd like to duplicate quickly (like I do 😄), you can highlight the entire component and press alt+shift+down to paste a duplicate immediately below the selection!

Paweł Ciosek • Nov 24 '23

Thank you so much! 🙏❤️

Best Codes • Nov 25 '23

This is the most useful list of tips I have ever found for VS Code! Thank you so much for making this post, I knew about only maybe 2 of the things on the list. I especially love the Emmet, I will use that a lot. :)
RegEx will be useful too, and so will the ALT cursor thing — that one is really cool.

Again, thanks for your post, I think I will follow you now. :)

Isaac Klutse • Nov 24 '23

Very helpful

Bradley Oliver • Nov 27 '23

I can do anything with a keyboard I can do with a mouse... on windows specifically. Which is why I like it compared to other reasons I love the Mac or Linux environments. I am a power windows user and rarely reach for the mouse unless its for convenience (scrolling) but I was unaware of the RegEx in the Search and Replace and NimpleText is new - this is a good write up here! Good job!