DEV Community

loading...
Cover image for VS Code Extensions and Shortcuts

VS Code Extensions and Shortcuts

maasak profile image Maasa Kono ・2 min read

Visual Studio Code comes with a bunch of built-in tools that make coding life much easier, as well as a whole array of extensions that you can install according to your needs.

Extensions

VS Code seems to have a solution to just about every coding challenge, but here are the ones I use:

Live Server

Alt Text

Use Live Server to get live reloads in the browser of your local development server! This is great for not having to constantly hit the refresh button to view any changes made to your project. As soon as you save changes, the browser will be updated automatically.

Bracket Pair Colorizer

Alt Text

Do you lose track of where your closing brackets are? Bracket Pair Colorizer will show you where it is by connecting a line from the bracket where your cursor is on to the end point.

Prettier

Alt Text

Prettier is a nice code formatter you can use to keep your code looking consistent and, well, pretty! This is particularly handy for languages like JavaScript, where you need to add the ending semi-colon. Prettier takes that ask off of our hands.

VSCode Ruby

Alt Text

If you're learning to code in Ruby, VSCode Ruby provides elegant syntax highlighting as well as snippets.

JS JSX Snippets

Alt Text

This extension is fantastic when working in React. JS JSX Snippets will save you a ton of time by giving you keyboard shortcuts to create a skeletal React component, whether it's a class component or functional component.

EJS Language Support

Alt Text

I've only just started using a bit of EJS for some Node projects, but EJS Language Support is tremendously helpful to get better syntax highlighting, making your code more readable.

Keyboard Shortcuts

Aside from the general keyboard shortcuts like ctrl + s for saving a document, here are some VS Code keyboard shortcuts that I have come to use regularly:

  • toggle word wrap:
    alt + z

  • duplicate a line of code:
    shift + alt + up/down

  • move a line of code up or down:
    alt + up/down

  • duplicate cursor:
    hold shift + click

  • toggle commenting a line of code:
    ctrl + /

Here is a complete list of VS Code keyboard shortcuts.

Happy Coding!

Discussion (0)

pic
Editor guide