VSCode Essentials

VSCode Essentials

Bryan Dugan7 min read

This article is a collection of everything you need 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?

Over the years 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 6 months and have really been 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 + /
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

Additional Resources

If you want to be able to launch VSCode from command line using code you can set it up here. https://code.visualstudio.com/docs/setup/mac

Troubleshooting

This is 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 personally prefer using dark themes, so this list is made up of all dark themes that I have either used and enjoyed. If you find any light themes that you enjoy, please get in touch and let me know!

Material Theme

One of the most popular themes based off of Google's Material Design.

Mattia Astorino

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Night Owl

An extremely nice looking dark theme for night owls.

sarah.drasner

https://marketplace.visualstudio.com/items?itemName=sdras.night-owl

SynthWave '84

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

Robb Owen

https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

Base16 Ocean Dark Extended Theme

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

Kleber Silva

https://marketplace.visualstudio.com/items?itemName=kleber-swf.ocean-dark-extended


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 installed and use on a regular basis.

Angular Language Service

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

Angular

https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Auto Rename Tag

Automatically rename paired HTML/XML tags.

Jun Han

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Better Comments

Improve your code commenting by annotating with alert, informational, TODO's and more! I mainly use this plugin to keep track of all my todos within my code for things I took note of and need to refer back to.

Aaron Bond

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Bookmarks

Mark lines and be able to jump to them.

Alessandro Fragnani

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

Bracket Pair Colorizer 2

Colorize matching brackets

CoenraadS

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Code Spell Checker

Catch common spelling errors in your source code.

Street Side Software

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Colorize

Visualize css colors by highlighting it with a background color.

kamikillerto

https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

Debugger for Chrome

Debug your JavaScript code in the Chrome Browser

Microsoft

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

DotENV

Support for dotenv file syntax.

mikestead

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

ESLint

Integrates ESLint JavaScript into VSCode

Dirk Bauemer

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Formatting Toggle

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

tombonnike

https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle

Git History

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

Don Jayamanne

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Highlight Matching Tag

Highlights the matching closing or opening tag.

vincaslt

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

HTML Snippets

HTML Autocomplete snippets

Mohamed Abusaid

https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

Import Costs

Display import/require package size in the editor.

Wix

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

IntelliSense for CSS class names in HTML

CSS class name completion for the HTML class attribute.

Zignd

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

JavaScript (ES6) code snippets

Code snippets for JavaScript ES6

charalampos karypidis

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Live Server

Launch a basic development local server for testing without the need of setting up your own development server. I personally use Laravel Valet for my personal development, but have found this plugin to be extremely useful.

Ritwick Dey

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

MagicPython

Syntax Highlighting for Python

MagickStack Inc.

https://marketplace.visualstudio.com/items?itemName=magicstack.MagicPython

Markdown All in One

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

Yu Zhang

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

Material Icon Theme

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

Philip Kief

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

NPM Intellisense

Autocomplete npm modules in import statements.

Christian Kohler

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Path Intellisense

Autocompletes filenames.

Christian Kohler

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

PHP Debug

Debug support for PHP with XDebug.

Felix Becker

https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

Prettier - Code formatter

Esben Peterson

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Settings Sync

Export your settings to a Github Gist to easily be able to work off other machines.

Shan Khan

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

TODO Highlight

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

Wayou Liu

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

Toggle Quotes

Toggle quotes from double quotes to single quotes.

BriteSnow

https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes

Twig Languag

Twig Language Support

mblode

https://marketplace.visualstudio.com/items?itemName=mblode.twig-language

Vetur

Vue tooling for VSCode

Pine Wu

https://marketplace.visualstudio.com/items?itemName=octref.vetur

Visual Studio IntelliCode

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

Microsoft

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

Vue VSCode Snippets

Code snippets for Vue projects.

sarah.drasner

https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

Wrap Console Log Simple

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

WoodHead

https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple

YAML

YAML Language support.

Red Hat

https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

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 service through these links, you will help support me to keep creating awesome ad-free content.