Recommended Visual studio code extensions for Javascript developers
Developing Javascript apps with VSCode extensions at ease
In this article, we'll be looking at awesome vscode extensions for Javascript developers.
Vscode is a free open-source text editing tool by Microsoft with support for developing applications using different programming languages. It has built-in Git functionality.
Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won't slow down your editor.
It has a desktop app for Windows, Linux and macOS. Find out more about Vscode
Vscode is one of the best editors a developer should've.
The following are a few amongst many extensions out there to smoothen your development experience in building Javascript apps.
Is a linting extension tool that automatically checks and analyzes codes for syntax, semantics, bugs, programmatic and stylistic errors and raises a flag. It ensures the codes are following the javascript standard guidelines. This is useful as it helps to inform and/or fix errors that will occur. This extension can be customized.
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.
On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
JavaScript syntax highlighting for ES201x, React JSX, Flow and GraphQL.
I highly recommend using this syntax highlighting with a theme that supports it.
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
Make your life easier, use code actions to do repetitive tasks for you! They can help a lot, just follow the light bulb 💡!
This VS Code extension provides various code actions (quick fixes) when editing code in JavaScript (or TypeScript/Flow). Just note the light bulb at the left and press it to learn how you can transform the code under the cursor.
Visual Studio Code plugin that autocompletes filenames.
Launch a local development server with live reload feature for static & dynamic pages.
Demo
REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
Super cool extension for developers building APIs for frontend application
Main Features
- Send/Cancel/Rerun HTTP request in editor and view response in a separate pane with syntax highlight
- Send GraphQL query and author GraphQL variables in editor
- Send cURL command in editor and copy HTTP request as cURL command
- Auto save and view/clear request history
- Organize MULTIPLE requests in the same file (separated by ### delimiter)
- View image response directly in pane
- Save raw response and response body only to local disk
- Fold and unfold response body
- Customize font(size/family/weight) in response preview
- Preview response with expected parts(headers only, body only, full response and both request and response)
Demo
This is a collection of live share and live share audio extensions. This is useful where you need to share your vscode for debugging with another developer or a team.
This extension pack includes everything you need to start collaboratively editing and debugging in real time, including integrated audio and text chat. This provides you and your team/class with a one-click installation, in order to begin pair programming, performing remote code reviews, driving interactive lectures, and more, without needing to leave Visual Studio Code.
Head over here for a detailed explanation on how to setup this extension. Enjoy!!!
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.
VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.
Add beautiful custom icons to folders on the directory
Demo
Features
- Highlight lines containing diagnostics
- Append diagnostic as text to the end of the line
- Show icons in gutter
- Show message in status bar
Here's a powerful extension beyond coding to repository and code reviews.
GitHub pull requests, GitLab merge requests, and code reviews in your IDE. Eliminate context-switching. Integrates with New Relic One observability, Bitbucket, Slack, MS Teams, Jira, Trello and more.
New Relic CodeStream is a developer collaboration platform that integrates essential dev tools into VS Code. Eliminate context-switching and simplify code discussion and code review by putting collaboration tools in your IDE.
Demo
Create and Review GitHub and GitLab Pull Requests in VS Code
Create, review and merge GitHub pull requests and GitLab merge requests inside VS Code, with full source-tree and full file access, your favorite keybindings, built-in diff tool, and code intelligence.
Super amazing!!! Find out more about codestream here
You'll be prompted to sign in to make use of it in vscode. Head over here to create an account or click on the sign up button.
Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.
Guide on how to use Peacock
Code Time is an open source plugin for automatic programming metrics and time tracking in Visual Studio Code. Join our community of over 200,000 developers who use Code Time to reclaim time for focused, uninterrupted coding. Protect valuable code time and stay in flow.
Thank you for reading this article.
Please kindly share with your network and feel free to use the comment section for questions, answers, and contributions.
Do you love this article?? please follow me on Hashnode alemsbaja or Twitter @alemsbaja to stay updated for more articles