VSCode Essentials installs statistics

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…