5 of the Best VS Code Extensions for JavaScript Developers (Part I)

JavaScript is one of the most popular programming languages with a variety of components, frameworks, and tools. One of the most popular editors is Visual Studio or VS Code, which is a lightweight code editor.

JavaScript is one of the most popular programming languages ​​with a variety of components, frameworks, and tools. One of the most popular editors is Visual Studio or VS Code, which is a lightweight code editor.






Visual Studio's success is largely due to its ability to deliver stability and performance. In addition, it provides much-needed features, including IntelliSense, which is only available on full-size IDEs such as Visual Studio 2017 or Eclipse.


The power of Visual Studio Code comes from the open-source community as it is now able to support almost any programming language, development technology and framework. In addition, it supports syntax highlighting, IntelliSense and Emmet features, and snippets.


The following are some of the most popular JavaScript extensions.


1. StandardJS JavaScript code snippets: Great for developers who choose the StandardJS contract style. Snippets have no semicolon.


2. JS Code snippets: Currently the most popular with over 3 million installations. It has ES6 syntax for JavaScript, HTML, React, TypeScrip. All snippets have the final semicolon.


3. Nathan Chapman JavaScript Scripts: A collection of JS scripts with approximately 33,000 installations. The extension supports BDD Testing frameworks, namely Jasmine, Mocha and Node.js.


4. JavaScript Standardjs Styled Snippets by Capaj: This most popular standard snippet has 72,000 installations. It is originally an Atom StandardJS snippet. The snippets support JavaScript, React and TypeScript.


5. Atom JavaScript Snippet made by Saran Tanpituckpong: With over 26,000 installations, they have been transferred from the atom / JavaScript extension.


Linter Extensions


Linters are used to compare code by selecting a popular style or as a configuration file to customize rules, which are used to find possible errors in the code and correct them when writing code. Visual Studio does not have a built-in JS liner code, so it needs an extension. Some of the extensions available are:


JSHint. With over one million installations, a jshintrc configuration file. needs.


ESLint. It is the most popular with over eight million installations. Requires packages and plugins for installation. You must also have rules for eslintrc. Define that the extension is used for linting code (finding possible errors).


JSLint which provides JSLint library linting. You can install jslint locally or globally. It currently has more than 109,000 installations.


Standard JavaScript Style. With over 259,000 installations, it integrates Standard JavaScript Style with JS Standard Style in VS Code. standard or semiStandard should be installed as a dev dependency on your project. You do not need a configuration file because you only need to disable the internal VS Code validator.


Syntax Highlighting Extension


Currently, the latest Visual Studio Code complies with Atom Grammar Standards to better support the coloring of syntaxes. Extensions like JS Atom Grammar are no longer required.


However, some file extensions and syntax highlighting are useful for some projects. Some of them are:


DotENV. With over 833,000 installations, it supports environments that adjust syntax highlighting.


Bracket Pair Colorizer 2. With over 730,000 installations, it highlights colors according to the brackets to help you identify the block belonging to the bracket.


Babel JavaScript. Provides syntax highlighting for ES201, FlowType, JS and GraphQL with over 550,000 installations.

Node Package Management Extensions


Each JavaScript project must be on an npm package. Some VS Code extensions help you easily manage npm packages, including:


NPM by Egamma. With over 2.3 million installations, it uses package.json to verify installed packages and offers clickable options if something goes missing or the versions do not fit. You can run the npm scripts defined in package.json into the editor.


Path Intellisense extension. With over 2.7 million installations, it automatically completes filenames and works in CSS and HTML files.


NpmIntelliSense. With over 1.9 million installations, it imports npm autocomplete modules into imports.


Vide Node package. With over 55,000 installations, it allows you to view the source of the Node package as well as the document when working with code.


Formatting Extensions


Sometimes, we write code that is not on par with other codes. You must go back and clear the indentations on each line of code and make sure that the tags and braces are formatted in a legible format. This can be tedious. Instead, use extensions that speed up the process. Note that Beautify and Prettier extensions cannot be enabled together.


Beautify. Beautify is an extension of jsBeauitifier and supports JSON, JavaScript, HTML and CSS. Customization can be done via the jsbeautifyrc file. be done. To date, it has 4.4 million installations, which is currently the second most popular format.


JS Refactor extension. Uses the refractor for JS code, such as extracting variables / methods, converting existing code, exporting functions. To date, it has had more than 140,000 installations.


Prettier Code Formatter. The most popular extensions that support JavaScript, formatting, CSS, and typing. It is recommended to install it locally as development dependencies.


JavaScript Booster extension. Its features include several encoding operations, such as converting var to const or let. Merge initialization and declaration, and delete additional elsewhere commands. It has more than 74,000 installations.


Framework Extensions


For most large frameworks, VS Code is supported through extensions. However, there are several frameworks whose extension is not yet fully developed. Here are some VS Code extensions that offer significant performance:


Angular 8 Snippets. Snapshots for Angular versions 2 to 7 also have 8 betas. Supports HTML, TypeScript, PWA, Flex Layout, and Angular Material ngRx. It has 242 Angular snippets and more than 1.35 million installations.


Angular Snippets version 9. With over 1.7 million installs, it is the most popular Snippet extension for AngularJS developers. Contains snippets for Docker, RxJS, TypeScript and HTML files.


React Native tools. Provides IntelliSense, debugging, and command features for React Native projects. To date, it has had more than 1.2 million installations.


React-Native / Redux / React snippets. Features syntax storybook, ES6 / ES7 React in Redux, ES6 / ES7, and React Native with over 371,000 installations.


Vetur extension. Provides syntax highlighting, Emmet, linting, snippets, IntelliSense, formatting and debugging support for Vue. It has a document published on GitBook, with more than 4 million installations.


ES7 React / GraphQL / React-Native / Redux snippets. Contains scripts for JS and TypeScript, Redux, Graphql, and React with ES7 syntax. This extension has more than one million installations.


Cordova Tools. Supports Cordova frameworks and plugins. IntelliSense provides debugging, as well as other features of Cordova-based projects. To date, it has had more than 272,000 installations.


Ember. Provides support and IntelliSense for Ember with over 18,000 installations. All ember cli commands are available after installation via the list of VS Code commands.


jQuery Code Snippets. There are more than 130,000 jQuery code snippets. With over 700,000 installations, it is enabled by the jq prefix.

Java Script

Introducing the best VS code extensions the most widely used JavaScript extensions Visual Studio code extensions for JavaScript the best JavaScript extensions in VS Code Comparing JavaScript extensions
You must be logged in to post a comment