VS Code Extensions and Shortcuts
Tags: vscode, webdev, codenewbie
Published: 2021-01-11 02:26:56

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](https://dev-to-uploads.s3.amazonaws.com/i/6orji4kck76nl7rivsqg.png)

Use [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 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](https://dev-to-uploads.s3.amazonaws.com/i/7318sgpfh0108emca21n.png)

Do you lose track of where your closing brackets are?  [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.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](https://dev-to-uploads.s3.amazonaws.com/i/0n6dvqq2fi309wmmuek0.png)

[Prettier](![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/53u5vnl8ri1je372e4qd.png)) 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](https://dev-to-uploads.s3.amazonaws.com/i/gpdcgvub7lofu5laro4u.png)

If you're learning to code in Ruby, [VSCode Ruby](https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby) provides elegant syntax highlighting as well as snippets. 

## JS JSX Snippets

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4u6030r1jg305xu5juxg.png)

This extension is fantastic when working in React.  [JS JSX Snippets](https://marketplace.visualstudio.com/items?itemName=skyran.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](https://dev-to-uploads.s3.amazonaws.com/i/qw88w8moxq6nizxdfp96.png) 

I've only just started using a bit of EJS for some Node projects, but [EJS Language Support](https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-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](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf).

Happy Coding!