Bito

Try Bito with no installation
Logo-Bito
Hero Image - Top 15 extensions in VSCode for increasing your productivity

VSCode Extension Power-Ups: Top 16 for Developers

Share
Share on twitter
Share on facebook
Share on linkedin

Developers use Visual Studio Code (VSCode), which can be enhanced with extensions. This blog will cover the top 15 VSCode extensions for application development productivity. We will discuss installation, features, and workflow optimization with these extensions.

1. Bito AI - Powered by ChatGPT

Bito's AI helps developers dramatically accelerate their impact. It's a Swiss Army knife of capabilities that can 10x your developer productivity and save you an hour a day, using the same models as ChatGPT!

Bito AI makes it easy to write code, understand syntax, write test cases, explain code, comment on code, check security, and even explain high-level concepts. Trained on billions of lines of code and millions of documents, it's pretty incredible what it can help you do without having to search the web or waste time on tedious stuff.

image12

Installation: You can visit Bito.co, and directly install it in VS Code.

To Know More: Installing Bito Extensions

Features:

  • Shortcuts. With one click Bito Shortcuts runs security, performance, and style checks on every code snippet in your code editor. Understand code or write comments. Clean code, increase readability, and automatically handle exceptions. Bito automatically builds the optimal prompt for the best AI output, saving you time.
  • Additional pre-defined prompts to improve the quality and readability of the code.
  • Pre-defined prompts for various checks on your existing code.

2. Live Server

Live Server, a popular Visual Studio Code extension, lets developers start and stop servers and change the server root, default browser, and port number. Hotkey support, excluded file assistance, HTTPS, and proxy support are also included.

image7

Installation:

In VS Code, press ctrl+p and execute the command ext install ritwickdey.liveserver.

Features:

  • Hot Key control.
  • Customizable Port Number, Server Root, default browser.
  • Support for any browser (Eg: Firefox Nightly) using advance Command Line.

3. The REST

The REST Client addon lets developers simply send HTTP requests and analyse the result in VS Code. It supports proxy and SOAP requests, multiple requests in a file, adjustable fonts, and request history.

image3

Installation:

In VS Code, press ctrl+p and execute the command ext install humao.rest-client.

Features:

  • Send/Cancel/Rerun HTTP request in editor and view response in a separate pane with syntax highlight
  • Send GraphQL query and author GraphQL variables in editor
  • Send cURL command in editor and copy HTTP request as cURL command

4. Settings Sync

Settings Sync is a useful extension for synchronizing your VS Code settings across multiple devices. It includes features such as one-click upload and download, automatic updates, and support for GitHub Enterprise.

image6

Installation:

In VS Code, press ctrl+p and execute the command ext install Shan.code-settings-sync.

Features:

  • Use your GitHub account token and Gist.
  • Easy to Upload and Download on one click.
  • Show a summary page at the end with details about config and extensions effected.

5. Auto Close Tag

Auto Close Tag is a Visual Studio Code extension that automatically adds closing tags to HTML and XML elements as you type. This can save you time and effort when writing HTML and XML code.

image11

Installation:

Open Visual Studio Code and press Ctrl + Shift + X or Cmd + Shift + X to open the Extensions pane and search for "Auto Close Tag" in the Extensions pane.

Features:

  • As you type an opening HTML or XML tag, Auto Close Tag will automatically add the corresponding closing tag.
  • Auto Close Tag allows you to configure and customize settings such as the characters that trigger the automatic closing of tags.
  • You can add closing tags to JSX elements, making it suitable for React and other similar libraries.

6. Peacock

Peacock allows you to customize the colors of different parts of VS Code to improve your workflow. It includes features such as integration with Live Share and VS Code Remote, user-defined colors, and contrast adjustments.

image16

Installation:

The Peacock extension is useful for changing the color of your workspace when you have multiple code editor windows active at once. It’s useful to distinguish among the various code editor windows and projects. The Peacock extension has more than 1.7 million downloads.

Features:

  • Integrate with Live Share and VS Code Remote.
  • Create user-defined colors.
  • Customize different partsof VS Code with different colors.

7. Prettier

Prettier is a code formatter that helps you write consistent code by automatically formatting your scripts. It supports multiple languages such as JavaScript, TypeScript, JSON, CSS and more.

Installation:

In VS Code, press ctrl+p and execute the command ext install esbenp.prettier-vscode.

Features:

  • Support for JavaScript, TypeScript, JSON, CSS, and more.
  • Code formatting with keyboard shortcuts.
  • Automatic formatting of your scripts so you can read them easily.

8. Stylelint

Stylelint is a linter for CSS that helps you write consistent and maintainable code by providing more than 170 built-in rules for modern CSS features. It also supports personalized rule creation through plugins and automatic repair of bugs in the code.

image1

Installation:

In VS Code, press ctrl+p and execute the command ext install stylelint.vscode-stylelint.

Features:

  • More than 170 built-in rules for modern CSS features.
  • Plugin support for personalized rule creation.
  • Automatic repair of bugs in the code once it recognizes any patterns.

Subscribe to our newsletter.

newsletter-img

9. Import Cost

Import Cost helps you keep track of the package sizes of the modules you import in your JavaScript and TypeScript files. It supports multiple types of imports such as default, entire content, selective and more.

