DEV Community

Cover image for Visual Studio Code Tips & Tricks
Sidhhh
Sidhhh

Posted on

Visual Studio Code Tips & Tricks

Visual Studio Code is a popular code editor used by many devs since it is powerful, minimal, and open source.

Here is a list of VS code tricks & tips.

Command Palette

  • Open the command palette by combining ctrl + shift + p.
  • The Command Palette allows you to access various available commands just by typing a keyword instead of navigating through menus.

Launching VS Code from Command Line

  • Open the command palette (ctrl + shift + p) and type shell command and Install 'code' command in PATH command.
  • Now open your preferred terminal and type code in any folder and start editing!

Split View

  • If you are working on two different files of the same project then split view is a lot helpful here.
  • Split View can be customized based on your preference.
  • You can enable this by selecting View > Editor Layout > Split Up

Edit multiple lines simultaneously

  • In VS Code you can edit multiple lines by adding cursor to a different location. This is very useful if you are gonna edit the same code in different lines.

Integrated Terminal

  • VS Code has an integrated terminal that is accessible by combining ctrl + shift + `

Plugins & Themes

  • VS Code has a rich plugin API that enables users to build cool plugins
  • You can install them from VS code marketplace link here

Top 5 VS Code plugins

Prettier

Prettier is an opinionated code formatter, supports multiple languages, and integrates with most editors.
If you wanna keep your code clean then this is a must!

Live Server

Live Server launches a development local Server with live reload feature for static & dynamic pages when running javascript

Debugger for Chrome

A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

TODO Highlight v2

Highlight TODO, FIXME: and any other annotations you wish within your code in VSCode. This extension helps you to stay productive and stay organized.

If I missed something, or you want to show me something else, feel free to write a comment.
Happy coding!

Discussion (0)