VSCode Essentials (Extension Pack)

VSCode Masterclass (Coming Soon)

Follow on Twitter and subscribe at DevCast to get priority access.

Introduction

VSCode Essentials is a collection of many individual extensions that includes all of the functionality needed to turn VSCode into a ⚡ supercharged ⚡ integrated development environment (IDE).

This extension pack is language-agnostic, and does not include functionality for specific programming languages or frameworks. Instead, this extension's objective is to remain relatively lean while delivering powerful features that all developers can benefit from.

Features

• Enhanced comment highlights, styling, and wrapping
• Todo manager
• Snippet manager and generator
• Run code
• Spell check
• Real-time collaboration with edits, calls, chats, and comments
• Formatting of multiple files
• Advanced git tooling
• Multiple clipboards (clipboard ring)
• Code screenshots
• Project manager
• Detection of non-printing characters
• Smart backspacing (delete indentation/whitespace)
• Cursor navigation with the ability to go to any character with a few keystrokes
• Macros for executing multiple commands with a single keyboard shortcut
• Extended multi-cursor functionality (incrementing, inserting numeric sequences, etc.)
• Hack VSCode's stylesheets for UI elements that aren't yet included in the settings or official theme API
• Semantic indent and scope guides
• Automatic and manually added (tagged commits) local edit history
• Bookmarks for marking lines of code and quickly jumping back to them
• Giving workspaces unique colors to help identify the editor when working with multiple instances, using Live Share, or taking advantage of remote development
• Add syntax highlighting to log files and to VSCode's output/debug panels
• Toggle the display of hidden files in the explorer
• GitHub Gist management with interactive playgrounds, code snippets, and notes
• Synchronize edits you make in a Search Editor back to source files.

Recommended Settings

All Autocomplete

{
  // // TODO: Add files that you want to be included in IntelliSense at all times.
  // // Enable to get autocomplete for the entire project (as opposed to just open files). It's a
  // // good idea to read the All Autocomplete extension's documentation to understand the performance
  // // impact of specific settings.
  // "AllAutocomplete.wordListFiles": ["/src/"],
}

CodeStream

{
  "codestream.autoSignIn": false,
}

Customize UI

{
  "customizeUI.stylesheet": {
    // NOTE: Only hide icons if you're already familiar with their functionality and shortcuts
    // Hides specific editor action icons
    ".editor-actions a[title^=\"Toggle File Blame Annotations\"]": "display: none !important;",
    ".editor-actions a[title^=\"Open Changes\"]": "display: none !important;",
    ".editor-actions a[title^=\"More Actions...\"]": "display: none !important;",
    ".editor-actions a[title^=\"Split Editor Right (⌘\\\\)\"]": "display: none !important;",
    ".editor-actions a[title^=\"Run Code (⌃⌥N)\"]": "display: none !important;",

    // Adds a border below the sidebar title.
    // TODO: Update `19252B` in the setting below with the hex color of your choice.
    ".sidebar .composite.title": "border-bottom: 1px solid #19252B;",

    // Leaves only the bottom border on matching bracket border.
    ".monaco-editor .bracket-match": "border-top: none; border-right: none; border-left: none;",

    // Changes color of the circle that appears in a dirty file's editor tab.
    // TODO: Update `00bcd480` in the setting below with the hex color of your choice.
    ".monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.dirty>.tab-close .action-label:not(:hover):before, .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty>.tab-close .action-label:not(:hover):before": "color: #00bcd480;",
  },
}

GitLens

{
  // Toggle from command palette as needed.
  "gitlens.codeLens.enabled": false,
  "gitlens.currentLine.enabled": false,

  // Keep source control tools in same view.
  "gitlens.views.compare.location": "scm",
  "gitlens.views.fileHistory.location": "scm",
  "gitlens.views.lineHistory.location": "scm",
  "gitlens.views.repositories.location": "scm",
  "gitlens.views.search.location": "scm",
}

Macros

{
  // TODO: Add your own macros. Below are some examples to get you started. Execute these commands with the command palette, or assign them to keyboard shortcuts.
  // NOTE: Use in combination with the Settings Cycler settings listed further down this page.
  "macros.list": {
    // Toggle zoom setting and panel position when moving from laptop to external monitor and vice versa.
    "toggleDesktop": [
      "workbench.action.togglePanelPosition",
      "settings.cycle.desktopZoom",
    ],
    // Copy line and paste it below, comment out the original line, and move cursor down to the pasted line. Great for debugging/experimenting with code while keeping the original intact.
    "commentDown": [
      "editor.action.copyLinesDownAction",
      "cursorUp",
      "editor.action.addCommentLine",
      "cursorDown"
    ],
  },
}

