This article is a collection of everything needed to get started using Microsoft's Visual Studio Code (VSCode). This article also uses all Mac OSX shortcuts and is geared towards a front-end developer's setup.

Why use VSCode?

As a front-end developer, I have tried and used many different code editors, from Notepad++, TextWrangler, Dreamweaver, Sublime Text, Atom, Brackets, back to Sublime Text, PHPStorm, and finally to VSCode. I have been using VSCode as my primary code editor for the past six months and am enjoying how easy and intuitive it is to use.

VSCode is a free code editor that runs on all major platforms. In that regard, it makes things extremely easy to get started.

It doesn't matter which code editor you use, as long as you're proficient in it, and YOU enjoy using it. What works for everyone else might not work for you.

Commonly used shortcuts

Learning shortcuts on any new program takes a while, but it's worth it in the long run. They help save time while writing code. Here is a list of some of the basics that I find myself using over and over again.

Action	Shortcut
Duplicate Line	`opt` + `shift` + `up`/`down`
Move Line up/down	`opt` + `up`/`down`
Copy Line up/down	`cmd` + `opt` + `up`/`down`
Cut Line	`cmd` + `x`
Delete Line	`cmd + shift + k`
Show/Hide Sidebar	`cmd` + `b`
File Switcher	`cmd` + `p`
Shortcuts	`cmd` + `shift` + `p` then type `shortcuts`
Open Terminal	`ctrl` + `
Open / hide explorer	`cmd` + `shift` + `e`
Command Palette	`cmd` + `shift` + `p`
Toggle Emmet if not selected	`ctrl` + `spacebar`
Fold Code (Collapse)	`cmd` + `opt` + `[`/`]`
Comment Code	`cmd` + `/`
Format Code	`shift` + `option` + `f`
Select all instances of single word	`cmd` + `shift` + `l`
Add cursor	`cmd` + `d`
Find/Replace in Project	`cmd` + `shift` + `f`
Find multiple tags (regex)	`\|`
Add cursor to each search result	`option` + `enter`
Move cursor to front of word	`option` + `left`/`right`
Find / Replace	`cmd` + `option` + `f`
Go to last file you were in	`cmd` + `p` + `p`
Sidebar Focus	`cmd` + `0`
Code Editor Focus	`cmd` + `1`
Open File on sidebar	`cmd` + `down`
Rename/Refactor	`f2`
Extract code from function	`cmd` + `ctrl` + `.`
Launch Debugger	`f5`
Collapse all open folders	`cmd` + `shift` + `p`

Setting up Vue

in settings.json add the following to allow custom blocks with the Vetur extension:

"vetur.grammar.customBlocks": {
    "docs": "md",
    "i18n": "json",
    "page-query": "graphql",
    "static-query": "graphql"
  }

In command pallette cmd + shift + p

Type Vetur: Generate Grammar to apply settings.

Troubleshooting

A list of common issues I have come across along with the fixes for them.

Use Prettier through ESLint in Javascript and not Prettier plugin settings.

Themes

VSCode has countless themes to get you the perfect theme for writing code. I prefer dark themes, so this list comprises all dark themes that I have either used and enjoyed. If you have any light themes that you enjoy using, please contact me on Twitter @bryandugan and let me know!

Material Theme →

The Material Theme has quickly become extremely popular among popular code editors. Instead of only changing the color scheme, unlike all the other themes in this list, it takes over the full interface and changes icons and the entire application's look and feel to match Google's Material design spec. You may also use the Material theme along with any of the color schemes in this list.

SynthWave '84 →

A Synthwave inspired color theme that lets you live your digital dreams. I have recently switched over to this theme and am enjoying it.

Base16 Ocean Dark Extended Theme →

One of my favorite themes of all time ported over to VSCode.

Cobalt 2 →

A dark blue color theme created by Wes Bos.

Night Owl →

A nice looking dark theme for night owls created by Sarah Drasner.

Extensions

One of the things that make Visual Studio Code so powerful is its use of extensions. You can customize your editor to have as many extensions as you need. Below is a list of extensions that I have used at one time or another and that you may find useful. Don't feel obligated to install them all; just the ones you believe could enhance your workflow. It's easy to go overboard installing extensions while learning VSCode, but remember less is always more while learning. Don't let finding extensions get in the way of you doing your work.

Angular Language Service →

Gives VSCode a rich editing experience for Angular templates, both inline and external.

Auto Rename Tag →

Automatically rename paired HTML/XML tags.

Better Comments →

Improve your code commenting by annotating with alerts, informational, TODO's, and more! I mainly use this plugin to keep track of all my todos within my code.

Bookmarks →

Mark lines and be able to jump to them.

Bracket Pair Colorizer 2 →

Colorize matching brackets.

Code Spell Checker →

Catch common spelling errors in your source code.

Colorize →

Visualize CSS colors by highlighting it with a background color.

Debugger for Chrome →

Debug your JavaScript code in the Chrome Browser.

DotENV →

Support for dotenv file syntax.

ESLint →

Integrates ESLint JavaScript into VSCode.

Formatting Toggle →

Allows you to toggle the Prettier formatter on and off with a single click.

Git History →

View git log, file history, compare branches, or commits.

Headwind →

An opinionated auto formatter for Tailwind CSS classes to organize classes and remove duplicates.

Highlight Matching Tag →

Highlight the matching closing or opening tag in your HTML or JSX code.

HTML Snippets →

HTML Autocomplete snippets.

IntelliSense for CSS class names in HTML →

CSS class name completion for the HTML class attribute.

JavaScript (ES6) code snippets →

Code snippets for JavaScript ES6.

Live Server →

Launch a simple development local server for testing without the need for setting up a development server. I use Laravel Valet for my personal development but have found this plugin extremely useful.