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 or CMD+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, hit CMD+\ 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
• 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 press ESC to go to view mode.
• In Normal mode, use CMD+D to select multiple instances, then press ESC 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.