Visual Studio Code is a great Javascript IDE and one of the most popular editors in the world.
One of the reasons VS Code is so popular and widely used is because it comes with a huge library of extensions that you can use to add extra functionality to your editor.
If you haven’t used extensions before, it’s worth taking a moment to play around with them and see what else your editor can do for you.
In this guide, we’ll explore some of the best and must-have Javascript extensions for Visual Studio Code in 2020.
Best Javascript Extension For Visual Studio Code
JavaScript (ES6) Code Snippets
This extension allows you to increase your productivity by working with a predefined snippet set. You can customize the snippets to match your preferences by installing other packages or building your own.
The customization options for building your own snippets is where its power relies on, I haven’t done much of it on my own, but I do install additional plugins to get helpers for React , React Native, Redux and more. Just google “VS Code code snippets” plus your framework, and you will find a set that works for you.
Download JavaScript (ES6) Code Snippets
ESLint
ESList is one of the most popular and beloved extensions among JS developers, without a doubt. The extension runs ESLint rules on your code and integrates the result within the editor. It allows you to detect and quickly fix rule invalidations. It’s a must-have for all JS developers as it helps improve productivity and the quality of the code.
Prettier
Prettier is an opinionated code formatter that integrates with VS Code, Visual Studio, Atom, Vim, Sublime Text, and many more. This handy little extension makes your codes consistently formatted and properly indented and presents colored keywords for more readable code.
It reduces the formatting effort and thus increases productivity. It helps produce high code readability.
Download Prettier
Quokka.js
Quokka.js provides rapid JavaScript prototyping in your VS Code editor. It is a live playground for JavaScript and TypeScript. It is often called the modern-day scratchpad for JS developers.
Have you ever wanted to try something quick, and you end up on your browser’s console to run some JS? Or do you start the node process on a terminal and try it there? This extension’s primary purpose is to run code fast and conveniently right there in your VS Code editor.
Download Quokka.js
REST Client
REST Client is a VS Code extension that allows you to send an HTTP request and view the response directly in VS Code.
It is Postman for VS Code with the convenience of being integrated into the code editor. REST Client supports both REST and GraphQL APIs
best typescript extension for visual studio code
TypeScript God 🔱
This extension gives you the ability to code like a god when writing in TypeScript! Essentially, it raises the level of tooling support for TypeScript in VS Code and adds tons of features on top of the existing ones already in VS Code. It includes features like block comment generation using code snippets, run live demos of the script being edited, auto-closing JSX tags, and loads more
Benefits: helps you to write cleaner, more readable code, faster
typescript, react, snippet, javascript, productivity
TypeScript Toolbox 🧰
TypeScript Toolbox provides improvements on the built-in extensions that come with VS Code. It lets you add and optimise imports as well as auto generate getters, setters and constructors
Benefits: lets you improve on the pre-existing code generation tools of VS Code
typescript, programming, vscode, programming tools, vscode extension
TypeScript Importer ⬆️
This extension automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion items to allow code completion.
Benefits: saves you time
imports, productivity tool, developer productivity, automation, coding
Code Spell Checker ✅
This one does what it says on the tin: checks the spelling within your code! It supports English US and English GB, with additional add-on dictionaries available.
Benefits: spots errors in your code, reducing potential bugs in production
linter, spellchecker, json, source code, multi-root ready
Kite Autocomplete 🪁
Kite is an AI-powered programming assistant that helps you write code faster by saving you keystrokes and showing you the right information at the right time. Kite supports all major programming languages, including TypeScript of course.
Benefits: saves you precious coding time
autocomplete, snippets, typescript, typescriptreact, method completion
ESLint ⚠️
VS Code does not come with a built-in linter so ESLint is a popular one which also supports TypeScript. The extension integrates ESLint into VS Code so you can see linting errors right in the editor and even fix them with Quick Fixes.
Benefits: helps you to adhere to clean coding practices to make things easier to read, either for yourself or others
linter, eslint, vscode, javascript, software development
JavaScript & Typescript Nightly 🦉
JavaScript & Typescript Nightly enables the nightly build of TypeScript (typescript@next), replacing VS Code’s built-in TypeScript version used to power JavaScript and TypeScript IntelliSense.
Benefits: helps to ensure that the codebase stays healthy
nightly build, code health, javascript, typescript, vs code extension
MoveTS 📩
MoveTS is pretty self-explanatory; it allows you to move TypeScript files and folders and update their relative imports paths in your workspace
Benefits: successfully transfer your TS files with minimal effort
import, refactor, relative, imports, typescript
Snippets ✂️
Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. Code Snippets enhance your VS Code experience by adding a slew of import/export triggers, class helpers, and method triggers.
Benefits: saves time and boosts productivity
snippets productivity, typescript, vscode, developer tools
Ponicode 🦄
If you choose to install just one extension from this list, we would have to recommend Ponicode 😉 Ponicode allows you to create, modify and visualise your unit tests in seconds, boosting your coverage with AI-powered test generation.
Benefits: assists you in the task of unit testing, saving you time while ensuring your code is well tested
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines