Chop-Chop Logo
Blog

Visual Studio Code tips – extensions you need to install

Visual Studio Code is a free and lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS, and Linux. It comes with support for several languages such as JavaScript, TypeScript, and Node.js however the built-in features that Visual Studio Code includes are just the start. 

Great community support and a rich ecosystem of extensions let you add languages and runtimes (such as C++, C#, Java, Python, PHP, Go, and .NET), debuggers, themes, and tools to your installation to support and personalize your development workflow. VS Code’s rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code. Thanks to a built-in search engine you can find and install any plugin in seconds!

There are about 45k (March 2023) extensions available on the marketplace so you can find extensions for almost everything. As chop-chop.org developers, we recommend 22 verified extensions useful in our daily work.

GitHub Copilot (~4.2M installs as of March 2023)

GitHub Copilot was a game changer for many developers. This extension provides autocomplete-style suggestions from an AI pair programmer as you code. You can receive suggestions from GitHub Copilot either by starting to write the code you want to use or by writing a natural language comment describing what you want the code to do. It is as good at writing natural language as it is at writing code, so in fact, it can complete your comments for you.

Research has found GitHub Copilot helps developers code faster, focus on solving bigger problems, stay in the flow longer, and feel more fulfilled with their work.

  • 74% of developers are able to focus on more satisfying work,
  • 88% feel more productive,
  • 96% of developers are faster with repetitive tasks.

IntelliCode (~27.6M)

This VS Code extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

IntelliCode API Usage Examples is a feature that lets you see real-world examples of how other developers have used a given function. The shown examples are from public open-source repositories on GitHub.

Tabnine (~5.1M)

Another AI-powered extension that autocompletes for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more, is an AI code assistant that makes you a better developer. Tabnine will increase your development velocity with real-time code completions in all the most popular coding languages.

Tabnine is powered by multiple language-specialized machine-learning models that were pre-trained from the ground up on code. All of Tabnine’s AI models are trained on open-source code with permissive licenses. Tabnine’s AI completions can be run on a developer’s laptop, server, or in the cloud.

Code Spell Checker (~6.5M)

Have you ever had a problem with typos? Code Spell Checker is a solution, the basic spell checker that works well with code and documents. The goal of this spell checker is to help catch common spelling errors while keeping a low number of false positives. It gives a list of suggestions for each word and also works with camelCase and ALL CAPS words. You can exclude part of text from checks, as well as add exceptions or your own words list which allows you to add words that will be considered correct and will be used as suggestions.

Path Intellisense (~9.4M)

Visual Studio Code plugin that auto-completes paths and filenames. This extension can save you a lot of time. Filenames and paths are often too complicated to type from memory, and also it’s better than copying and pasting.

Prettier – Code formatter (~30.2M)

Prettier – Code formatter is an opinionated code formatter. It enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary. There are multiple options for configuring Prettier with this extension. Using this tool you don’t have to care about formatting and can let the plugin do this work.

Todo Tree (~2.8M)

Todo Tree extension quickly searches your workspace for comment tags like TODO, FIXME, etc., and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar anywhere else you would prefer it to be. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO. Found TODOs can also be highlighted in open files. This extension provides many customization options such as custom tags, filtering, highlighting colors, and many more. With this extension, you will never forget about important things to do or to fix features that you marked.

Bookmarks (~2.7M)

This extension helps you to navigate your code, moving between important positions easily and quickly. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. Here are some of the features that Bookmarks provides:

  • mark/unmark positions in your code and give it a name,
  • jump forward and backward between bookmarks,
  • icons in a gutter and an overview ruler,
  • see a list of all bookmarks in one file and project,
  • select lines and regions with bookmarks,
  • a dedicated sidebar.

I have never used bookmarks before, but I’ll definitely try it out.

VSCode Icons (~13.6M)

Having special icons for specialized files and folders makes exploring and working on a project much easier. VSCode Icons extension lets you use unique icons for each file. The extension gives you the ability to change how the icons look or even what icons are associated with each file extension. You can use predefined or your own sets of icons. It provides a project auto-detection feature that will detect the framework and enable the corresponding set of icons for you.

Reload (~194k)

Reload extension will add a reload button to the status bar at the right-bottom of your VSCode editor. This is a simple extension, for quickly reloading your window, when you have a problem or you want the editor to take effect. With this extension, you don’t have to manually close and then reopen VS Code to get working when it glitches out. Users say it’s “the most useful extension you never knew you wanted”.

Indent Rainbow (~4.8M)

Indentation is a really important thing that makes your code clear and readable. Indent Rainbow extension colorizes the indentation in front of your text, alternating four different colors on each step. People find it helpful in writing code for Python, Nim, Yaml, HTML, and even file types that are not indentation dependent. In addition, it visibly marks lines where the indentation is not a multiple of the tab size. The visualization can help to find problems with indentation in some situations. By changing various colors on each step, this extension makes the multi-step indentation easier to read

Auto Close Tag (~9.5M)

Auto Close Tag automatically adds HTML/XML close tag. However from version 1.16 VS Code has built-in close tag support for HTML, Handlebars, and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX, and so on. It is configurable and:

  • automatically add a closing tag when you type in the closing bracket of the opening tag,
  • after a closing tag is inserted, the cursor is between the opening and closing tags,
  • set a tag list that would not be auto-closed,
  • automatically close a self-closing tag.

Highlight Matching Tag (~1.6M)

This extension highlights matching opening and/or closing tags. It also optionally shows a path to tag in the status bar. Even though VSCode has some basic tag matching, this extension will try to match tags anywhere: from tag attributes, inside of strings, and any files, while also providing extensive styling options to customize how tags are highlighted. If you sometimes have trouble finding the closing tag in the editor, this extension is for you.

Color Highlight (~5.1M)

Color Highlight is a small extension that styles CSS/web colors found in your document so you can see the right color on the color code. I find this extension very useful when you work with CSS.

GitLens (~21.5M)

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and more. GitLens simply helps you better understand code and quickly glimpse into whom, why, and when a line or code block was changed. You can jump back through history to gain further insights as to how and why the code evolved. 

If you work with Git daily it is the must-have extension that provides some cool utilities to get info from Git very simply and sometimes without a click.

Docker (~22.1M)

This extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container. With this extension, you can e.g.:

  • get IntelliSense when editing your Dockerfile and docker-compose.yml files, with completions and syntax help for common commands,
  • generate Docker files,
  • let your Docker Explorer examine and manage Docker assets: containers, images, volumes, networks, and container registries,
  • use many of the most common Docker commands which are built right into the Command Palette,
  • let you define and run multi-container applications with Docker,
  • debug services built using Node.js, Python, or .NET (C#) that are running inside a container.

As the users say: “makes it easy to manage docker things without having to memorize and type out all of the commands”.

PHP Intelephence (~8.2M)

PHP Intelephence is a high-performance PHP language server packed full of essential features for productive PHP development. It provides among others:

  • fast camel/underscore case code completion (IntelliSense),
  • detailed signature (parameter) help for document, workspace, and built-in constructors, methods, and functions,
  • lossless PSR-12 compatible document/range formatting; formats combined HTML/PHP/JS/CSS files too,
  • embedded HTML/JS/CSS code intelligence,
  • detailed hover with links to official PHP documentation,
  • get a smart highlight of references and keywords.

RapidAPI Client (~163k)

RapidAPI Client is a full-featured HTTP client that lets you test and describe the APIs you build or consume. This extension makes composing requests, inspecting server responses, generating client code for API calls, and typesafe objects for application development simple and intuitive. It’s a great alternative for Postman, Rest Client, and other HTTP clients.

The RapidAPI Client for VS Code brings API testing to the code editor, so you can test APIs no matter where you are in the development cycle. You can compose requests, inspect server responses, generate client code, and export API definitions from the IDE interface without switching contexts to another application.

WordPress Snippets (~350k)

This extension helps me a lot when I am working with wordpress themes. It provides a collection of snippets for every WordPress function, class, constant, and also easy auto-completion with type hints and tab stops in all the right places, and Emmet-style abbreviations for all functions. WordPress Release 6.1 contains 3,688 functions, 505 classes, and 621 constants. It’s also possible to find snippets plugins for most languages, frameworks, or libraries.

Import Cost (~2.5M)

Import Cost is an extension that shows you the size of an imported 3rd party library when you import it (or several moments thereafter). This extension isn’t intended as a bundle analysis tool but it helps you find obvious pain points and prevent shipping massive bundles to your customers. 

The entire line of code of the import/require candidate is taken into consideration in order to leverage webpack’s tree-shaking mechanism. The final size of the bundle is affected by what you actually import and not the size of the whole library itself.

Copy With Imports (~6k)

When copying and pasting code between files, the Copy With Imports extension attempts to add new imports to the file you are pasting into. It will save you a lot of time especially in React and similar projects – you can just copy TypeScript code from one file to another, and the imports appear in the new file.

Turbo Console Log (~748k)

Turbo Console Log makes debugging much easier by automating the operation of writing meaningful log messages. The log message is inserted in the next line relative to the selected variable, it also supports multiple cursors. It allows you to comment/uncomment/delete all log messages, inserted by the extension, from the current document.

Summary

Having the right tools can help you get more done while doing less and help you automate the boring stuff. VS Code extensions are significant for your development. They help you speed up and automate your tasks, so you can work more efficiently.

Extensions mentioned above are only our developers’ choice from the thousands available, so you can get many others that you find useful. If you think another extension might be useful or you have your favorite one, don’t hesitate to share it with us in the comments!