As I have stated in my setup-page, I use VScode as my main text editor. I especially like the ability to customize your coding environment with extensions. Today, I will share the extensions that really give a boost to my work.
This first extension allows me to better manage and organize my annotations while coding. When starting comments with alerts (!), questions (?), TODO’s (TODO), or important tags (*), this extension automatically colors them to make them stand out more. This makes it so I can more easily find the information I’m looking for, and it has saved me more time than I initially expected.
This is a no-brainer, as it does exactly what the title suggest. Whenever you edit a HTML tag, it automatically renames the corresponding closing (or opening) tag. As I’m an avid believer in thinking as little as possible, I like how this extension gives me one annoying task to worry about.
Talking about annoying tasks, having to change whatever text you have placed inside of quotations or brackets can be quite a pain. Embarrassingly enough, I find myself missing the intended block of text by one character quite often. This extension solves this issue by assigning a shortcut to instantly select the whole contained element by pressing option+a (alt+a for windows/linux).
For when you want to quickly set up a HTML project, this extension makes the initial step a bit quicker. Start typing html and enter, and you will immediately create a start to work from.
I often find that working on the web with Jupyter notebook can get pretty annoying, as I miss having the convenience of my editor. This extension makes it so you can simply create notebooks in VScode. An added benefit is that it makes it easier/quicker for me to open downloaded notebooks, as they will simply open in Vscode without having to first navigate to the desired file.
When working on HTML projects, it can be nice to preview what my site looks like without having to localhost to a browser. That’s where this extension comes in. Keep in mind that this extension does not work when integrating other languages into your HTML, as this HUGO blog for example fails to render properly.
These extensions help render your Markdown files inside of VScode. As README’s, my thoughts and this blog are all written in Markdown, i find it useful to preview it from time to time. The Mermaid support is also very welcome, as I regularly have to adjust designs on the fly. I may create a Mermaid tutorial in the future, as it is a very interesting tool in general.
This extension simply creates more visually distinct icons for your folder structure in VScode. I find the default file icons to be too indistinguishable for my taste, and this extension helps a lot in that regard.
This one is probably one of the better known extensions out there. It is an opinionated code formatter supporting a lot of front-end languages. As I am not well versed with these languages, this extension helps me learn best practices all the better, while saving time in the process.
I hear quite a few people complain about how VScode looks to cluttered to them. Base VScode actually has a solution in the form of Zen Mode. Just press control + K M. I often forget this shortcut, and this extension simply gives you a button on your menu to toggle it. Very convenient if you ask me.
This is the theme I use for VScode. Theme really does not matter much if you ask me, but people kind of make a big deal out of it sometimes. I find this one to be easy on the eyes, but any theme (yes, even if it’s a light theme) is fine as long as you like how it looks.
VScode really is like a Swiss army knife when it comes to text-editors. It has many themes, shortcuts you can customize, and extensions to tailor it to your needs. Besides all of that, it supports almost all major programming languages, making it usable for nearly all my work. Because of all of this, I see myself using it for the forseeable future.
Signing off, have a lovely day!