Editor: VS Code
- [ ] Migrate my Atom theme
Misc links:
- Custom snippets: https://code.visualstudio.com/docs/customization/userdefinedsnippets
- HTML with Emmet: http://code.visualstudio.com/docs/languages/html#_emmet-snippets
Hotkeys
Sidebar
- Toggle side pane:
CMD+B
Explorer:
- Switch to file pane:
SHIFT+CMD+E
(How to remember? Same hotkey prefix for find:SHIFT+CMD+F
) - Open file in next pane: Hold
CMD
while click the file orCMD+ENTER
Search:
- Swith to the search pane:
SHIFT+CMD+F
(simialr to Explorer pane:SHIFT+CMD+E
) - Switch search history:
ALT+UP/DOWN
Path glob pattern:
Click on the toggle to the right to enable the glob pattern syntax: * to match one or more characters in a path segment ? to match on one character in a path segment ** to match any number of path segments, including none {} to group conditions (e.g. {**/*.html,**/*.txt} matches all HTML and text files) [] to declare a range of characters to match (e.g., example.[0-9] to match on example.0, example.1, …)
Navigation in Editor
- Switch editors p 1/2/3:
CMD+1/2
- in
CMD+P
Quick Open list, hit enter to open in current pane, hitCMD+\
to open in next pane. Move active editor to left/right group:
CTRL+CMD+LEFT/RIGHT
{ "key": "ctrl+cmd+right", "command": "workbench.action.moveEditorToNextGroup" }, { "key": "ctrl+cmd+left", "command": "workbench.action.moveEditorToPreviousGroup" }
- Switching files inside on editor:
SHIFT+ALT+TAB
Editing
- Show IntelliSense:
CTRL+SPACE
- Find by symbol (instead of find by text):
CMD+SHIFT+O
- When viewing JSON file, it'll find by the key.
- When viewing HTML, it'll find by class or id.
- File navigation:
- :punch: Show list of files in one editor or go back and forth between files:
CTRL+TAB
CTRL+-
to go back last file- to last position:
CMD+U
- :punch: Show list of files in one editor or go back and forth between files:
- Code reformatting:
CMD+K, CMD+F
- Code folding:
SHIFT+CMD+[ or ]
- Trim trailing whitespace:
CMD+SHIFT+X
Multi-cursor:
- In Insert mode, use
ALT/OPTION
+ click to add multiple cursor, then pressESC
to go to view mode. - In Normal mode, use
CMD+D
to select multiple instances, then pressESC
to go to view mode. - In Insert mode, select lines and use
SHIFT+CMD+L
to turn lines into selections. (Require custom keyboard setup, see eblow) - How to select all in file search result?
CMD+F
-> type search word ->ALT + ENTER
Terminal: "ctrl+`"
Custom Hotkeys
// Place your key bindings in this file to overwrite the defaults
[
// Maximize current editor
{
"key": "cmd+k cmd+m",
"command": "workbench.action.maximizeEditor",
"when": "editorTextFocus"
},
// Exit Maximize current editor
{
"key": "cmd+k cmd+n",
"command": "workbench.action.evenEditorWidths",
"when": "editorTextFocus"
},
// Similar to Sublime, convert selection into line selections
{
"key": "cmd+shift+l",
"command": "editor.action.insertCursorAtEndOfEachLineSelected",
"when": "editorTextFocus"
}
// quick switch window: CMD+R
{
"key": "cmd+r",
"command": "workbench.action.quickSwitchWindow"
},
{
"key": "cmd+r",
"command": "workbench.action.quickOpenNavigateNext",
"when": "inWindowsPicker"
}
]
Task
A task is shortcut to run external action (grunt, shell) without leaving your editor, such as build, test, etc.
To use, press CMD+P
and type: task TASK_NAME
.
Sample task:
{
"version": "0.1.0",
"tasks": [
{
"taskName": "ks",
"command": "killall",
"args": [
"-9",
"grunt"
],
"isShellCommand": true,
"suppressTaskName": true,
"showOutput": "never"
},
{
"taskName": "lint",
"command": "grunt",
"args": [
"lint"
],
"isShellCommand": true,
"suppressTaskName": true,
"showOutput": "silent"
}
]
}
Debug
- You can press
F5
to debug any single file. - Link to doc
Packages
- Path Intellisense
- TSLint
- Monokai theme
- VSCodeVim
- pretty JSON
Code Formatting Setup
https://medium.com/@hamxiaoz/visual-studio-code-formatting-setup-9f40a95699ce
User Settings
// Place your settings in this file to overwrite the default settings
{
// The number of spaces a tab is equal to.
"editor.tabSize": 2,
"editor.renderIndentGuides": true,
"files.trimTrailingWhitespace": true,
"files.autoSave": "off",
"editor.renderWhitespace": "boundary",
"editor.lineNumbers": "on",
// OPTIONAL
// Configure glob patterns for excluding files and folders in searches. Inherits all glob patterns from the files.exclude setting.
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/build": true
},
// Configure glob patterns for excluding files and folders.
"files.exclude": {
"**/*.js": {"when": "$(basename).ts"},
"**/*.js.map": true,
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"**/.meteor": true
},
"workbench.colorTheme": "Monokai Dimmed",
"workbench.iconTheme": "vs-seti",
// Controls if the minimap is shown
"editor.minimap.enabled": false,
"vim.disableAnnoyingNeovimMessage": true,
// markdown
"markdown.preview.breaks": true
}
Setup
How to add an "Open with VS Code" icon in Finder toolbar?
Go to my repo open-folder-with-vs-code and follow the instructions.