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!
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.
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.
A dark blue color theme created by Wes Bos.
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.
Gives VSCode a rich editing experience for Angular templates, both inline and external.
Automatically rename paired HTML/XML tags.
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.
Mark lines and be able to jump to them.
Colorize matching brackets.
Catch common spelling errors in your source code.
Visualize CSS colors by highlighting it with a background color.
Debug your JavaScript code in the Chrome Browser.
Support for dotenv file syntax.
Integrates ESLint JavaScript into VSCode.
Allows you to toggle the Prettier formatter on and off with a single click.
View git log, file history, compare branches, or commits.
An opinionated auto formatter for Tailwind CSS classes to organize classes and remove duplicates.
Highlight the matching closing or opening tag in your HTML or JSX code.
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.
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.
Syntax Highlighting for Python.
All you need to write Markdown (keyboard shortcuts, table of contents, auto preview, and more.)
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.
Autocompletes filenames while typing out a path.
Debug support for PHP with XDebug.
Prettier is an opinionated code formatter that automatically cleans up and formats your code.
Export your settings to a Github Gist to have backups and quickly import the settings to work off other machines.
Intellisense for the CSS framework Tailwind CSS.
Highlight TODO's, FIXME's, and other keywords.
Toggle quotes from double quotes to single quotes.
Twig language support.
Vue tooling for VSCode.
AI-assisted development features for Python, TypeScript, JavaScript, and Java.
Code snippets for Vue projects.
Wrap to console.log or any other function name or word selection using alt + L
YAML language support.