MetaGo

{
  // TODO: Update styling to fit your theme. The following works well with Material Theme.
  "metaGo.decoration.borderColor": "#253036",
  "metaGo.decoration.backgroundColor": "red, blue",
  "metaGo.decoration.backgroundOpacity": "1",
  "metaGo.decoration.color": "white",

  // TODO: Update font settings to fit your preference.
  "metaGo.decoration.fontFamily": "'Operator Mono SSm Lig', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
  "metaGo.decoration.fontWeight": "normal",

  "metaGo.jumper.timeout": 60,
}

Project Manager

{
  // TODO: Add the folders where you keep your code projects at.
  "projectManager.any.baseFolders": [
    "$home/Code",
  ],

  "projectManager.any.maxDepthRecursion": 1,
  "projectManager.sortList": "Recent",
  "projectManager.removeCurrentProjectFromList": false,
}

Rewrap

{
  "rewrap.autoWrap.enabled": true,
  "rewrap.reformat": true,
  "rewrap.wrappingColumn": 100,
}

Settings Cycler

{
  // Use in combination with the Macro settings listed further up this page.
  "settings.cycle": [
    {
      "id": "desktopZoom",
      "values": [
        {
          "window.zoomLevel": 1,
        },
        {
          "window.zoomLevel": 1.4,
        }
      ]
    }
  ],
}

Todo Tree

{
  "todo-tree.highlights.customHighlight": {
      "TODO": {
        "foreground": "#FFEB95",
      },
      "NOTE": {
        "foreground": "#FFEB95",
        "icon": "note",
      },
      "FIXME": {
        "foreground": "#FFEB95",
        "icon": "alert",
      },

      // Clearly mark comments that belong to disabled (commented-out) code.
      "// //": {
        "foreground": "#5d7783",
        "textDecoration": "line-through",
        "type": "text",
        "hideFromTree": true,
      },
  },

  "todo-tree.tree.grouped": true,
  "todo-tree.tree.hideIconsWhenGroupedByTag": true,
  "todo-tree.tree.labelFormat": "∙ ${after}",
  "todo-tree.tree.showCountsInTree": true,
  "todo-tree.tree.showInExplorer": false,
  "todo-tree.tree.showScanOpenFilesOrWorkspaceButton": true,
  "todo-tree.tree.tagsOnly": true,
  "todo-tree.highlights.highlightDelay": 0,
  "todo-tree.general.tags": [
    "TODO",
    "FIXME",
    "NOTE",
    "// //",
  ],

  // Allow for matches inside of VSCode files (e.g. `settings.json`).
  "todo-tree.highlights.schemes": [
    "file",
    "untitled",
    "vscode-userdata",
  ],

  // Allows for matches inside of JSDoc comments.
  "todo-tree.regex.regex": "((\\*|//|#|<!--|;|/\\*|^)\\s*($TAGS)|^\\s*- \\[ \\])",
}

Bug Reports

Bug reports should be filed at the repository belonging to the individual extension that is causing the issue (click on the extension's marketplace link below and then look for the repo link in the sidebar, under "Project Details").

Known Issues

Some extensions will prevent the Output Colorizer extension from adding syntax highlighting in the output/debug panels. This is a VSCode limitation waiting for a fix. The current workaround is to disable extensions (when not needed) that conflict with the Output Colorizer extension. Code Runner is one of the known, conflicting extensions (which itself is also included in this extension pack).

Included Extensions

Extension	Link
All Autocomplete
Bookmarks
Checkpoints
Code Runner
Code Spell Checker
CodeStream
Control Snippets
Customize UI
DotENV
Easy Snippet
Explorer Exclude
Format All
GistPad
Git Graph
GitHub Pull Requests
Gitignore
GitLens
Gremlins
Hungry Delete
IntelliCode
Live Share
Live Share Audio
Live Share Chat
Live Share Whiteboard
Local History
Macros
MetaGo
Monkey Patch
Multiple Clipboards
Output Colorizer
PDF
Peacock
Polacode
Project Manager
Rewrap
Search Editor: Apply Changes
Settings Cycler
Text Pastry
Todo Tree