April 3, 2023
According to the Stack Overflow developer survey (2022), Visual Studio Code (VS Code) is the most popular IDE. Almost 75% of 71,010 respondents who took the survey use VS Code. That percentage spans both professional developers and people who are learning to code. Stack Overflow Developer Survey on IDEs VS Code is loved and widely adopted, it is highly customizable and comes with a lot of features that will make development process more seamless. At Akadenia, we've been using the IDE for years and we would love to share our 10 tips for VS Code features that will improve your productivity
1. Multi-Cursor Feature
Find and Replace feature is handy for bulk renaming a whole file or project but what if you want to rename a variable inside a function but not across a file? The multi-cursor feature will be perfect for that.
Here's how it works: Select a text to edit then press Cmd+D (macOS)/Ctrl+D (Windows/Linux) to select the next occurrence, keep pressing the same key combination until the desired occurrences are reached, now type a new name or delete.
2. Move Line Up / Down
Cutting and pasting to reorganize code is super useful but what if you want to reorder a list, an array of values, your imports? There is a neat shortcut.
Here’s how it works: While holding Option key (macOS)/Alt key(Windows/Linux) then press the UP or DOWN keys.
3. Balance Inward / Outward
Selecting an HTML/TSX section in a large file to move it around can be tricky to find the correct opening and closing tags, this VS Code feature would automatically detect the hierarchy and allow you to select the exact section that you need.
Here’s how it works: Bring up the command palette using F1 key then type in either Balance.
Tip: Create a keyboard shortcut for faster access.
4. Go to Definition
Jumping into a function/class/variable/etc definition is useful instead of constantly referring to the documentation (hmm, if any exists)
Here’s how it works: Hold Cmd (macOS)/ Ctrl (Windows/Linux) then click on the object that you want to inspect the definition.
5. Peek Windows
Similar to Go To Definition feature, Peek Windows provide a quick way with a floating window that allows you to view the full definition of the object of your choice.
Here’s how it works: Right click on an object and select ‘Peek’ then pick ‘Peek Definition’.
Tip: This command isn’t assigned a keyboard shortcut by default but you can assign one.
6. Duplicate Line or Block Up / Down
Copy and Paste is one of the most commonly used features, however, if you’d like to duplicate a line of code then there’s a faster way.
Here’s how it works: Hold the Shift+Option keys (macOS) or Shift+Alt (Windows) then press Up or Down to duplicate your selection.
Note: Linux doesn't have a shortcut assigned by default but you can create a shortcut in the shortcuts menu.
7. Toggle integrated terminal
The integrated terminal in VS Code is a great feature so you don’t keep switching between VS Code and your terminal during development. You can find the toggle integrated terminal button on the status bar at the bottom of the VS Code window. Alternatively, you can also use the default keyboard shortcut Ctrl + ` to toggle the terminal.
If you have a favorite feature, drop us a line and let us know. We hope you've enjoyed this article.
Software EngineerSee All Works
You might be also interested in the following blog posts