Best VSCode Extensions to Use in 2023

by adminNovember 24, 2022November 24, 2022

StackOverflow and Wakatime polls show that VS Coding is one of the most popular code editors. VS Code additions improve productivity, contribution, and teamwork.

Extensibility and customizability are why developers choose VS Code. Through an extension API, almost every feature of VS Code may be changed.

Related

VS Code extensions can modify VS Code’s design, add custom components and views, support a new programming language, and more.

We compiled a collection of developer-friendly VS Code addons. This post explores our favourite VS Code addons and how they might boost developer productivity.

Live Server

The Live Server extension for Visual Studio code is incredibly helpful and has seen over 25 million installations since it was released. It gives you the option to right-click on an HTML document, and then it starts a server and opens a browser window for you, displaying the file inside the browser window.

Peacock

Make a little adjustment to the colour scheme of the workspace in Visual Studio Code. Ideal for situations in which you have numerous instances of VS Code, make use of VS Live Share, or make use of functionality offered by VS Code Remote and you want to instantly identify your editor.

Bookmarks

It makes it easier for you to move between critical points in your code and moves you through the code more rapidly. There is no longer a need to look for the code. In addition to this, it provides a set of selection commands, which enables you to choose areas between bookmarked lines as well as bookmarked lines themselves. The examination of log files can benefit greatly from using it.

CSS Peek

Peek allows you to make rapid modifications directly on the page by loading the CSS file inline and doing so. (Ctrl+Shift+F12) Go To: open the CSS file in a new editor or go straight to the CSS file itself ( F12 ) Display the meaning of the symbol by moving the cursor over it while holding down the Control key and the Hover key.

Regex Previewer

As a strong tool for pattern matching and substitution, regular expressions (or “regex” in the programming world) get a lot of attention from developers. If you want to compare global and multiline settings with two documents side by side, you may do so by entering them into the status bar. When there are several possible matches in the documents being compared, this might be helpful.

Prettier

It all comes down to taking less time to format your code so that you can devote all of your attention to meeting your coding requirements. This is what the extension contributes to accomplishing. Your code will automatically correct any formatting errors, such as recurring double quotes or semicolon problems.

Vscode-icons

You can generate descriptive icons with vscode-icons to quickly classify files and folders. This plugin makes it easier for teams to work together closely by improving the code’s visual appeal. This means you can always return later and work on your code with complete focus, creating a wonderful end-user experience.

Setting Sync

As developers, we get to work on a variety of different devices, and it may be difficult to maintain a consistent development environment across all of these different platforms. You may, however, synchronise your settings, themes, file icons, keybindings, extensions, and workspaces across various devices by utilising Github gist and Settings sync.

Better Comments

Using a completely customised system of tags, Better Comments enables developers to better document their code. With the plugin, you may provide various comment kinds their own custom appearance to provide semantic context. For instance, you may configure Better Comments so that all to-do comments are displayed in blue. When you view a file containing a to-do, the remark will be displayed in blue right away.

Colorize

If you are a front-end developer, Colorize is a powerful tool that you can use to hack your productivity. This Visual Studio Code add-on eliminates the need to look up CSS colour codes in a separate reference manual, allowing you to focus on your work without distraction. This add-on creates and updates in real time the background colour of CSS variables, preprocessor variables, hsl/hsla colors, CSS hex color, rgb/rgba color, and argb color.

TODO Highlight

This is what the TODO Highlight plugin aims to fix. Making your TODOs stand out makes it easier to find and take care of them when you have time. You can list all the highlighted annotations and toggle the highlights. This serves to remind the user that additional steps must be taken before pushing the code to the production environment.

GitLens Git supercharged

Git’s developer-friendly features are well-known. Multiple code versions simplify complicated product requirements. It combines Git and VS Code. Visualizing code helps you better grasp it. This explains the code’s who, why, and when. Explore the codebase’s history and progress.

Turbo Console Log

Most people would want to say that they always use a debugger when creating JavaScript, but that’s not always the case. The development process might occasionally need console logging, and Turbo Console Log makes this procedure exceedingly simple. You may use keyboard keys to quickly input numerous console logs, highlight variables, and erase all of them at once using Turbo Console Log.

Visual Studio Code Remote – SSH

Microsoft has developed an addon for VS Code called Remote SSH that gives users the ability to use a remote machine that is equipped with an SSH server as their development environment. This addon is a wonderful tool that enables us to access an existing development environment from numerous locations and computers. As our workplaces become even more dynamic, some businesses are transitioning to a fully remote or hybrid model, while others are doing so in part.

Git History, Search and More

You can browse git logs and the history of files in VSCode thanks to an extension, and you can even compare branches, commits, and files across commits. This extension also has a variety of other capabilities, some of which include the ability to create tags, branches, revert commits, cherry-pick commits, merge, and rebase. You are able to perform this within the editor of VSCode without needing to change the context.

VS Code Javascript (ES6) Snippets

Despite the fact that the built-in JS IntelliSense capabilities of VSCode offer intelligent auto-completion, reference search, and other more advanced features for JS developers. Having access to class helpers, import, export, and method triggers is made possible for you as a JS developer thanks to the JavaScript (ES6) extension. This can also improve your overall development experience.

Code Spell Checker

Common pitfalls for developers include misspellings in comments or variable names. These typos are easy to overlook, but with the Code spell checker plugin, you can find and fix them quickly. Long-term, this will aid you in maintaining a clean code environment free of the squiggly lines that plague so many developers. The Code spell checker provides suggestions when the cursor is placed on a word by clicking the bulb symbol in the left margin.

Icon Fonts for Visual Studio Code

Front-end developers frequently work with icons. Developers have access to snippets for well-known icon fonts like Font Awesome, Glyphicons, Octicons, Material design, and many more thanks to the Icon Fonts extension. The VSCode marketplace offers the icon fonts extension, which can also be used with editors like Atom and Sublime Text.

Import Cost VS Code Extension

Bundle size and performance are perennial topics of conversation while developing new web apps. These are valid and essential points to address, but the time to actually do anything about them is when you are building code. The import volume is conveniently shown inline next to each import statement, making it easy to calculate the total cost of imports with Import Cost. Import cost uses webpack internally and provides live feedback as you modify your import lines.

Markdown Support for Visual Studio Code

Markdown All in One enhances the Markdown capabilities with Visual Studio Code. The VS Code provides Markdown support out of the box. Markdown is commonly used across different technical domains, and this extension is crucial in improving overall productivity and speed.

Conclusion

Without a question, Visual Studio Code is an excellent code editor with practically endless customization options. These extensions, along with the hundreds more that may exist but aren’t shown here, will allow you to gain access to more features, debug code more quickly, and adopt new levels of abstraction, all while increasing your productivity. To ensure that you and your team of developers are all on the same page, it’s helpful to establish standards for the Visual Studio Code add-ons that you’ll all be using.