Visual Studio Code tips and tricks to boost productivity
Visual Studio Code is an immensely popular text editor among software developers due to its sleek design and numerous extensions. Despite its widespread use, many developers are unaware of certain productivity-boosting tips and extensions that can save them hours of time during coding sessions. Here are some pro tips and tricks that I have learned to increase productivity and efficiency in VS Code:
1. Keyboard Shortcut Keys for Cursor Movement:
When coding, it is best to use the keyboard more than the mouse. While there are times when using the mouse is more efficient, it is a good rule of thumb to minimize mouse usage and find keyboard alternatives whenever possible. Luckily, there are several keyboard shortcuts available in VS Code for moving and selecting lines, words, and blocks of code.
Here are some useful keyboard shortcuts for moving and selecting the cursor:
Move your cursor
Ctrl + arrow keys = move the cursor word by word
Ctrl + shift + arrow keys = select words or patterns selectively
Ctrl + home = go to the start of the line from anywhere in the code
Ctrl + end = go to the end of the line from anywhere in the codeSelect Blocks of Code from Your Cursor:
In addition to moving the cursor around the code, there are several keyboard shortcuts available for selecting blocks of code from the cursor. These shortcuts can be incredibly helpful when copying or moving code around.
Here are some useful keyboard shortcuts for selecting blocks of code:
Ctrl + L = select the entire line where the cursor is present (hold Ctrl and keep pressing L to select consecutive lines)
Ctrl + shift + end = select the portion of the line from the cursor to the end of the line
Ctrl + shift + home = select the portion of the line from the cursor to the start of the line
Ctrl + shift + arrowkeys = select blocks of code from any directionThere are tons of other shortcut keys that you can search for yourself, here are a few more:
Shift + alt + down arrow (or up arrow) = duplicate a line
Alt + down arrow/up arrow = move a line 2. Auto rename — extension
One method is to select the opening tag’s name and press Ctrl + D, which will select the closing tag’s name as well. Then, type the new name to change both tags simultaneously. However, an even more efficient approach is to install the “Auto Rename Tag” extension in VS Code. This extension automatically changes both the opening and closing tags’ names on the fly, saving valuable time during coding sessions.
3. GitLens — Extension
In collaborative coding environments, version control tools such as Git and GitHub are commonly used. To enhance code review and collaboration, the “GitLens” extension for VS Code is a powerful tool that allows you to view who wrote which code and make suggestions directly within VS Code without having to navigate to the GitHub website. By using these extensions, you can streamline your coding process and collaborate more effectively with others.
4. Find files and folders
Instead of browsing and finding the directories and files, you can directly use the Ctrl + P command and search for them easily.
Use the Ctrl + G command to directly jump in the line of code without having to use your mouse to scroll or move the cursor.
5. JSON to TS — extension
As a TypeScript user, creating interfaces for API responses can be a tedious task. Often, it requires manually creating interfaces using JSON as a reference. Fortunately, the “JSON to TS” extension eliminates this manual effort by automatically generating interfaces for any JSON data, saving hours of time.
6. vs code-styled-components
Writing styled components can also be challenging without automatic syntax highlighting and CSS suggestions. However, by installing the “vs-code-styled-components” extension, your styled components will receive syntax highlighting similar to the standard CSS highlighting you receive when writing plain CSS code. This extension can significantly enhance your productivity while writing styled-components.
7. Snippets
To avoid the repetitive task of copying and pasting blocks of code repeatedly in multiple files, you can use snippet-generating extensions in VS Code. These extensions use specific keywords to generate blocks of code automatically with just a few keystrokes. This feature can save significant time and effort, as you can easily create code blocks that you frequently use across multiple files.
Bonus Tip
Managing numerous tabs in your browser can be a cumbersome task, but creating tab groups can significantly improve your browsing experience. By organizing your tabs into groups, you can easily locate the relevant tabs and switch between them without wasting time searching for them individually. This feature can enhance your productivity while browsing the web.
Right-click on a tab, and click on the “Add tab to a new group”
Then, type a name for your tab group and press enter
Now your tabs are organized where the tabs are placed in collapsible groups, each having its own name and color code
Conclusion
Familiarizing yourself with common developer tools is crucial to becoming a skilled developer. Experienced developers typically use a set of tools that you will likely encounter in your career, so it’s best to start learning them early. By doing so, you’ll increase your chances of becoming a proficient developer and being able to work efficiently.
