Top Essential Extensions For VS Code- Increase Productivity

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

Table Of Contents

• What is the VS (Visual studio) code?
• Five Key Features of The VS Code.
• IntelliSense: Smart Completions
• Debugging: Inspect and Execute
• Color Theme Live Preview
• Integrated Terminal
• Multi-root workspaces
• Best VS Code Extensions in 2019
• 1. Visual Studio IntelliCode
• 2. Prettier
• 3. Settings Sync
• 4. Task Explorer
• 5. Path Intellisense
• 6. Git-Lens
• 7. Bracket Pair Colorizer
• 8. Code Time
• 9. AutoClose Tag
• 10. Auto Rename Tag
• Summary

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, and preferences, and install extensions that add additional functionality.

It is a 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 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 is 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 of 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 the ctrl+shift+5 command or click right on the context 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 a multi-root workspace by opening multiple folders with your platform’s native file.
• Removing folders: With the 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 in 2019

Extensions are the add-ons that allow the developers to customize and enhance the developer 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 developers' productivity 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 with artificial intelligence to help developers code. The extension currently supports Python, JavaScript/TypeScript, as well as Java.
• If developers have ever used Intellisense before in either Visual Studio or Visual Studio Code, then they have an idea of 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 development time, you may see this built right into Visual Studio Code.

2. Prettier

• For front-end developers, 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 linting configuration.
• It has an opinionated code format that 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 work 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. Many developers use the text editor regularly to make their Web-Applications.
• Although, that was quite frustrating to constantly make changes and adjust them by hand.
• But after this Extension, it makes it easy 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, adds IDE style to run the functions of Visual Studio Code.
• The main aim of the task explorer is to support a fair number of standard build tools that include NPM, and Grunt. Gulp, Ant, Make, and Visual Studio Code.
• As well as it is customizable which makes it different from others.
• Also, this includes building tasks for 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 lets 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. Git-Lens

• 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 views that helps the developers to easily visualize the difference between commits and branches.
• As well, this extension helps the developers to search project commit history, searching by author, files, commit messages, and more.

7. Bracket Pair Colorizer

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

8. Code Time

• Code Time is for the developers to measure the activity in Visual Studio Code and report 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 adds closing tags when you write in closing brackets in the opening tag.
• Also, it saves 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"
    ]
}

• Using this extension in your program, you should set the language in settings. Let's take the example of JavaScript because it is common and used by every developer in their programming field.
  
  If you use JavaScript then set it as .js or if you use JavaSriptReact then set it to .jsx. So that it enables the extension on the .js file or .jsx file, just need to add javascript in setting.json.

Summary

In this article, you find lots of features and extensions of the VS code which help you to design and explain 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 with user-friendly software. Keep reading Codersera to get your daily dose of updates.

FAQ's