55 lines
3.4 KiB
Markdown
55 lines
3.4 KiB
Markdown
---
|
|
title: 10 must-have VS Code extensions for JavaScript developers
|
|
shortTitle: Essential VS Code extensions
|
|
type: story
|
|
language: javascript
|
|
tags: [devtools,vscode]
|
|
author: chalarangelo
|
|
cover: computer-screens
|
|
excerpt: Boost your productivity with these 10 essential VS Code extensions for JavaScript developers.
|
|
unlisted: true
|
|
dateModified: 2021-06-12T19:30:41+03:00
|
|
---
|
|
|
|
Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. Here are my personal extension preferences for VS Code as a JavaScript developer:
|
|
|
|
### ESLint
|
|
|
|
[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) turns the popular JavaScript linter into an extension of VS Code. It automatically reads your linting configuration, identifies problems and even fixes them for you, if you want.
|
|
|
|
### GitLens
|
|
|
|
[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a very powerful collaboration tool for VS Code. It provides many useful tools for git such as blame, code authorship, activity heatmaps, recent changes, file history and even commit search.
|
|
|
|
### Debugger for Chrome
|
|
|
|
[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) allows you to debug your JavaScript code in Chrome or Chromium. Breakpoints, call stack inspection and stepping inside a function are only some of its features.
|
|
|
|
### Bracket Pair Colorizer 2
|
|
|
|
[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) makes reading code faster as it makes matching brackets the same color. This extension for VS Code improves upon its predecessor by providing improved performance.
|
|
|
|
### Bookmarks
|
|
|
|
[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) is one of those extensions that will significantly reduce your time jumping between different files, as it allows you to save important positions and navigate back to them easily and quickly.
|
|
|
|
### TODO Highlight
|
|
|
|
[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) simplifies tracking leftover tasks by allowing you to list all of your TODO annotations, as well as adding a handy background highlight to them to make them pop out immediately.
|
|
|
|
### Live Server
|
|
|
|
[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) gives you an easy way to serve web pages from VS Code, making previewing and debugging a lot easier. One of the core features is the live reload support that many developers are used to.
|
|
|
|
### REST Client
|
|
|
|
[REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) allows you to send HTTP requests and view the responses directly in VS Code. This extension supports a wide range of formats and authorization and should work with most setups.
|
|
|
|
### One Dark Pro
|
|
|
|
[One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) is one of the most popular VS Code themes and with very good reason. It provides a clean theme with a nice palette that has great contrast and is very comfortable to use on a daily basis.
|
|
|
|
### Fira Code
|
|
|
|
[Fira Code](https://github.com/tonsky/FiraCode) is not a traditional VS Code extension and might take a couple more steps to set up, but it's a superb programming font with ligatures that will help you scan code faster once you get used to it.
|