Top Essential Extensions For VS Code – Increase Productivity

In this article, we explain what is VS code and what are the uses of the VS Code in your web application to design and to code. There are key features of it which describe the importance of the VS Code in your project. Even to increase the productivity of projects as well as it explains how to operate it. In 2019, there are several Extensions that help the developers to design their applications.

What is the VS (Visual studio) code?

Visual studio code is a source-code editor text editor program design. It is built into an integrated development environment (IDE) or web browser developed by Microsoft for Windows, Linux, and macOS. It guides debugging, embedded syntax highlighting, intelligent code completion, snippets, and code refactoring. VS Code is highly customized which allows the users to change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality.

It is the cross-platform text editor built by Microsoft. And they essentially take their online editor VS online also which creates a fast and highly efficient working environment for front-end programmers.

VS Code supports many programming languages that help the developers to choose and work according to their favorite programming language. The languages that the VS Code supports are:

1. JAVA
2. JavaScript
3. TypeScript
4. JSON: JavaScript Object Notation
5. HTML: Hypertext Markup Language
6. CSS: Cascading Style Sheets

Do you know? Visual studio code is the free and open-source and released under the permissive MIT license. As well as it is based on Electron, which is a framework to deploy Node.js application for the desktop.

Five Key Features of The VS Code

1. IntelliSense
2. Debugging
3. Color theme live preview
4. Terminal
5. Multi-root of workspace

IntelliSense: Smart Completions

This is very helpful to the syntax highlighter and autocompletes feature which provides smart completions. IntelliSense is a code completion tool. It is also called intelligent code completion or intelligent text completion on various separated platforms.

• IntelliSense provided for JavaScript, TypeScript, JSON, CSS, HTML, and SCSS.
• Support the word based completions for any programming language.
• As well as based on language semantics and also analysis your code.
• Suggest the correct words.

Debugging: Inspect and Execute

Debugging in visual studio code can help the developers to navigate through code to inspect the state of an app and its execution flow. Also, the developers can use keyboard shortcuts, breakpoints, and debug commands.

• VS Code is familiar with debugger navigation commands.
• Also, fast and easier to find as well as resolve the bugs in the programming.
• Automatically detect your debug environment.
• It provides the developer debug menu. Also, press F5 to start debugging.

Color Theme Live Preview

To create a working environment there are color themes that modify the colors in Visual Studio Code for the user interface.
As well as there are two main categories of the color theme:
Workbench color and Syntax color.

How to Select the Color Theme:

1. In Visual Studio Code, open the Color Theme picker with File > Preferences > Color Theme. OR (in macOS– Code > Preferences > Color Theme ).
2. You can also use the keyboard shortcut Ctrl+K OR Ctrl+T to display the picker.
3. Use the cursor keys to preview the colors of the theme.
4. Select the theme you want and then press Enter.

Integrated Terminal

In Visual Studio Code, you can open an integrated terminal, starting at the root of your workspace. This can be suitable as you don’t have to switch windows or alter the state of an existing terminal to perform a quick command-line task.

• It manages multiple terminals
• Create multiple terminals in the VS code to various locations.
• As well as easily navigate between them.
• you can also split the terminal by ctrl+shift+5 command or click right the content menu.

To open the terminal:

• Use the Ctrl+` keyboard shortcut with the backtick character.
• Secondly, use the View > Terminal menu command.
• From the Command Palette (Ctrl+Shift+P), then use the View: Toggle Integrated Terminal command.

Multi-root workspaces

In Visual Studio, you can work in multiple project folders with multi-root workspaces. Also, this is easy to work on different projects at the same time by using this feature. And it helps to do productive work for your company or business.

The key feature of Multi-root workspaces are:

• Adding folders: File > Add folder to Workspace

• Drag And Drop: It is easy to drag and drop to add folders in the workspace.
• Multiple selection native file open dialogs: It creates multi-root workspace by opening multiple folders with your platform’s native file.
• Removing folders: With context menu command, remove the folder from the workspace you can remove the folder from your workspace.
• Save Workspace As : If you want to save your Workspace file, you can use File > Save Workspace As.

Best VS Code Extensions 

Extensions are the add-ons that allow the developers to customize and enhance the developer’s experience in Visual Studio by adding new features as well as integrating existing tools.

Use Visual Studio Code extensions to add new features, themes, and more.

An extension can range in all levels of complexity, but the main purpose of the extension is to increase the productivity of the developers and provide to the workflow.

Some extensions help to increase productivity:

1. Visual Studio IntelliCode

• Developed by Microsoft DevLabs, Visual Studio IntelliCode is an extension that comes in artificial intelligence to help the developers to code. The extension currently supports Python, JavaScript/TypeScript, as well as Java.
• If developers ever use Intellisense before in either Visual Studio or Visual Studio Code, then they have an idea what to expect. As well as the difference here is that this is essentially an even more intelligent take on that idea.
• This extension is still in the early stages of development and is already impressive. Once it’s had some more time in development, you may even see this built right into Visual Studio Code.

2. Prettier

• For front end developer, and especially if any developer needs to follow a style guide, Prettier is your new best friend. The Prettier extension automatically formats JavaScript, TypeScript, and CSS using the code formatting tool of the same name.
• Prettier takes the code you write and edits it for you, following a strict set of formatting guidelines. Secondly, the extension is “opinionated,” meaning it makes several decisions on its own, but you can use the extension with the eslint or tslint tools to make sure it follows your own linting configuration.
• It has an opinionated code format which supports a vast variety of languages. It removes all original styling and ensures that all outputted code conforms to a consistent style.
• Therefore, when multiple people working on a single project, Prettier enforces a consistent code style.

3. Settings Sync

• The main aim of the Setting Sync extension is to solve the problem. There are many developers who use the text editor regularly to make their Web-Applications.
• Although, that was quite frustrating to constantly make changes and adjust it by hand.
• But after this Extension, it makes easy that at least a few tweaks to its setting to create the process easy.
• Setting Sync includes other extensions as well as their configurations to make your entire coding portable.
• It only takes a few minutes to set up the whole setting by Setting Sync in the VS code.

4. Task Explorer

• Task Explorer extension, it adds IDE style to run the functions to Visual Studio Code.
• The main aim of the task explorer is to support a fair number of standard build tools that includes NPM, Grunt. Gulp, Ant, Make, and Visual Studio Code.
• As well as it is customizable which make it differ from others.
• Also, this includes build tasks your current projects, as well as includes bash, Python, and other scripts.

5. Path Intellisense

• In Visual studio code, Path Intellisense can be a Lifesaver to every developer. The extension adds Intellisense style completion to filenames, as well as letting you easily type long path names without saving them to memory.
• It has some configuration options related to a simple extension in the VS Code. For instance, it depends on the developer to choose whether or not to add a slash after directory names.
• The other options include whether or not to include filenames in import statements or the ability to ignore certain file types.

6. GitLens

• This extension helps the developers to visualize, navigate, as well as understand their project’s Git history.
• Among other extensions, GitLens adds a powerful split that differs view that helps the developers to easily visualize the difference between commit and branches.
• As well as, this extension helps the developers to search projects commit history, searching by author, files, commit messages, and more.

7. Bracket Pair Colorizer

• Bracket Pair Colorizer is a plugin that described by its name. It automatically colorizer certain characters that help the developers to tell how deeply nested a certain piece of code.
• Thre are several languages that supported it so that developers can choose accordingly. As well as by default, ( ) ,{ } , and [ ] are matched, but also developers cab use other bracket characters that they like or match or which colors to use.

8. Code Time

• Code Time is for the developers to measures the activity in Visual Studio Code and reports to you about the above activities, as well as other metrics.
• And in the status bar, you can see the whole real-time metrics. Or there is an in-editor dashboard for a better experience for the developers.
• Developers can also set Code Time to send weekly email reports.

9. AutoClose Tag

• The main feature of the AutoClose tag is it automatically add closing tags when you write in closing brackets in the opening tag.
• Also, it saves the keystrokes over time.

10. Auto Rename Tag

• When you rename one HTML/XML tag, this tag automatically renames the paired HTML/XML tag.

Configuration:

{
    "auto-rename-tag.activationOnLanguage": [
        "html",
        "xml",
        "php",
        "javascript"
    ]
}

Summary

In this article, you find lots of features and extensions of the VS code which help you to design and explain each and every feature as well as extensions so that you can operate it according to your requirement. This editor is useful for front-end developers who design and maintain the whole structure of the web application. This editor helps to increase the productivity of the developer to work easily in user-friendly software. Keep reading Codersera to get your daily dose of updates.