Visual Studio Code



Keyboard Shortcuts



# Keyboard shortcuts
# File > Preferences > Keyboard Shortcuts
ctrl-shift-p    # open Command Palette
#or
F1

ctrl-/          # toggle comment on a line / a block of code

home key        # go to the beginning of line
end key         # go to the end of line

ctrl-home       # go to the the beginning of file
ctrl-end        # go to the end of file


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Settings



# File > Preferences > Settings
# Search for:
editor font size         # change font size (default = 14)
autoSave                 # auto save (default = off)
tab size                 # default = 4
warp                     # word wrap (default = off)
terminal font            # terminal font size (default = 14)


# Color Theme
Setting icon > Color Themes
# or
ctrl-shift-p > themes

Monokai                  # looks like sublime text
Dark+                    # default


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Integrated Terminal



# Integrated terminal
View > Terminal          # open terminal
ctrl-~                   # toggle display
Settings > search
terminal integrated shell Windows   # powershell or bit bash


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Emmet



# For HTML
# tab is the hotkey by default

!-tab                   # create a HTML boiler plate
h1-tab                  # craete a tag
h1.test-tab             # crete a class
h1#test-tab             # create a id
#test-tab               # create a div with an id
.test-tab               # create a div with a class
li*4-tab                # create 4 li tabs

lorem-tab # lorem ipsum


• To add other languages to use emmet
◇ File > Preferences > Settings: Include Languages

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Intellisense



• Needs to install extension for python, php

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Handy function



right click > select goto function definition
right click > peek definition (open pop up)
right click > change all occurences

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Extensions



• Once you install an extension, click “reload” to effect the change

# General Purpose
Bracket Pair Colorizer      # for colorizing matching brackets
Live Server                 # Launch a development local Server with live reload feature
                            # To launch it, click "Go Live" link at the bottom of the page
                            # or
                            # Right click > Open with Live Server
open in browser             # open current file in default browser (no auto load)
vscode-icons                # Icons for Visual Studio Code
vscode-faker                # Generate fake data for name, address, lorem ipsum, commerce 
                            # and much more



# Language Specific
JavaScript (ES6) code snippets
PHP IntelliSense            # Advanced Autocompletion and Refactoring support for PHP
Angular v7 Snippets         # by John Papa
React-Native/React/Redux snippets for es6/es7
Vue 2 Snippets
Python                      # Linting, Debugging (multi-threaded, remote), Intellisense, 
                            # code formatting, refactoring, unit tests, snippets, and more


• Other extensions
◇ beautify

Index