Editor: VS Code

  • [ ] Migrate my Atom theme

Misc links:

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

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.

results matching ""

    No results matching ""