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.
|Move Line up/down||
|Copy Line up/down||
|Open / hide explorer||
|Toggle Emmet if not selected||
|Fold Code (Collapse)||
|Select all instances of single word||
|Find/Replace in Project||
|Find multiple tags (regex)||
|Add cursor to each search result||
|Move cursor to front of word||
|Find / Replace||
|Go to last file you were in||
|Code Editor Focus||
|Open File on sidebar||
|Extract code from function||
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
This is a list of common issues I have come across along with the fixes for them.
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!
One of the most popular themes based off of Google's Material Design.
An extremely nice looking dark theme for night owls.
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.
Base16 Ocean Dark Extended Theme
One of my personal favorite themes of all time ported over to VSCode.
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.
Auto Rename Tag
Automatically rename paired HTML/XML tags.
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.
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.
Street Side Software
Visualize css colors by highlighting it with a background color.
Debugger for Chrome
Support for dotenv file syntax.
Allows you to toggle the Prettier formatter on and off with a single click.
View git log, file history, compare branches or commits.
Highlight Matching Tag
Highlights the matching closing or opening tag.
HTML Autocomplete snippets
Display import/require package size in the editor.
IntelliSense for CSS class names in HTML
CSS class name completion for the HTML class attribute.
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.
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.
Autocomplete npm modules in import statements.
Debug support for PHP with XDebug.
Prettier - Code formatter
Export your settings to a Github Gist to easily be able to work off other machines.
Highlight TODO's, FIXME's and other keywords.
Toggle quotes from double quotes to single quotes.
Twig Language Support
Vue tooling for VSCode
Visual Studio IntelliCode
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.