You can make VS Code more powerful in minutes. This blog post shows how Visual Studio Code extensions can help you enhance the IDE experience for JavaScript.
Join the DZone community and get the full member experience. Visual Studio Code is a great code editor that comes with JavaScript and TypeScript features like basic refactoring out of the box. However, its true strength is an outstanding extension marketplace. There are extensions for almost anything you might want to do in an IDE (Integrated Development Environment), and they can make VS Code many times better. Unfortunately, it can be time-consuming to find the right extensions and configure VS Code. Many developers prefer the out-of-the-box experience that IDEs such as Webstorm provide. This blog post shows how Visual Studio Code extensions can help you enhance the IDE experience for JavaScript. It covers: You can conveniently install the 25 extensions that convert Visual Studio Code into a full-blown JavaScript IDE with the JavaScript IDE Extension Pack. Icon or color themes and keyboard shortcut maps are not covered here, nor are they included in the extension pack because they depend much more on personal preferences than most extensions. Let’s go into the different features and see what’s possible in VS Code with just a few extensions: Code completion (IntelliSense) features can make writing code faster and easier. Visual Studio Code provides IntelliSense for JavaScript and TypeScript by default and contains powerful Emmet support for expanding snippets. One of the latest trends in code completion is AI assistants. However, my experience with AI code completion assistants such as GitHub Copilot and Tabnine was mixed so far, and therefore I’ve not included them in the extension pack, but they might work great for you. Here are a few snippet extensions that can boost your productivity: The ES7 snippets extension provides many expandable everyday snippets. For example, defining imports and exports, creating methods and loops, and returning Promises. The extension also contains many snippets for React and GraphQL. With the Emmet Live extension, you can preview your Emmet output while crafting the Emmet abbreviation. You can start it with the Emmet Live command. When writing tests or creating mockups, it often takes time to come up with good fake data. You can use the vscode-random extension to generate many kinds of random data, such as numbers, locations, emails, IPs, names, and DateTime values. The best time to get feedback on your code is while editing, i.e., when you can quickly change the code and learn as you go. By integrating linting, spell checking, and other suggestions into your editing process, you avoid some of the more extended pre-commit checks and pull request round trips. It is easy for typo and small spelling errors to slip into variable and function names, strings, comments, etc. The Code Spell Checker extension highlights those mistakes and can often provide the correct spelling as a fix. ESLint is the most commonly used JavaScript linter. It helps you „find and fix problems in your JavaScript code.“ ESLint is very extensible and configurable, and many teams have their own custom rules for their projects. The ESLint extension shows errors and warnings directly in your editor and lets you quick-fix them easily.
