VSCode Essentials

VSCode Essentials

Bryan Dugan5 min read

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.


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.


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.


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.

MagicPython →

Syntax Highlighting for Python.

Markdown All in One →

All you need to write Markdown (keyboard shortcuts, table of contents, auto preview, and more.)

Material Icon Theme →

If you're using the Material Theme, these Material icons are a must-have to modernize your VSCode interface.

NPM Intellisense →

Autocomplete npm modules in import statements.

Path Intellisense →

Autocompletes filenames while typing out a path.

PHP Debug →

Debug support for PHP with XDebug.

Prettier - Code formatter →

Prettier is an opinionated code formatter that automatically cleans up and formats your code.

Settings Sync →

Export your settings to a Github Gist to have backups and quickly import the settings to work off other machines.

Tailwind CSS Intellisense →

Intellisense for the CSS framework Tailwind CSS.

TODO Highlight →

Highlight TODO's, FIXME's, and other keywords.

Toggle Quotes →

Toggle quotes from double quotes to single quotes.

Twig Language 2 →

Twig language support.

Vetur →

Vue tooling for VSCode.

Visual Studio IntelliCode →

AI-assisted development features for Python, TypeScript, JavaScript, and Java.

Vue VSCode Snippets →

Code snippets for Vue projects.

Wrap Console Log Simple →

Wrap to console.log or any other function name or word selection using alt + L


YAML language support.

Additional Resources

Note: Any links leading you to products or services are most likely affiliate links that I will receive compensation from. I only promote products or services that I own/use myself and truly feel will deliver value to you. By purchasing products or services through these links, you will help support me in creating awesome ad-free content.