Recommended VS Code Extensions

VS Code is powerful and well-designed IDE out-of-the-box, but where it really shines is its extreme customizability via extensions. The list bellow contains my favorite extensions, including a short description and relevant information about how I have configured the extension to inform whatever customizations suit your needs. If you are using VS Code for writing documents in LaTeX, then see LaTeX in VS Code for LaTeX-specific tips and extensions.

Disclaimer: Installing software from the internet is inherently risky. A malicious extension could destroy your data, steal your private information, and generally wreak havoc on your computer and any aspect of your life that you access through your computer. That being said, Microsoft has safeguards in place. I use each extension recommended on this page and have never observed anything to indicate that any of them are malicious. This may inform your decision of whether to trust these extensions, but ultimately, you are responsible for evaluating their trustworthiness before you install them. Microsoft describes these steps for determining extension reliability.

Extension List

Error Lens (usernamehw.errorlens)

Error Lens improves how the code editor displays diagnostics (errors, warnings, information, and hints). It supports displaying diagnostic messages in-line, so you do not need to open the Problems pane or hover over the problem to identify the problem. It also allows you to customize the display style (e.g., colors) for each type of diagnostic.

Configuration Details

My Error Lens settings, shown below, are chosen to improve the readability of diagnostic messages, with more severe diagnostics being displayed with brighter colors.

// In settings.json
// ╭────────────────────────────────────────╮
// │ ╭────────────────────────────────────╮ │
// │ │             Error Lens             │ │
// │ ╰────────────────────────────────────╯ │
// ╰────────────────────────────────────────╯
// ⋘──────── Configure in-line diagnostic text ────────⋙
// Choose the format of in-line diagnostic text.
"errorLens.messageTemplate": "$message ($source)",
"errorLens.alignMessage": {
    // Keep at least 4 characters separation between the code and the diagnostic message.
    "minimumMargin": 4, // characters
    //  Display diagnostic text right-aligned with the 100th character column, unless there is not enough space. 
    "end": 100,
},
// Delay updates to the diagnostic text to avoid flickering.
"errorLens.delay": 200,
// ⋘──────── Problems Decorations ────────⋙
// Use decorations to change the display style of diagnostics.
"errorLens.problemRangeDecorationEnabled": true,
"errorLens.messageBackgroundMode": "line",
"errorLens.decorations": {
    "errorMessage": {},
    "errorRange": {
        // Red, mid transparency.
        "backgroundColor": "#ff000070",
        // White
        "color": "#ffffff", // Text color
    },
    "warningMessage": {},
    "warningRange": {
        // Yellow-orange, high transparency.
        "backgroundColor": "#66660050",
    },
    "infoMessage": {},
    "infoRange": {
        // Blue, high transparency.
        "backgroundColor": "#0585",
    },
    "hintMessage": {
        // Turquoise
        "color": "#387", // Text color
    },
    "hintRange": {
        // Dark green, high transparency.
        "backgroundColor": "#0735",
    },
},
"errorLens.enabledDiagnosticLevels": [
    "error",
    "warning",
    "info",
    "hint"
],
// ⋘──────── Gutter Icons ────────⋙
"errorLens.gutterIconsEnabled": true,
"errorLens.gutterIconSet": "squareRounded",
// ⋘──────── ErrorLens Status Bar Info  ────────⋙
// Display the number of errors and warnings in the status bar at the bottom of the VS Code window. 
"errorLens.statusBarIconsEnabled": true,
"errorLens.statusBarColorsEnabled": true,
// Adjust the placement of the icons in the status bar.
"errorLens.statusBarIconsPriority": -10,
// Only display problems in the current file.
"errorLens.statusBarIconsTargetProblems": "activeEditor",

Code Spell Checker (streetsidesoftware.code-spell-checker)

The Code Spell Checker extension provides spell checking in the code editor for the names of variables, functions, etc., and code comments. Spell checking correctly handles common methods for concatenating words in code like camelCase and snake_case.

LTeX+ (ltex-plus.vscode-ltex-plus)

A syntax-aware grammar and spelling checker that is able to check markdown, LaTeX, and HTML documents, as well as comments in programming languages. Heavily customizable.

Configuration Details

My settings for LTeX+ are described in LaTeX in VS Code.

Dryer Lint (pwintz.dryer-lint)

Dryer Lint is a customizable linter for VS Code. It suppports user-defined lint rules that are specific to a given user and project. Rules are defined as regular expressions. I use Dryer Lint extensively to enforce my code style and to check for common mistakes I make while programming and writing. I find Dryer Lint extremely useful, but I am a bit biased since I wrote it :)

Better Comments Next (edwinhuish.better-comments-next)

The Better Comments Next extension allows customization of comment styling in the code editor based on the character(s) at the beginning of the comment. Useful for making comments more readable, such as highlighting to-do items. Better Comments Next is a fork of the Better Comments extension, which is no longer updated.

Configuration Details

// ╭────────────────────────────────────────────────────╮
// │  ╭──────────────────────────────────────────────╮  │
// │  │             Better Comments Next             │  │
// │  ╰──────────────────────────────────────────────╯  │
// ╰────────────────────────────────────────────────────╯
// Configurations for `edwinhuish.better-comments-next` extension (https://marketplace.visualstudio.com/items?itemName=EdwinHuiSH.better-comments-next).
// Disable "strict" mode so that comment tags are matched even if they don't have white space around them. 
"better-comments.strict": false,
"better-comments.tags": [
    {
        // !! Strong Alerts
        // It is important to put these after other items that start with "!" so that they take precedence. 
        "tag": "!!",
        "backgroundColor": "transparent",
        "bold": false,
        "color": "#F00",
        "italic": false,
        "strikethrough": false,
        "underline": false
    },
    {
        // ! Alerts 
        // It is important to put these after other items that start with "!" so that they take precedence. 
        "tag": "!",
        "backgroundColor": "transparent",
        "bold": false,
        "color": "#E60",
        "italic": false,
        "strikethrough": false,
        "underline": false
    },
    {
        // ? Questions
        "tag": "?",
        "backgroundColor": "transparent",
        "bold": false,
        "color": "#3498DB",
        "italic": false,
        "strikethrough": false,
        "underline": false
    },
    {
        // // Deleted content
        "backgroundColor": "transparent",
        "bold": false,
        "color": "#606060",
        "italic": false,
        "strikethrough": true,
        "tag": [
            "//",
            "%",
            "xxx"
        ],
        "underline": false
    },
    {
        // TODO items
        "tag": ["todo", "to-do"],
        "backgroundColor": "transparent",
        "bold": false,
        "color": "#FF8C00",
        "italic": false,
        "strikethrough": false,
        "underline": false
    },
    {
        // * Bullet points
        "tag": [
            "*",
            "-"
        ],
        "backgroundColor": "transparent",
        "bold": false,
        "color": "#98C379",
        "italic": false,
        "strikethrough": false,
        "underline": false
    },
    {
        // - Bullet points
        //  - Sub-bullet points
        // * Bullet points
        //  * Sub-bullet points
        "tag": [
            " *",
            "  *",
            " -",
            "  -",
        ],
        "backgroundColor": "transparent",
        "bold": false,
        "color": "#78A359",
        "italic": false,
        "strikethrough": false,
        "underline": false
    },
    {
        // # Section, subsection, and subsubsection headers
        // ╭──────────────────────────╮ 
        // │                          │
        // ╰──────────────────────────╯
        "tag": [
            "╭",
            "│",
            "╰",
            "⋘",
            "#"
        ],
        "backgroundColor": "transparent",
        "bold": true,
        "color": "#68C",
    },
    {
        // http Links
        "tag": [
            "http",
            "www."
        ],
        "backgroundColor": "transparent",
        "color": "#77a",
        "italic": true,
    },
],

TabOut (albert.TabOut)

The TabOut extension changes the editor behavior when the TAB key is pressed. By default inserting whitespace.

Configuration Details

"tabout.charactersToTabOutFrom": [
    {"open": "[",   "close": "]"},
    {"open": "{",   "close": "}"},
    {"open": "(",   "close": ")"},
    {"open": "$",   "close": "$"},// Latex inline equations
    {"open": "\\]", "close": "\\["},// Latex display equations.
    {"open": "'",   "close": "'"},
    {"open": "\"",  "close": "\""},
    {"open": "<",   "close": ">"},
    {"open": "`",   "close": "`"},
],

Paste Image (mushan.vscode-paste-image)

The Paste Image extension simplifies the process of adding images from your clipboard (such as screenshots) to documents, such as LaTeX or Markdown. When activated, the current clipboard contents (if an image) are saved to a file and code is inserted into the current document to display the image. The extension is rough around the edges, in places, but gets the job done better than any alternatives I’ve found.

Configuration Details

My settings for Paste Image (for LaTeX) are described in LaTeX in VS Code.

paste-indent (lesgrieve.paste-indent)

The paste-indent extension adjusts the way that pasted text is indented. The default behavior of VS Code often results in the first line of pasted text having a different indentation. This extension fixes that problem.

Configuration Details

None.

Tomorrow and Tomorrow Night Theme Kit (ms-vscode.Theme-TomorrowKit)

The Tomorrow and Tomorrow Night Theme Kit provides my favorite editor theme “Tomorrow Night Bright”, which has good contrast while remaining aesthetically pleasing.

Configuration Details

To set the color theme, open the command pallet (CTRL+SHIFT+P) and select Preferences: Color Theme. After the color is changed, you will the follow line in your settings.json file:

"workbench.colorTheme": "Tomorrow Night Bright",