A good editor is key to writing good code. A good editor will have a lot of features that help you write and manage your code, as well as a nice interface that makes it easy for you to navigate around.
There are many editors out there that have a lot of great features, but one I particularly like is Visual Studio Code (VS Code). It’s free, it has tons of extensions that make it even more powerful than it already is, and it works on Mac, Windows, and Linux.
Table of Contents
Best Visual Studio Code Extensions
Bracket Pair Colorizer
The VS extension Bracket Pair Colorizer matches corresponding brackets in your code with the same color. This is a great help when you’re working with things like nested components, objects, or functions that all have brackets or parentheses.
With this simple extension, it’s much easier to find matching pairs and understand your code. The biggest advantage of this extension is improved navigation and accessibility. It also makes it easier for others to read and understand your code.
Better Comments
Better Comments is an extension used for writing human-friendly comments in your code, which is helpful for you and anyone who is reading source code (especially for teams). Descriptive, human-friendly comments save so much time for everyone involved.
With this VS extension, you can use the following characters after a double forward slash // to add easier commenting:
*for highlighted text!for errors and warnings?for queries and questions//for strikethroughTODOfor to-dos
Snippets
Snippets are an excellent add-on for productivity. Snippets is a collection of various extensions for the most commonly used programming languages. The React Snippet is a popular extension, for example, that allows you to use and create shorthands for things you do over and over again.
Some popular options are:
- Angular Snippets (version 11)
- Python
- JavaScript (ES6) code snippets
- HTML Snippets
- Vue 3 Snippets
Example with JavaScript
CSS Peak
CSS Peak is a great extension for web developers, as it allows you to “peek” at the styles for CSS classes, ids, and even HTML tags. This extension is similar to the Brackets feature called CSS Inline Editors.
CSS Peak supports symbol definition tracking for any CSS selector, for example:
- Peek: load a CSS file inline for quick edits (
Ctrl+Shift+F12) - Go To: jump directly to a CSS file (
F12) - Hover: show the definition when hovering over a symbol (
Ctrl+hover)
From GitHub
Prettier
The Prettier extension is a formatter that helps to keep code style consistent. You can configure your settings however you need and save with shortcuts. Prettier is one of the most popular code formatters out there, with over 38.5k stars on GitHub.
Prettier will automatically fix formatting issues in your code, like fixing the mix of single and double-quotes or an irregular use of semicolons.
This extension works with the following technologies: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML, and more.
From DigitalOcean
Relative Path
Relative Path is a great extension for writing import statements. You can easily get the relative path for any file using shortcuts in your workspace. Instead of searching for file’s location, you only need the file’s name, and the extension will provide the relative path from the current location to that target file.
Note: It will require some configuration if you’re working with a large mono-repository.
Icons
Icons allows you to create descriptive icons to help differentiate between files and folders. This makes your code more visual, so it’s easier to work as teams, return to code after some time, or even just make the experience more fun. For example, you could change the color of a default folder icon using the command palette.
There are a few different Icons extensions, including
- vscode-icons
- Material Icon Theme
- Material Theme Icons
- Simple icons
GitLens
The GitLens extension combines the capabilities of Git with VSCode that allows you to visualize code authorship via Git. GitLens is great for understanding code better, so you can learn who, why, and when code was changed. It also allows you to explore the history and evolution of a codebase.
It also has many other features to use such as:
- Revision navigation through file history
- A current line blame annotation at the end of the line showing the commit
- A status bar blame annotation for the commit and author who last modified the current line
Import Cost
The Import Cost extension helps with productivity by showing the estimated size of an import package. This helps to avoid issues by tracking the size of added dependencies.
If an import is too large, the Import Cost extension will warns you so you can reconfigure based on the requirements you set.
Markdown All in One
Markdown All in One is a very useful extension for all things markdown related. It adds features like auto-preview, shortcuts, syntax autocomplete, and more. Markdown is commonly used across many tech fields, and this extension makes it even easier to work with, boosting productivity and speed.
With Markdown All in One, you can use shortcuts to alter text and add things like bold, italics, etc. It also has useful automations for working with things like lists and math. Here are some common commands:
- Create Table of Contents
- Remove section numbers
- Toggle code block
- Print current document to HTML
best vs code extensions for javascript
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
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