10 vscode plugins to increase productivity

5 min readFeb 19, 2022

There are so many incredible good plugins available for vscode. This article will cover super cool plugins such as such as “ErrorLens”, “Partial Diff” and “Shortcut menu”. These may significantly help you to be a more productive developer. 😁

Error Lens

If you just can cope with all the errors/squiggly lines in your code, then this is the plugin for improving on developement speed. Error Lens will automatically display all errors inline together with your code. It can be configured to do so while typing, or on saving.

There are a number of settings that’s relevant to get an optimal experience. Either edit in settings or use this in settings.json , below are some pretty agressive settings (as shown in the animation above).

{
     "errorLens.statusBarMessageTemplate": "$severity $message [$source]",
    "errorLens.messageTemplate": ":: $message ($source)",
    "errorLens.gutterIconsEnabled": true,
    "errorLens.delay": 0,
    "errorLens.onSave": false,
    "errorLens.enabledDiagnosticLevels": [
        "info",
        "hint",
        "error",
        "warning",
    ],
}

MarkDownLint

If you write Markdown it’s nice to have a Linter to help out, making sure the produced Markdown follow some good practices.

MarkDownlint is somewhat agressively configured per default, but it’s possible to disable warnings in settings.json .

{
    "markdownlint.run": "onSave",
    "markdownlint.config": {
        "MD004": false,
        "MD010": false,
        "MD012": false,   // Multiple blank lines
        "MD024": false,
        "MD025": false,
        "MD026": false,
        "MD045": false,
    },
}

Partial Diff

Partial Diff this is one of my favorites. It enables to diff by selecting source text and “compare text”.

The result is visualized by the vscode diff view:

Paste JSON as code

With the plugin Paste JSON as code it’s possible to take any JSON (that actually is JSON, with quotes and all) and paste it as a TypeScript (and many other languages). Install and to start it, use the command palette and choose the “Paste JSON as Code”.

The plugin tries to assess the data and make smart adjustments. Example:

[
    { "Name": "Apple", "Count": 1 },
    { "Name": "Banana", "Count": 54 },
    { "Name": "Orange", "Count": 19 }
]

will become:

export interface Fruit {
    Name:  string;
    Count: number;
}

Important: The data in the clipboard has to be conformant JSON. Use online tools such as https://jsonlint.com/ to verify.

As an example, this not conformant (note the trailing comma at the last line).

[
    { "Name": "Apple", "Count": 1 },
    { "Name": "Banana", "Count": 54 },
    { "Name": "Orange", "Count": 19 },
]

Ps. Another tip is to, in debugging, to copy the object you want to convert to the clipboard. It can be done by running copy(JSON.stringify(myVariable1))

JS/TS Import/Export sorter

The JS/TS Import/Export Sorter is yes another import sorter. This one is good becuase of the settings. It takes quite some time to activate after install, so please be patient (you might need to restart vscode).

These are some example settings that can be stored in settings.json .

{
"importSorter.generalConfiguration.exclude": [],
"importSorter.generalConfiguration.sortOnBeforeSave": true,
"importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.count": 500,
"importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.type": "maxLineLength",
"importSorter.importStringConfiguration.quoteMark": "double",
"importSorter.sortConfiguration.customOrderingRules.defaultNumberOfEmptyLinesAfterGroup": 1,
"importSorter.importStringConfiguration.numberOfEmptyLinesAfterAllImports": 2,
"importSorter.sortConfiguration.joinImportPaths": true,
"importSorter.sortConfiguration.removeUnusedImports": false,
}

React Preview

React Preview will show the result of your component while you type (Hot module reloading all of a sudden seems slow). This plugin is still in Preview with a set of bugs, but it has some serious potential. It can be good to know that most problems are resolved by restarting vscode (entirely, reloading the window doesn’t cut it).

Install it and there will appear a shortcut above your component. Click it and allow “React Preview” to scan your solution. Once it’s done, select the component you want to view.

As shown here, the feedback is instant — it will render the component as you type.

How to handle HOC components / Global css

If there are HOCs in the system that’s used by components (such as a Router), then create a folder in the project root named __reactpreview__ and store the file Wrapper.tsx inside it. It’s also a great place to include global css files.

Here’s example:

// Include global css
import "../src/app.css";import React from "react";
import { BrowserRouter } from "react-router-dom";export const Wrapper: React.FC = ({
    children,
}) => {
    return <>
        <BrowserRouter>
            {children}
        </BrowserRouter>
    </>;
};

If the plugin fails with error “error: No loader is configured for “.html” files: public/index.html” if there are a # somewhere in the parent path of the project.

Rest Client

Rest Client is a mini Postman right inside of VSCode. Install it, create a file named request.http and post. An alternative, more advanced, plugin is Thunder Client.

When copying this, make sure there’s a blank line between the headers and the payload.

PUT https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
content-type: application/json; charset=UTF-8{
  "id": 101,
  "title": "foo",
  "body": "bar",
  "userId": 1
}

Shortcut Menu Bar

The Shortcut Menu Bar is extremely useful. It adds buttons for common operations for the file that’s currently opened. One of the faviourites is “Compare with saved” (compares the unsaved version with the saved one) and “Open changes with previous version” (git).

settings.json may contain settings such as:

{
    "ShortcutMenuBar.compareWithSaved": true,
    "ShortcutMenuBar.commentLine": true,
    "ShortcutMenuBar.beautify": false,
    "ShortcutMenuBar.toggleWordWrap": false,
    "ShortcutMenuBar.outdentLines": false,
    "ShortcutMenuBar.toggleTerminal": false,
    "ShortcutMenuBar.navigateForward": false,
    "ShortcutMenuBar.navigateBack": false,
    "ShortcutMenuBar.openFilesList": false
}

LintLens

Since you’re obviosuly already using Eslint :), this plugin will help out with the .eslintrtc.json . LintLens will add descriptions to the rules and it’s very helpful :)

Open

Open does something as simple as enabling right click and “Open with default application”. It’s great if you have files such as Excel or other in your project.