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