Extensions for Visual Studio Code and VS Codium

VS Code and VS Codium are popular code editor developed by Microsoft and MIT. They loved by developers worldwide for the performance and notably, extensibility. Here are some of the best extensions that can enhance the productivity significantly.

1. Prettier

Prettier is an opinionated code formatter that supports many languages. It helps you maintain a consistent code style across your project.

Prettier — Code Formatter Extension

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Key Features

• Consistent Code Style: Prettier ensures that all outputted code conforms to a consistent style.
• Language Support: It supports a variety of languages including JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, Handlebars, Ember, Glimmer, GraphQL, Markdown, and YAML.
• Integration with VS Code: Prettier integrates seamlessly, allowing you to format your code directly in your editor.

2. ESLint

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. It helps you write cleaner code and avoid potential errors.

ESLint Extension

ESLint is a powerful extension that integrates ESLint JavaScript into your editor. If you’re new to ESLint, it’s a tool that helps ensure the integrity of your code by both formatting it and analyzing it to make suggestions for improvement. It’s also configurable, which means you can customize how your code is evaluated.

Key Features

• Code Analysis: ESLint analyses your code and makes suggestions for improvement.
• Code Formatting: ESLint formats your code to ensure it adheres to a consistent style.
• Customizable Rules: You can customize the rules ESLint uses to evaluate your code.
• Integration with VS Code: ESLint integrates seamlessly with VS Code or VS Codium, allowing you to lint your code directly in your editor.

3. GitLens

GitLens supercharges the built-in Git capabilities of. It helps you visualize code authorship at a glance via Git blame annotations and code lens.

GitLens

GitLens is a powerful open-source extension. It supercharges your Git experience in, helping you maintain focus and minimize context switching.

Key Features

• Code Authorship: Visualize code authorship at a glance via Git blame annotations and CodeLens.
• Commit Graph: Easily visualize and keep track of all work in progress.
• Visual File History: Quickly identify the most impactful changes to a file and by whom.
• Interactive Rebase Editor: Harness the power of interactive rebase without stressing over syntax or order.
• Side Bar Views: A set of views for visualizing, exploring, and managing many aspects of a Git repository including Commits, File History, Branches, Remotes, Stashes, Tags, Contributors, and more.
• Rich Comparisons: Visualize comparisons between branches, tags, commits, and more.
• Commit Details: Quickly view information about the commit’s author, commit ID, links to associated issues and pull requests, changed files, and more.

4. Live Server

Live Server is a highly useful extension that allows developers to launch a local development server with a live reload feature for static and dynamic pages. This means that every time you save a file, the web page will automatically reload to reflect the changes.

Live Server — Extension

Key Features

• Live Reload: Automatically refreshes the web page in your browser whenever you save a file.
• Quick Development Server: You can start or stop the server with a single click from the status bar.
• Multi-root Workspace Support: Live Server loves your multi-root workspace.
• Hot Key Control: You can use hotkeys to start and stop the server.
• Customizable Settings: You can customize the port number, server root, default browser, and more.
• Support for Any Browser: You can use any browser, including Firefox Nightly, using advanced command line.
• Remote Connect through WLAN: You can connect with mobile devices.
• Support for Dynamic Pages: Live Server supports any file, even dynamic pages, through the Live Server Web Extension.

5. Docker

The Docker extension makes it easy to build, manage, and deploy containerized applications from.

Docker is a robust extension that makes it easy to build, manage, and deploy containerized applications. It provides an overview of Docker capabilities and integrates seamlessly with your VS Code environment.

Key Features

• Editing Docker Files: Docker extension provides IntelliSense when editing your Docker file and docker-compose.yml files, with completions and syntax help for common commands.
• Generating Docker Files: You can add Docker files to your workspace by using the Docker: Add Docker Files to Workspace command. The extension can scaffold Docker files for most popular development languages (C#, Node.js, Python, Ruby, Go, and Java) and customizes the generated Docker files accordingly.
• Docker Explorer: The Docker extension contributes a Docker Explorer view to VS Code or VS Codium. The Docker Explorer lets you examine and manage Docker assets: containers, images, volumes, networks, and container registries.
• Docker Commands: Many of the most common Docker commands are built right into the Command Palette. You can run Docker commands to manage images, networks, volumes, image registries, and Docker Compose.
• Docker Compose: Docker Compose lets you define and run multi-container applications with Docker. Our Compose Language Service in the Docker extension gives you IntelliSense and tab completions when authoring docker-compose.yml files.

6. Code Runner

Code Runner is a versatile extension that allows you to run code snippets or entire files in various programming languages directly within your editor. This eliminates the need to switch between the code editor and a separate terminal, saving you time and streamlining your workflow.

Code Runner Extension

Key Features

• Run Code Snippets or Files: Code Runner can execute code snippets or entire files.
• Support for Multiple Languages: It supports a wide range of languages including C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig, Mojo, and custom command.
• Custom Command: You can run custom commands.
• Stop Code Running: You can stop the running code.
• Output Window: View the output in the Output Window.
• Shebang and Filename Glob: Run code per Shebang or filename glob.

7. Debugger for Firefox

This extension allows you to debug your JavaScript code running in Firefox directly.

Debugger for Firefox — Extension

Debugger for Firefox extension that allows you to debug your JavaScript code running in Firefox directly from VS Code or VS Codium. This extension connects to Firefox over its Firefox Debugger Protocol, where it maps files loaded in the browser to the files open in VS Code or VS Codium.

Key Features

• Setting Breakpoints: You can set breakpoints directly in your source code.
• Stepping: You can step through your code, including using the buttons on the Firefox page.
• Locals Scope Variables: You can view locals scope variables via the VS Code or VS Codium Locals pane.
• Debugging Eval Scripts: You can debug eval scripts, script tags, and scripts that are added dynamically.
• Watches: You can set watches via the VS Code or VS Codium Watch panel.
• Debug Console: You can use the debug console.

8. Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours. It’s really helpful when dealing with nested code blocks.

Bracket Pair Colorizer Extension

Bracket Pair Colorizer is a popular extension that helps developers identify matching brackets with colors. This extension became very popular and now is one of the 10 most downloaded extensions on the VS Code an VS Codium Marketplace, with over 6 million installs.

Key Features

• Colorized Brackets: This extension colorizes matching brackets, which can be particularly helpful when dealing with deeply nested brackets in your code.
• Customizable Colors: You can define which colors to use for colorizing brackets. For example, you can add the following code to your settings.json file:
• JSONAI-generated code. Review and use carefully. More info on FAQ.

"bracket-pair-colorizer-2.colors": [
    "Gold",
    "Orchid",
    "LightSkyBlue"
]

• Performance: The Bracket Pair Colorizer extension makes heavy use of the Decoration API to colorize brackets. However, due to the non-incremental nature of the Decoration API and missing access to VS Code’s or VS Codium’s token information, the Bracket Pair Colorizer extension can be slow on large files.

9. Markdown All in One

All you need for writing and previewing markdown in. It provides keyboard shortcuts, table of contents, auto preview, and more.

Markdown All One Extension

Markdown All in One is a powerful extension for VS Code and VS Codium that provides comprehensive support for Markdown, a lightweight markup language. This extension offers a range of features that make writing and editing Markdown files in VS Code and VS Codium simple, straightforward, and efficient.

Key Features

• Keyboard Shortcuts: This extension provides a full range of keyboard shortcuts for common tasks in Markdown files.
• Table of Contents: It recognizes the headings in a page and creates a table of contents.
• Auto Preview: It offers an auto preview feature.
• List Editing: When you add a line to a list (bulleted or numbered), it automatically makes the next line a list as well.
• Print Markdown to HTML: It provides commands to print the current document to HTML.
• GitHub Flavored Markdown: It supports GitHub Flavored Markdown.
• Math Auto Completions: It offers math auto completions.
• Other Features: It also includes other features such as path completions, go to header in file/workspace, and snippets for Markdown.

10. Path IntelliSense

VS Code and VS Codium plugin that autocompletes filenames. It’s a simple yet powerful tool that can save you time when dealing with file paths.

Path Intellisense Extension

Path IntelliSense is a handy extension for VS Code and VS Codium that autocompletes filenames1. This extension can significantly speed up your coding process by providing intelligent suggestions as you type out file paths1.

Key Features

• Filename Autocompletion: Path IntelliSense autocompletes filenames as you type them in your code.
• Custom Configuration: You can customize the behaviour of Path IntelliSense by adding specific configuration options to your settings. For example, to use Path IntelliSense instead of the default autocompletion, you can add the following configuration options to your settings:
• JSONAI-generated code. Review and use carefully. More info on FAQ.

{
    "typescript.suggest.paths": false,
    "javascript.suggest.paths": false
}

• Node Packages IntelliSense: Path IntelliSense also provides autocompletion for Node packages.
• Support for Absolute Paths: By default, absolute paths are resolved within the current workspace root path. You can set it to false to resolve absolute paths to the disk root path.
• Custom Mappings: You can define custom mappings, which can be useful for using absolute paths or in combination with webpack resolve options.

Whether you’re a seasoned developer or a beginner, these extensions can be a valuable addition to your VS Code and VS Codium setup.