7 Promising VS Code Extensions for 2021

By the start of the course Full stack development in Python We’re sharing a selection of Visual Studio Code extensions, including an AI-powered JavaScript code documentation generator and a lightweight, simple REST API client. For details, we invite under cat.

Screenshot Stack Overflow (developer survey 2021)

The results of a recent developer survey on Stack Overflow only confirm the leadership of VS Code.

This popularity is largely due to the huge library of extensions that makes it easy to use third-party APIs. You can also create your own extensions and publish them to the VS Code extension store.

Many new VS Code extensions have been released in 2021 and are well received by developers. Let’s take a look at the ones that caught my attention. I hope this helps you become more productive.

1. GitHub Copilot

Let’s start with the popular AI created by GitHub and Codex OpenAI to generate code based on the context you provide.

Developers using VS Code or JetBrains will be delighted: Copilot offers entire blocks of code for most programming languages. Do you want more? You can literally communicate with Copilot from your IDE. Loading extensionlink your GitHub account, and log in (join the Copilot waitlist if you haven’t already).

You will have to wait until you get access: this is done manually.

We tested a number of prebuilt JavaScript and Swift code snippets on GitHub Copilot with decent results. Start writing a function, or just add a comment about what you want from the code, and you’ll get good code from Copilot:

Switch between suggested code options using Option + ] And Option + [or accept all code with the Tab key.

The possibilities of Copilot are truly endless. We were able to quickly create functions for checking palindrome strings, email, passwords, and more.

Write “current price of Bitcoin and Ethereum” and Copilot will generate the desired function in real time. But the most valuable thing is that Copilot copies the functionality of almost all VS Code extensions dedicated to ready-made code snippets.

2.Thunder client

API testing is an important part of the routine workflow. One of the main developer tools here is Postman, which is also used to validate API endpoints before integrating them into applications.

But when working with VS Code and testing APIs, there is often a context switch (more precisely, applications). Will help Thunder Client is a lightweight, clean and simple Rest API client extension tool.

It allows you to quickly test codebase API endpoints in the editor itself, minimizing tab switching. Scriptless tests make it a great alternative to lightweight Postman:

Screenshot thunderclient.io

3.Snipped

When sharing code snippets with each other on social networks, we usually copy and paste them into carbon.now.sh, and then export the screenshots. Snipped does all this automatically right in the VS Code editor, saving screenshots to the clipboard:

Extension link

4.Lorem.space

The following VS Code extension is ideal for prototyping a web application with mock content. Lorem.space – generator of random placeholder images of different categories.

By CMD + Shift + P, select from the drop-down list Lorem.space, category (pizza, hamburger, face or furniture), set the length and width – lorem.space will generate a placeholder image URL:

Extension link

5. AI Doc Writer for JavaScript and TypeScript

Developers usually have a different attitude towards writing documentation: some welcome it, others consider it overhead. AI Doc Writer is a new extension from Mintlify that makes writing documentation fun and exciting.

On a Mac, simply highlight the code and click Command + .to generate documentation for the function. We tested the AI Doc Writer on one of the functions created with GitHub Copilot, and the results are decent.

Look: when whitespace characters are selected for a function, completely different documentation is created:

Mintlify search engine is another VS Code extension. It allows you to find snippets by writing search queries in natural language, and even ask about the purpose of a particular part of the code. At the time of this writing, the extension is in closed beta.

For now, the extension has been withdrawn from the VS Code store.

6 Blockman

Do you want to highlight a part of the code to pay attention to some of its blocks or to study control flows? Blockman breaks the code into blocks, allowing you to change their colors and depth, switch focus and perform other settings. Check out how well Blockman works with indentation:

Extension link

7 Live Frame

live frame is another VS Code extension that minimizes context switching, allowing you to launch and view changes to web applications in the editor itself. Switching between VS Code and the browser is now a thing of the past. In addition, with Live Frame, you can record or show interactive guides with a demonstration: