Useful VS Code Extensions

Any software engineer, developer, or programmer's code editor is one of their most essential tools. Numerous code editors are available, including Sublime Text, Atom, Notepad++, and Visual Studio Code. The fact that the majority of code editors, including the one listed above, are free and supported by major corporations like Microsoft and others is one of their many excellent advantages. This indicates that the code editors will be properly updated and maintained.

In this blog, we'll concentrate on Visual Studio Code (VS Code), which is both one of the most popular code editors and a personal favorite of mine, per a recent survey conducted by the StackOverflow team. Code editors in general, but particularly VS Code, can increase programmers' productivity and relieve a ton of stress and aggravation. Please click here to go to VS Code's official website if you're interested in utilizing it. You can choose to download a version that is compatible with the operating system of your computer, if that choice is available.

Let's now discuss a few features and extensions that you can add to VS Code to increase your productivity.

Emmet
VS Code has a ton of cool features right out of the box. Emmet is one of those characteristics. While Emmet is a plugin that can be used with various code editors, VS Code already has it installed, so there is no need to manually install it. Emmet offers abbreviations that translate into whole HTML code. HTML is typically written using repeated syntax. See the excellent use case for emmet below.

div>(header>ul>li*2>a)+footer>p

The code shown above expands to:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

As you can see, emmet can help you avoid doing repetitive tasks. Please click here to find out more about emmet acronyms.

You must select the extensions tab (red arrow) in the activity bar in order to add extensions to Visual Studio Code. The illustration below may be of use.

If the activity bar is not visible, please check that Show Activity Bar is selected under View → Appearance. You can enter the name of the extension you wish to add or install in the search box (green arrow) that appears when you access the extensions tab. You can use each extension's functionality according to the instructions provided with it.

Bracket Pair Colorizer
The brackets and parenthesis in your code now have colors thanks to this plugin. This can make it much easier to determine which brackets are pairs when you have brackets and parentheses nested inside of other brackets and parentheses. Here is a fantastic illustration of how this extension functions.

Code Spell Checker
This plugin functions as a spell checker for your code editor, as the name would imply. The fact that this extension works well with camelCase code is one of its best qualities. Additionally, you may make the spell checker compatible with various file types (Python, Javascript, Java, Go and many others).

By preventing bugs from entering your code, this extension can spare you untold hours of frustration.

ES7 React/Redux/GraphQL/React-Native snippets
Given that it offers incredible shortcuts for developing class or functional components, this plugin is ideal for React and React Native developers. This plugin can be compared to emmet, but for the React environment. An extensive list of the shortcuts offered is provided on the official website for this extension.

As I said, this plugin can save you a ton of time by producing components really quickly.

Live Server
This plugin is one of the most practical and helpful ones I've ever used, in my view. This extension builds a local development server with live page reload functionality for both static and dynamic pages. When you are mostly working with HTML and CSS files, this is really helpful (no framework involved). Once your files are saved, it reflects whatever modifications you've made to them. This kind of capability is often present when using a framework.

If the extension is already installed, all you need to do to use it is right-click the file you want to open and select Open with Live Server.

Prettier — Code formatter
This extension's goal is to assist you in formatting your code to improve readability. Every time you save a file, this extension is activated, and it almost supports all file types.

JavaScript (ES6) code snippets
Excellent Javascript code snippets are offered by this extension. Similar to earlier extensions, this one aims to reduce repetitions by offering shortcuts to some of the most popular Javascript code. The extension is compatible with Typescript, HTML, JSX, and Vue files.

As a developer, I have utilized a few of these extensions. Please feel free to investigate and test out additional extensions since there are many more that are very useful but were not discussed in this blog.

Thank you for reading; I hope my blog is useful to you in your efforts to become a more effective developer.