Save time with Visual Studio Code: tips and tools

Hello everyone, this is Antonella from the Itamde Online School. Today, I am sharing with you some practical tips to get the most out of the VS Code editor. Visual Studio Code (VS Code) sits at the top of the most used IDEs by developers, and there is a good chance it is your daily tool. But do you know all the tricks that could save you precious time? In this article, we will explore often underestimated features as well as extensions that could revolutionize your workflow.

Emmet: your best friend for faster coding

Let’s start with a fundamental but sometimes underused tip: Emmet. Natively integrated into VS Code, Emmet allows you to write more code in less time. You can abbreviate code blocks in just a few letters. For example, by typing “p10” in a CSS property, Emmet will understand that you want a padding of 10px.

Check out the amazing Emmet cheatsheet to discover all its possibilities.

Essential keyboard shortcuts

VS Code’s arsenal of shortcuts is vast, but let’s focus on those that facilitate code manipulation and make your workflow smoother.

Here are some essentials:

• Selection manipulation: Alt + Up or Alt + Down after selection to move code blocks while maintaining indentation.
• Selection duplication: Shift + Alt + Up or Shift + Alt + Down to duplicate the selection.
• Line deletion: Ctrl + X without selection to quickly delete a line.
• Modification by occurrence: Ctrl + D after selecting an occurrence to modify it.

Learn at least these shortcuts, and you will see significant productivity gains.

Search and replace

Let’s explore an essential VS Code feature: search and replace.

• Quick search: Use Ctrl + F to search the page. With VS Code, you can go further: use regular expressions, match case or whole words.
• Smart replacement: To replace text, use Ctrl + H. Press Ctrl + H, type “list-item” in the first field and “item” in the second. Click “Replace” for one occurrence or “Replace all” for all.
• Global exploration: Use Ctrl + Shift + F for a search across all your project files. Invaluable for finding occurrences of a function or variable.

Multiple cursors

Imagine being able to code in multiple places simultaneously in your code editor. That is exactly what the multiple cursors feature offers you. This powerful feature allows you to edit several lines of code at the same time, considerably speeding up repetitive tasks.

<ul class="list">
  <li class="list__item">Item 1</li>
  <li class="list__item">Item 2</li>
  <li class="list__item">Item 3</li>
  <li class="list__item">Item 4</li>
  <li class="list__item">Item 5</li>
  <li class="list__item">Item 6</li>
</ul>

Result:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Here is what you need to do:

• Use the mouse wheel and scroll up/down to create cursors.
• Highlight a text area and use Ctrl + D to select additional occurrences.
• Once all cursors are in place, type or modify the code simultaneously.

With this technique, you can modify multiple lines at the same time, considerably speeding up your coding work.

Smart use of built-in tools

VS Code offers three essential built-in tools:

1. IntelliSense: Your intelligent assistant. It smartly completes code, showing available options and displaying relevant documentation on hover.
2. Minimap: Provides a compact overview of your entire file. Allows quick navigation in long files, essential in complex projects.
3. Breadcrumbs: Enable breadcrumbs to see where you are in your project. Shows the path from root to current file, making navigation easy.

Built-in terminal

The terminal is an essential tool in web development. No need to open an external terminal anymore. Use the one integrated into VS Code to run commands, manage dependencies, and run scripts directly from the editor.

• Ctrl + ` to show/hide the terminal.
• Ctrl + Shift + ` to open multiple terminals.
• Ctrl + è to switch between terminals.

Extensions: push the limits of VS Code

Beyond native features, extensions further enrich your VS Code experience. Here are some must-have extensions:

1. GitLens: If you work with Git, this extension is essential. It displays all version control information directly in your editor.
2. Prettier: Automatically formats your code, ensuring it is always clean and readable. A must-have for consistent code.
3. Live Server: Launch a local server with a simple click and see your changes live. Ideal for web development.

Explore these extensions and find the ones that match your language and coding style.

Conclusion

By incorporating these tips into your daily practice with Visual Studio Code, you will dramatically accelerate your workflow. Every shortcut learned, every extension installed, and every feature mastered brings you closer to maximum efficiency. Happy coding!