Photo by Ali Zolghadr on Unsplash
Visual Studio Code (also known as VSCode) is a lightweight but powerful cross-platform source code editor which runs on your desktop. With built-in support for development tools like TypeScript and Chrome debugger, I quickly fell in love with it the more I used it to build my projects.
Who doesn’t love the bajillion open source extensions available for the public to use and contribute to?
If you’re looking for more tools to add to your development kit, I hope this article helps you find a new tool to adopt.
Not all of these tools are specifically for the JavaScript language, but they’re tools for JavaScript developers like you and I who share a common interest. As a JavaScript developer, I will share what enhances my development flow.
Here are 26 VSCode tools for JavaScript developers in 2019.
. . .
1. Project Snippets
The first one is my all time favorite, project snippets — derived from the built-in original user snippets in VSCode.
If you’re not familiar with user snippets, this feature allows you to create your own code snippets to reuse throughout your projects.
But what exactly does it mean to “reuse” them?
Well, if you often find yourself writing any type of boilerplate like the one below:
You can actually just put that right into your user snippets, so instead of having to write out (or copy and paste) the entire thing, you only need to type a custom prefix to generate the snippet that you configured it with.
If you go to File > Preferences > User Snippets, you can optionally create a new global snippet by clicking New Global Snippets File.
For example, to create your own snippets file for a TypeScript React project, you can click New Global Snippets File, type in typescriptreact.json and it will direct you to a newly created .json file that you can use for React applications built using TypeScript.
To create a user snippet from the code example above, this is how you would do it:
With that in place, you can create a new TypeScript file ending with .tsx, type in the prefix rsr and a suggestion to generate the snippet will appear.
Pressing tab on that popup will generate this snippet:
The issue with this, is that this will persist through all of your projects(which in some cases can be powerful for general snippets).
Some projects will be configured differently, and a global file to configure snippets starts to become a problem when you need to distinguish between specific use cases.
When project structures are different for each project:
This might be sufficient for a project with that specific file/folder structure, but what if you were working on another project where a Link component had a path like components/Link?
Notice how the three border tests wrap their values in single quotation marks: border: '1px solid red'.
This is perfectly valid in JavaScript, but what if you were using styled-components as your styling solution for a project? The syntax is no longer applicable for that workspace, because styled components uses normal CSS syntax!
This is where project snippets shine.
Project snippets enable you to declare project/workspace level snippets so your snippets don’t collide and pollute other projects. Very useful!
. . .
2. Better Comments
If you like writing comments in your code then you might sometimes find it frustrating to search for the locations of particular ones you wrote in the past, because code can get a little crowded.
With Better Comments, you can make your comments more obvious by introducing colored comments:
Now it’s easier to alert your team members with a ! or ? to bring something to their attention.
. . .
3. Bracket Pair Colorizer
The first time I saw a screenshot of Bracket Pair Colorizer, I just knew I had to adopt and introduce this into my development toolkit.
Coding is my passion and this extension definitely helps me enjoy coding even more.
. . .
4. Material Theme
Material Theme is an epic theme you can install right into VSCode to make your code look like this:
That’s got to be one of the best themes ever created — install it now!
. . .
5. @typescript-eslint/parser
If you’re a TypeScript user, you should probably start looking at moving your TSLint configurations to ESLint + TypeScript — The backers behind TSLint announced plans to deprecate TSLint sometime this year.
Projects are gradually moving towards adopting @typescript-eslint/parser and related packages, to secure a future-proof setup for their projects.
You’ll still be able to leverage most of ESLint’s rules and compatibility with Prettier using the new setups.
. . .
6. Stylelint
For me, stylelint is a must in all my projects for a few reasons:
- It helps avoid errors.
- It enforces styling conventions in CSS.
- It goes hand in hand with Prettier support.
- It supports CSS/SCSS/Sass/Less.
- It supports plugins written by the community.
. . .
7. Markdownlint + docsify
I’m not sure how you or other developers like to take notes when you’re brainstorming projects, but I like to write down notes in Markdown format.
It’s easy to understand and there’s an abundance of tools available that help facilitate the process of writing Markdown text, including markdownlint.
Markdownlint is a VSCode extension linter which assists in style checking inside your .md files. And it supports Prettier formatting!
I personally also like to install docsify on all my projects, as it supports Markdown and other enhancements for each project.
. . .
8. TODO Highlight
I have a habit of writing to-do’s in my application code, so extensions like TODO Highlight are really useful to highlight the to-do’s I set in place throughout my projects.
. . .
9. Import Cost
Import Cost is one of those tools that become very useful the first time you try it. After using it for a while, however, you might not need it anymore because it tells you what you already know. Nonetheless, try this tool for awhile — you might find it useful.
. . .
10. Highlight Matching Tag
Sometimes it can get frustrating trying to match the other end of a tag. That’s where Highlight Matching Tag comes in:
. . .
11. vscode-spotify
Sometimes it gets frustrating having to go back into your music player to switch music, and then back to VSCode to continue doing what you were doing.
That’s where vscode-spotify comes in, because it allows you to use Spotify right inside VSCode!
With this extension you’ll be able to see the song that’s currently playing in the status bar, you can switch between songs by pressing hotkeys, you can click buttons to control Spotify, and more.
. . .
11. GraphQL for VSCode
GraphQL has been growing and we’re starting to see it nearly everywhere in the JavaScript community. For that reason, it’s probably a good idea to start thinking about installing GraphQL for VSCode into your VSCode.
You’ll benefit from syntax highlighting, linting and auto-complete features when you deal with the GraphQL syntax.
I use Gatsby a lot, so my daily coding life involves reading some GraphQL syntax.
. . .
12. Indent-Rainbow
A similar reason to the Highlight Matching Tag above. If you have trouble finding your way through indentations, then Indent-Rainbow can help make those indentations easier to read.
Here’s an example:
. . .
13. Color Highlight
This is one of those extensions where everybody asks me: “Where did you get that?” Basically, Color Highlight helps to highlight colors inside your code like this:
. . .
14. Color Picker
Color Picker is a VSCode extension which gives you a graphical user interface, to assist in selecting and generating color codes like CSS color notations.
. . .
15. REST Client
The first time I read about REST Client and tried it, it didn’t seem like a very useful tool in comparison with established software like Postman.
The more I played with the REST Client extension, however, the more I realized how greatly it can impact my development tool, especially when testing APIs.
You can just create a new file and have this one line:
All you need to do to create an HTTP GET request is to highlight that one line, go to the command palette (CTRL + SHIFT + P), click Rest Client: Send Request and it will pop open a new tab with the request response details in a split second.
Very useful:
You can even pass in parameters, or request body data to a POST request, with just a couple of extra lines of code underneath:
And that will make a POST request with body parameters { "email": "someemail@gmail.com", "password": 1 }.
And that’s just scratching the surface of the possibilities of this extension. Read about it to find out more.
. . .
16. Settings Sync
I hated having to manually write down a Markdown list of notes of extensions that I use in my development tool, and saving it in a notes service like Evernote. This is where Settings Sync came to the rescue.
All you need is a gist/GitHub account, and every time you want to save your settings (this includes keybindings, snippets, extensions, etc), you just press SHIFT + ALT + U to upload the private settings to your gist account. Then, next time you login or reformat to another computer, you can immediately download your settings by pressing SHIFT + ALT + D.
. . .
17. Todo Tree
Todo Tree will help you find all the to-do’s you’ve created throughout your application code. It’ll put them into a single tree where you can view them all at once on the left side of your panel:
. . .
18. Toggle Quotes
Toggle Quotes is a fun utility extension that lets you toggle between quotes. It comes in handy when you need to switch to backticks when you’re about to use string interpolations, especially where Prettier has a habit of prettifying your strings to single quotes.
. . .
19. Better Align
You can align your code without selecting them first with Better Align.
To use it, place your cursor in the code you want to align, pop open your command palette with CTRL + SHIFT + P (or whatever your customized shortcut is to open the command palette), and invoke the Align command.
. . .
20. Auto Close Tag
Auto Close Tag has been useful to me from the day I first started VSCode. It allows you to type something like <div, followed by a slash /, and it will complete the last arrow for you.
This is something that isn’t in VSCode by default and it’s very useful to me.
. . .
21. Sort Lines
I have a habit of getting frustrated when my arrays aren’t aligned alphabetically. Luckily, tools like Sort lines exist to make my life easier.
You might find this helpful as well if you get similarly frustrated.
. . .
22. VSCode Google Translate
I might be the only one who finds this useful, but VSCode Google Translatehelps me in my projects, as I’m involved in a project that is multi-lingual.
It is useful if you don’t want to leave your editor.
. . .
23. Prettier
Prettier is an extension for VSCode which automatically formats your JavaScript/TypeScript/etc. code using Prettier.
. . .
24. Material Icon Theme
I prefer Material Icon Theme over other icon themes, because it’s a bit more obvious which files types are which, especially when you’re working in a dark theme.
. . .
25. IntelliSense for CSS Class Names in HTML
IntelliSense for CSS class names in HTML provides CSS class name completion for the HTML class attribute, based on the definitions found in your workspace.
. . .
26. Path Intellisense
Path Intellisense is a VSCode extension which auto-completes file names for you.
. . .
Conclusion
I hope this helped you find something new to add to your development kit.
