How To Code Faster in Visual Studio Code (2023)

Use Visual Studio Code tools to improve productivity

How To Code Faster in Visual Studio Code (1)

Visual Studio Code is a free and open source code editor that supports almost any and every programming language. It runs on Windows, macOS X, and Linux systems.

VS Code has an exclusive marketplace that offers many off-the-shelf plugins to customize the platform to your needs, such as themes, extensions, debuggers, language supports, and other additional supports.

Compared to Visual Studio, VS Code is significantly lightweight, and the difference can be instantly felt. This is because it runs applications in the background and independent from the IDE, making sure the IDE doesn't slow down.

No matter what type of project, VS Code easily helps you set up the IDE. It can also run Azure and Docker and can deploy with confidence and ease when it comes to deploying applications. It supports Git and easy debugging, and it has IntelliSense that helps improve error-free and clean coding.

Now that you know about VS Code, here are some exclusive features that will help accelerate and improve your coding with ease, thus boosting productivity.

Multi-cursor editing

The multi-cursor editing feature allows you to edit simultaneously at different locations in your code. With multi-cursor editing, this can be achieved in the following ways:

  • Box selection: Use the Shift+Arrow key (any direction with choice of select) or Shift+Alt when pressing the text with the mouse. You can also consider the Ctrl+Shift+Arrow key to select words and sections.
  • Add the cursor: Use the Ctrl+Shift+Arrow key (up or down) or mouse-click with Alt.
  • Create cursor on all occurrences: Select a single instance of string and press Ctrl+Shift+L. Now all occurrences will be selected at once.

IntelliSense

Visual Studio Code comes with pre-built JavaScript and TypeScript IntelliSense. Therefore the IDE suggests the next possible code that could be completed. It's similar to the text prediction feature on Google search or your mobile phone.

For example, in the code below we create the book object:

var book = new Book();

To access the title attribute of the book, we need to do the following:

const title = book.title;

VS Code starts listing out the attributes and functions of the book object as soon as we hit book. Thus we can select the attributes we need. Suppose VS Code does not suggest any. Then we can press Ctrl+Space to enable the dropdown with suggestions.

Line actions

Working with an entire line is something many developers come across. VS Code offers a couple of shortcuts to improve productivity when editing a complete line. Here are some common things we would do with lines:

  • Copy and paste on the line immediately above or below: Ctrl+Alt+Arrow key (up or down).
  • Copy a complete code block above or below, and highlight the code block: Alt+Shift+Arrow key (up or down)
  • Move an entire line up or down: Alt+Arrow key
  • Delete an entire line: Ctrl+Shift+K

Rename refactoring

Sometimes we come across scenarios where we have to rename a certain function name or class, or a certain variable throughout the project. In that case, highlight the terminology that you wish to rename, and hit the F2 key. This will rename all instances.

In the below example, rename the AppButton component to Button.

function AppButton({id, name, onClick}){
return(
<>
<Button id={id} name={name} onClick={onClick} />
<>
)}

Highlight AppButton and press F2. Then rename it to Button. Everywhere in the project with the term, AppButton will be renamed to Button.

Formatting

Formatters keep the code clean. They make the code more readable and writeable. This makes it easier and quicker to debug the code. Visual Studio Code has a pre-installed formatter for JavaScript and TypeScript.

You can achieve this by using Shift+Alt+F to format the complete document or by selecting the desired block of code and using Ctrl+K Ctrl+F.

You can also tweak settings to format code on saving, auto-saving, and many more. Format-on-save is something I find convenient. Therefore, I do not want to always be pressing on different combinations but just use a simple save.

Code folding

With hundreds to thousands of lines of code, code folding is a very useful feature. Collapsing code blocks/sections improves readability. This can be achieved by pressing Ctrl+Shift+[ to fold and Ctrl+Shift+] to unfold from the current cursor position.

Sometimes you will want to fold all sections. This can be achieved by Ctrl+K Ctrl+0 to fold and Ctrl+K Ctrl+J to unfold.

Many languages support indentation, and folding is mostly achieved by indentation. You can indent and create foldable sections using Ctrl+K Ctrl+1 through Ctrl+K Ctrl+5. However, a much easier way would be to format your code using a code formatter and then fold it.

Errors and warnings

Visual Studio Code is intelligent enough to identify and highlight errors (usually syntax errors) and warnings with squiggles (wiggly underlines). Using the F8 key, you can sequentially navigate across them and view the detailed error message. As you correct them, the scroll bar and squiggles will update.

Snippets

Code snippets are small pieces of code. With Visual Studio Code, based on the project you have created, whether it be PHP or JavaScript, you have simple code snippets, which, once selected, will complete the rest of the code for you, helping you to accelerate editing and write cleaner formatted code.

For example, let's give the try-catch block a shot with PHP. Simple type “try,” select “try catch” from the list of suggestions, and press Tab. The try-catch block will be created as follows.

How To Code Faster in Visual Studio Code (2)

For creating custom snippets of code, you can refer to this article. This article creates a custom code snippet for React Components.

How to Write Your First VS Code JavaScript SnippetSave time writing repetitive codebetterprogramming.pub

JavaScript type checking

Visual Studio Code has a strong pull towards JavaScript and TypeScript. Sometimes, type-checking JavaScript code can help you spot errors that you might have not caught. You can run a TypeScript type checker against your JS code by simply adding the //@ts-check comment on top of the file.

You can apply the type check to the complete workspace by using the “javascript.implicitProjectConfig.checkJs” : true to the complete workspace and using //@ts-nocheckor //ts-expect-errorto individual files or lines.

//ts-checklet loggedIn = true;
loggedIn = 1;

For more information regarding JavaScript with VS Code, refer to the documentation.

Terminal management

Apart from the code, VS Code has a terminal that can be accessed by simply using the Ctrl+~ command.

You can add a new terminal by using Ctrl+Shift+~ . You can navigate between terminals using Ctrl+pgUp or pgDown. You can split your terminal using the Ctrl+Shift+5 and use Alt+Arrow key (right/left) to focus between the two.

For a more detailed understanding, visit the official documentation.

I am more comfortable using keyboard shortcuts, and I use the mouse at a minimum. This might seem like a lot to remember at the very beginning of using the keyboard, but when you continue to use it, it’s just like Control C Control V: all in muscle memory. You don’t even have to remember it.

Let’s try to get this achieved using the keyboard and minimize the mouse's use.

And that is why I would prefer to use the keyboard over the mouse.

Visual Studio Code offers the most comfortable atmosphere for developers, and its scalability makes it very flexible for developing projects of any type, anywhere, at any time.

Sharing knowledge is the only way to gain knowledge. Feel free to add on and contribute via comments for those who may benefit from this story.

Have fun! Enjoy coding!

Top Articles
Latest Posts
Article information

Author: Annamae Dooley

Last Updated: 12/08/2022

Views: 6354

Rating: 4.4 / 5 (65 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Annamae Dooley

Birthday: 2001-07-26

Address: 9687 Tambra Meadow, Bradleyhaven, TN 53219

Phone: +9316045904039

Job: Future Coordinator

Hobby: Archery, Couponing, Poi, Kite flying, Knitting, Rappelling, Baseball

Introduction: My name is Annamae Dooley, I am a witty, quaint, lovely, clever, rich, sparkling, powerful person who loves writing and wants to share my knowledge and understanding with you.