In this article, I’ll focus on must-have VS Code extensions for JavaScript developers.
Visual Studio Code is undoubtedly the most popular lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.
The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.
VS Code Extensions by Category
For this article, I’ll focus on VS Code extensions specifically targeting JavaScript developers. Currently, there are many VS Code extensions that fit this criterion, which of course means I won’t be able to mention all of them. Instead, I’ll highlight VS Code extensions that have gained popularity and those that are indispensable for JavaScript developers. For simplicity, I’ll group them into ten specific categories.
Snippet Extensions
When you first install VS Code, it comes with a several snippets for JavaScript and Typescript. Before you start writing modern JavaScript, you’ll need some additional snippets to help you quickly write repetitive ES6/ES7 code:
-
VS Code JavaScript (ES6) snippets: currently the most popular, with over 1.2 million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue extensions.
-
JavaScript Snippet Pack: a collection of useful snippets for JavaScript.
-
Atom JavaScript Snippet: JavaScript snippets ported from the atom/language-javascript extension.
-
JavaScript Snippets: a collection of ES6 snippets. This extension has snippets for Mocha, Jasmine and other BDD testing frameworks.
Syntax Extensions
VS Code comes with pretty good syntax highlighting for JavaScript code. You can change the colors by installing themes. However, you need a syntax highlighter extension if you want a certain level of readability. Here are a couple of them:
-
JavaScript Atom Grammar: this extension replaces the JavaScript grammar in Visual Studio Code with the JavaScript grammar from the Atom editor.
-
Babel JavaScript: syntax highlighting for ES201x JavaScript, React, FlowType and GraphQL code.
-
DotENV: syntax highlighting for
.envfiles. Handy if you’re working with Node.
Linter Extensions
Writing JavaScript code efficiently with minimum fuss requires a linter that enforces a specific standard style for all team members. ESLint is the most popular, since it supports many styles including Standard, Google and Airbnb. Here are the most popular linter plugins for Visual Studio Code:
-
ESLint: this extension integrates ESLint into VS Code. It’s the most popular linter extension, with over 6.7 million installs to date. Rules are configured in
.eslintrc.json. -
JSHint: a code checker extension for JSHint. Uses
.jshintrcfile at the root of your project for configuration. -
JavaScript Standard Style: a linter with zero configuration and rigid rules. Enforces the StandardJS Rules.
If you’d like an overview of available linters and their pros and cons, check out our comparison of JavaScript linting tools.
Node Extensions
Every JavaScript project needs to at least one Node package, unless you’re someone who likes doing things the hard way. Here are a few VS Code extensions that will help you work with Node modules more easily.
-
npm: uses
package.jsonto validate installed packages. Ensures that the installed packages have the correct version numbers, highlights installed packages missing frompackage.json, and packages that haven’t been installed. -
Node.js Modules IntelliSense: autocomplete for JavaScript and TypeScript modules in import statements.
Source: vscode-node-module-intellisense -
Path IntelliSense: it’s not really Node related, but you definitely need IntelliSense for local files and this extension will autocomplete filenames.
-
Node exec: allows you to execute the current file or your selected code with Node.js.
-
View Node Package: quickly view a Node package source with this extension, which allows you to open a Node package repository/documentation straight from VS Code.
-
Node Readme: quickly open npm package documentation.
-
Search node_modules: this extension allows you to search the
node_modulesfolder, which is usually excluded from standard search.
Source: vscode-search-node-modules -
Import Cost: displays size of an imported package.
Source: import-cost
The post 10 Must-have VS Code Extensions for JavaScript Developers appeared first on SitePoint.
by Michael Wanyoike via SitePoint
No comments:
Post a Comment