Telerik blogs

Top 5 VS Code Extensions for Efficient JavaScript Development

by Christian Nwamba
June 12, 2019 Web 0 Comments
JavaScriptT Light_870x220


Extensions are external resources that help you improve the built-in abilities of VS Code. In this post, we take a look at the top 5 extensions to improve our JavaScript development skills.

One of the most remarkable things about Visual Studio Code is the ability to improve its abilities by the addition of external extensions. There are loads of extensions in the marketplace, however. In this post, we’ll be discussing the top 5 extensions that will drastically enhance your JavaScript development in VS Code.

ESLint

ESLint is a pluggable and configurable linter tool for identifying and reporting on development patterns in JavaScript. It helps you maintain your code quality and structure with ease. Adding this extension to VS Code will help you auto-format your code, enforcing cleaner, well-structured, consistent code.

ESLint

Getting ESLint

ESLint, along with every other VS Code extension, is available on the VS Code Marketplace. Simply open the link and click install.

Another way to do this would be through VS Code itself. If you’re a fan of installing your extensions within VS Code, here’s how:

install-eslint

Note: In the latest version of VS Code, you won’t need to reload VS Code when you install an extension.

After installation, you can configure ESLint to operate as you choose. For instance, you can set it to only format your code when you save. Even more, the linting features of ESLint will enforce certain development guidelines to help you stay consistent.

Debugger for Chrome

Debugger for Chrome is a VS Code extension used to debug JavaScript code running in the Google Chrome browser from within VS Code. It saves you the stress of constantly switching context to view changes in the logcat or generally to perform debugging operations.

debugger-for-chrome

Getting Debugger for Chrome

The Debugger for Chrome extension is available for installation on the VS Code Marketplace alongside any other VS Code extension you might want. Simply open the link and click Install to install it to your VS Code.

You can also install it directly from VS Code by clicking the extensions icon, searching for the Debugger for Chrome extension and installing it:

install-debugger-for-chrome

Note: In the latest version of VS Code, you won’t need to reload VS Code when you install an extension.

More Features

After installation, you will have access to all the extension features like setting breakpoints, stepping through lines of code, viewing your console output, debugging eval scripts, script tags, and dynamically added scripts.

Limitations

It is worth noting that there are some limitations to what the extension can do. For instance, it cannot debug web workers or any features that aren’t script debugging.

JavaScript (ES6) Code Snippets

JavaScript (ES6) code snippets is a VS Code extension that contains code snippets for JavaScript in ES6 syntax for VS Code. What’s more? It has support for both JavaScript and TypeScript.

JavaScript-ES6-code-snippets

Snippet extensions are very popular in the VS Code community. This one is even better as it helps you quickly add ES6 codes to your project with a few keystrokes.

Supported Languages

Apart from JavaScript, it has support for other languages like:

  • HTML
  • Vue
  • TypeScript React
  • JavaScript React
  • etc.

Snippets

Here are a few snippets and their triggers you should know.

rqr→ require package require('');
met→ creates a method inside a class add() {}
fre→ forEach loop in ES6 syntax array.forEach(currentItem => {})
clg→ console log console.log(object)
pge→ creates a getter property get propertyName() {return value;}

There’s a long list of these snippets and their respective triggers on the Marketplace for your consumption.

Getting JavaScript (ES6) Code Snippets

Like the previous extensions, you can get JavaScript (ES6) code snippets from the VS Code Marketplace or directly from VS Code.

Bracket Pair Colorizer

This is my personal favorite. Apart from the aesthetic feel it gives your code in VS Code, it helps you automatically match all your braces. Oftentimes as our lines of code grows, it becomes increasingly tasking to keep track of all the braces, square brackets, and parentheses in our code.

Bracket-Pair-Colorizer

Bracket Pair Colorizer is fully customizable in that you can define what types of symbols you want to match and equally associate it with defined colors of your choice.

Getting Bracket Pair Colorizer

To install this extension, head over to the Marketplace and click the Install button to trigger the installation in VS Code. You can as well install it directly from VS Code by searching through the extensions icon like this.

install-Bracket-Pair-Colorizer

Apparently I already have it installed, which is why you’re not seeing the Install button as you otherwise would.

Path Intellisense

This is another of my favorite VS Code extensions. Having to remember exact file paths is really tasking for me, and it gets even more tasking with really large projects with numerous files. Luckily, the Path Intellisense extensions comes to the rescue. It automatically completes filenames for you so that you don’t have to worry about remembering all your filenames and their storage locations.

Path-Intellisense

It is worth mentioning that this particular feature comes preloaded in some projects. Hence, you might not need to install extensions for it.

Getting Path Intellisense

The Path Intellisense extension is available on the VS Code Marketplace. Simply open the link and install the extension. Better still, you could install it via npm or directly from the VS Code extensions section.

Usage

Path-Intellisense-at-work

Image credit : Path Intellisense

Conclusion

There we have it. In this post we have highlighted 5 Visual Studio Code extensions that will definitely enhance your JavaScript development. ESLint will help you write cleaner, more consistent code; Debugger for Chrome will help debug better; JavaScript(ES6) Code Snippets will increase your productivity by generating snippets for you; Bracket Pair Colorizer will be there to help you trace and match trailing braces to their respective pairs; and finally, the Path Intellisense extension will help you autocomplete filenames.

If you have other amazing extensions you feel will improve our JavaScript development in VS Code, please go ahead and mention them in the comment section.

 

For More Info on Building Great Web Apps

Want to learn more about creating great web apps? It all starts out with Kendo UI - the complete UI component library that allows you to quickly build high-quality, responsive apps. It includes everything you need, from grids and charts to dropdowns and gauges.

Learn More about Kendo UI

Get a Free Trial of Kendo UI

App Dev, Extensions, JavaScript, Visual Studio, Web Development
About the Author

Christian Nwamba

Chris Nwamba is a Senior Developer Advocate at AWS focusing on AWS Amplify. He is also a teacher with years of experience building products and communities.

Comments

Comments are disabled in preview mode.