image14

Installation:

In VS Code, press ctrl+p and execute the command ext install wix.vscode-import-cost.

Features:

  • Default importing: import Func from 'utils';
  • Entire content importing: import * as Utils from 'utils';
  • Selective importing: import {Func} from 'utils';

10. SonarLint

SonarLint is an extension that helps you detect and fix quality issues in your code. It supports multiple languages such as C++, C, Java, HTML, PHP, JavaScript, TypeScript, Python and more. It can also connect to SonarQube and SonerCloud for PL/SQL analysis.

image10

Installation:

In VS Code, press ctrl+p and execute the command ext install SonarSource.sonarlint-vscode.

Features:

  • Supports C++, C, Java, HTML, PHP, JavaScript, TypeScript, Python, and more.
  • Can connect to SonarQube and SonerCloud.
  • Supports PL/SQL analysis once connected with SonarQube.

11. ESLint

ESLint is an extension that integrates ESLint into VSCode, providing on-the-fly linting for JavaScript and TypeScript. This extension allows you to catch errors and potential issues early on and fix them with ease.

image13

Installation:

Open VSCode and press Ctrl+P, type ext install eslint then press Enter.

Features:

  • Automatically check your code for potential errors and issues, which can save you time and effort.
  • Customize and configure specific rules to suit your needs, which allows for more flexibility and control over your code.
  • Large number of available plugins that can be added to extend its functionality, which makes it a powerful tool for linting your code.

12. GitLens

GitLens simplifies file revision navigation. Each line shows the author and commits of the latest change. GitLens' sidebar has commits, repositories, branches, stashes, and more. Integrations include GitHub, GitLab, Gitea, Gerrit, GoogleSource, Bitbucket, and Azure DevOps.

image9

Installation:

Visit VS Code Marketplace, search for the GitLens extension, and directly install it in your local VS Code application.

Features:

  • Provides easy navigation across a file’s revision history.
  • Displays the author and commits of the most recent modification at the end of each line.
  • Offers rich sidebar view with commits view, repositories view, branches view, stashes, and more.

13. Quokka

Quokka simplifies JavaScript and TypeScript code exploration, learning, and testing. It has CPU profiling, value explorer, live code coverage, and more. Quokka lets you run JavaScript code in VS Code, WebStorm, or Sublime to prevent context switching and use your preferred editor and plugins.

image4

Installation:

In VS Code, press ctrl+p and execute the command ext install WallabyJs.quokka-vscode.

Features:

  • You can easily explore, learn, and test JavaScript and TypeScript code.
  • CPU profiling, value explorer, live code coverage, and many more features.
  • Your JavaScript code runs in VS Code, WebStorm, or Sublime. This allows you to avoid context switching and take advantage of your accustomed editor environment and extensions.

14. Live Share

Developers can rapidly share code samples with team members via Live Share. Collaborative editing and debugging are supported. Live Share also locks files and folders.

image2

Installation:

In VS Code, press ctrl+p and execute the command ext install MS-vsliveshare.vsliveshare.

Features:

  • Developers can instantly exchange code samples with team members from the convenience of their preferred code editor.
  • Collaborative editing mode to let multiple developers edit a single file at once.
  • Collaborative debugging.

15. Project Manager

Project Manager saves workspaces or folders as projects. Tags can organise and identify deleted or renamed projects. Project Manager's sidebar detects Git, Mercurial, and SVN repositories.

image15

Installation:

In VS Code, press ctrl+p and execute the command ext install alefragnani.project-manager.

Features:

  • Save workspaces or folders as projects.
  • Create tags for your projects to organize them.
  • Identify deleted or renamed projects with ease.

16. Polacode

The Polacode plugin lets you capture your code and post it on social media or in documentation. The extension's dragging feature lets you resize the container or code snippet and change an image's appearance with commands like polacode.shadow, target, and backgroundColor.

image5

Installation:

In VS Code, press ctrl+p and execute the command ext install pnp.polacode.

Features:

  • Resize the container or code snippet using the extension’s dragging capability.
  • Modify how an image appears with a set of commands like polacode.shadow, polacode.target, polacode.backgroundColor.'

Conclusion:

In this blog, we discussed the top 15 extensions in VSCode that can help increase productivity while implementing applications. These extensions can help you automate tasks, improve communication, and streamline your workflow. I hope you found this information helpful and that you will try out some of these extensions to see how they can improve your workflow.

Related topics:
  • Co-founder and CTO of Bito
  • He leads technical strategy and engineering, and is our biggest user! Formerly, Anand was CTO of Eyeota, a data company acquired by Dun & Bradstreet. He is co-founder of PubMatic, where he led the building of an ad exchange system that handles over 1 Trillion bids per day.
Follow author
Twitter Linkedin-in

Recent articles

Stay up to date with everything that’s happening in the world of Artifical Intelligence.

Get started with BITO
newsletter-02

Leave a Reply

Your email address will not be published. Required fields are marked *

Related articles

44
Artificial Intelligence
Anand Das

The role of ethics in AI-assisted software development

Hold on to your hats, because technology is evolving faster than ever before! It’s no secret that artificial intelligence (AI) is already a major player in the software development game.

Anand Das February 9, 2023

Share this: