Visual Studio’s success comes mainly from the ability to provide stability and performance. Additionally, it provides much-needed features, including IntelliSense, that were available only in full-sized IDEs such as Visual Studio 2017 or Eclipse.
Visual Studio Code’s power comes from the open-source community as it is now able to support almost every programming language, development technology and framework. Additionally, the library supports syntax highlighting, IntelliSense and Emmet features, and snippets.
The Visual Studio Code Extensions—By Category
Consider using this configuration to make snippets shows:
Linters are used to compare the code through choosing a popular style or as a configuration file for rule customization. The Visual Studio Code does not have an in-built JS linter so an extension is needed. Some of the available extensions are:
- JSHint. With more than a million installs, JSHint requires a .jshintrc configuration file.
- ESLint. ESLint is the most popular, with over eight million installs. ESLint requires packages and plugins to be installed. You also have to specify rules for an .eslintrc which the extension will use for linting code.
- JSLint that offers a JSLint library linting. You must either locally or globally install the jslint. It has more than 109,000 installs at present.
Syntax Highlighting Extension
The latest Visual Studio Code now is more in line with Atom grammar standards for better colorization syntax support. Extensions like JS Atom Grammar are not needed anymore.
Nonetheless, there are still some syntax highlighting and file extensions useful to certain projects. A few of them are:
- DotENV. With more than 833,000 installs as of date, DotENV provides support for environments setting syntax highlighting.
- The Bracket Pair Colorizer 2. With over 730,000 installs, it highlights colors matching brackets to help in identifying the block the bracket belongs to.
The Node Package Management Extensions
- NPM by Egamma: With more than 2.3 million installs, it uses package.json for validating installed packages and provides clickable options if anything goes missing or if there are mismatched versions to fix. You could run npm scripts defined in the package.json inside the editor.
- Path Intellisense extension: With more than 2.7 million installs, it autocompletes filenames and works within CSS and HTML files.
- NpmIntelliSense. With more than 1.9 million installs, NpmIntelliSense provides autocompleting npm modules in import statements.
- Vide Node package: With over 55,000 installs, Vide Node package, enables viewing a Node package source as well as documentation quickly while working with code.
- Node Readme extension: With over 52,000 installs, it allows opening npm package documentation directly in the Visual Studio Code editor as another tab.
- Node exec extension: With more than 168,000 installs, it allows present file execution or the code chosen with Node.js by pressing F8. Also, you could abort a running process by pressing F9.
- Import Cost. With more than 562,000, Import Cost displays the amount of disk space a package will use upon import.
- Search node_modules. With more than 470,000 installs, the folder, by default, is excluded from the built-in search of VS Code. It allows navigating and opening files in node_modules fast via the folder tree.
The Formatting Extensions
Sometimes, we write code that does not align with the rest of the code. You have to go back to fix the indentation in every line and ensure that tags and braces are formatted correctly in a readable format. The process could get tedious. Instead, use extensions to help speed up the process. Keep in mind that Beautify and Prettier extensions cannot be simultaneously active.
- JS Refactor extension. It utilizes refactor for JS code, such as extracting variables/methods, converting existing code to use template literals or arrow functions, and exporting functions. To date, it has more than 140,000 installs.
For most of the major frameworks, VS Code provides support via extensions. There are, however, several established frameworks that have no complete development extension yet. Some of the VS Code extensions that provide considerable functionality are the following:
- Angular 8 Snippets. Angular 8 Snippets has snippets for Angular version 2 to 7, as well as 8 Beta. It supports HTML, TypeScript, PWA, Flex Layout, and Angular Material ngRx. It has 242 Angular snippets and more than 1.35 million installs.
- Angular Snippets version 9. With more than 1.7 million installs, it’s the most popular snippet extension for AngularJS developers. It has snippets for RxJS, TypeScript, Docker files and HTML.
- React Native tools. React Native tools provides IntelliSense, debugging and command features for projects of React Native. To date, it has more than 1.2 million installs.
- React-Native/Redux/React snippets. It has ES6/ES7 React syntax snippets, storybook in ES6/ES7, Redux, and React Native with over 371,000 installs.
- Vetur extension. Vetur extension provides syntax highlighting, Emmet, linting, snippets, IntelliSense, formatting, and debugging support for Vue. It has the documentation published on GitBook, with more than four million installs.
- ES7 React/GraphQL/React-Native/Redux snippets. It has snippets for JS and TypeScript, Redux, Graphql, and React with an ES7 syntax. The extension has more than one million installs.
- The Cordova Tools. The Cordova tools have support for Cordova plugins and framework. It provides IntelliSense, debugging, as well as other Cordova-based projects features. To date, it has more than 272,000 installs.
- Ember. With more than 18,000 installs, Ember has common support and IntelliSense for Ember. All ember cli commands are available via the own command list of the VS Code after installation.
- jQuery Code Snippets. It has jQuery code snippets of over 130,000. With more than 700,000 installs, it is activated by the prefix jq.
Unless you are writing a console program in JS, you will likely execute the JS code within a browser, meaning you have to refresh the page often to see every code update. Rather than manually doing this, here are several tools that could minimize the time to develop the iteration process.
- Chrome Debugger. With over 5.2 million installs, Chrome Debugger allows you to debug Chrome code or any other target that supports Chrome Debugger protocol.
- Live Server. Live Server enables you to launch a local developer server with a live reload feature for both dynamic and static pages.
- PHP Server: While the PHP Server was originally created for PHP projects, it is still useful for testing client-side only JS code. To date, it has more than 234,000 installs.
- Web Server Preview: Web Server Preview provides a web server as well as a live HTML preview. The feature can be called from the editor or the context menu. It has over 120,000 installs.
- Rest Client extension. Rather than using a browser or a CURL program for testing REST API endpoints, the Rest Client Extension tool could be installed to run HTTP requests within the editor.
A vital component of software development is testing. The following are some of the popular VS Code extensions for testing.
- ES6 Mocha Snippets. It provides the ES6 syntax with Mocha snippets. It focuses on keeping code dry, omitting curlies by if possible and leveraging arrow functions. It can be configured to enable semicolons. It has more than 36,000 installs.
- Jasmine Code Snippets. With over 30,00 installs, the extension offers the Jasmine test framework code snippetsThis framework has not been updated in the past three years.
- Mocha sidebar snippet. With the Mocha library, it provides testing support to directly run tests on code and reveals errors as decorators. It has several unresolved issues.
The Awesome Extensions
- Paste as JSON. With more than 420,000 installs, it enables a quick conversion of JSON data to JS code.
- Code Metrics. With more than 233,000, Code Metrics help with code calculation complexity in JS and TypeScript.
The Extension Packs
The Visual Studio Code marketplace also has a category for extension packs. These extension packs are collections of related Visual Studio Code extensions packed into a single package for an easy installation.
- Visual Studio Code for Node.js. It has an NPM IntelliSense, ESLint, Docker, Code Metrics, Chrome Debugger, and Import Cost.
- The Vue.js Extension pack: , It is a collection of both JS and Vue extensions. At present, it has around 12 VS Code extensions,, including auto-close-tag and the auto-rename-tag. To date, it has more than 156,000 installs.
- Nodejs Extension Pack. With more than 293,000 installs, it contains, npm, ESLint, Search node_modules, JS snippets, Path IntelliSense, NPM IntelliSense.
- Ionic Extension Pack. It contains several VS Code extensions for Angular, RxJS, Ionic, HTML, and Cordova development. To date it has over 75,000 installs.
The Node.js extensions, with IntelliSense features, help correctly import modules. The availability of tools like the REST client and Live Server lessens relying on external tools to complete a project. VS Code is great for adding new themes and features. The VS code is lightweight, fast and extremely powerful. Microsoft designed it as a cross-platform code editor used to write web apps as well as cloud apps.
The main reason why VS Code is so popular is that it has everything that a programmer could expect from any code editor, with additional useful features as well.
- Best 5 Tools for Node.js Monitoring - November 23, 2020