10 VSCode plugins that will make your life as a software developer easier
In my time in uni and the years I’ve been working 9–5 jobs, I’ve learned that no matter how good you are, you can always do better ( WOW 🤦♂ right?). Most of the time this “better” thing comes from your hard work, continuous learning etc. but there are moments when you can just do better by having the right tools. I’m gonna show you 10 vscode plugins that will make you more productive and your life easier when developing apps + a few more at the end of the article that I personally enjoy using. So without further ado:
1. Sonarlint
Sonarlint will help you detect code smells faster in your development phase. It will highlight issues on the fly, showing them in a separate tab under your main window.What’s cool about this linter is that it also explains why is that line/part of the code considered and issue and it provides you with a best practice solution to replace it with.
2. Angular Language Service
As a fullstack developer, building web apps is part of my (almost) daily routine, so I ended up working on an angular application. Angular Language Service will save you a lot of time by providing a rich editing experience for Angular templates, both inline and external templates including:
- Completions lists
- AOT Diagnostic messages
- Quick info
- Go to definition (this was the most important thing for me)
4. Prettier — code formatter
Prettier is a very widely used code formatter. It has its own rules as well as support for most of the web development languages out there. If you’re working in a team, this plugin will help you be consistent when formatting the code.
Also, please remember to use prettier for code formatting and linters for catching bugs.
5. Unused CSS Classes for JavaScript/Angular/React
We’ll call this UCC to be shorter. UCC will grey out unused css classes looking for html files in the same folder as the css/scss/sass files. Please note that if you are attaching css classes through javascript/typescript code, it will result in a false positive, so keep this in mind.
6. Markdown Preview Enhanced
Most of us work with git as code versioning tool and we often are put in the position of reading the README.md file or actually writing one. MPE plugin will do a live rendering of your *.md file.
Tip: after you install the plugin, if you don’t want to use the shortcut keys, just right click inside the window and
Open Preview to the side
7. GitLens
Gitlens is one of the most used git tools for vscode. It has lots of features, but just to name a few :
- it shows you the author or the current line your cursor is on
- side by side file changes
- side bar views etc
It’s complex, be sure to check the plugin page.
8. Cassandra Workbench
Oftentimes when we develop apps, we have our dbs deployed to a docker container and in order to run some queries we’d have to connect to that container, connect to the db itself, run the queries etc. Lot of time wasted. Wouldn’t it be easier if we’d have a plugin to do that for us? Oh wait…. Cassandra workbench 😃
Even though this is particular for cassandra, there are others out there as well.
MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, SQLite, MongoDB, Redis, and ElasticSearch
9. Bracket Pair Colorizer
This plugin is neat. I don’t think I have to explain too much, as its name suggests, it gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together. Great visual tool.
10. Auto Rename Tag
Auto Rename Tag is particularly useful for frontend developers . It helps you when you have let’s say a div element that has lots of lines inside it and even though you have the html file well formatted, it’s annoying to always search for the end of tag whenever you want to rename it, e.g. transform it from div to p .
This plugin does that for you, with no configuration needed. Also works for XML files as well
Bonus
I consider the above plugins to be, mandatory is quite strong to be used here, let’s say particularly usefulfor a web developer. Actually not the plugins themselfs as much as their functionalities. If you can reach the same productivity using another plugin, feel free to do so.
As a bonus, I would also like to show you a few more plugins that I like to use in different situations.
emojisense
Adds suggestions and autocomplete for emoji to VS Code. I like to embed emojis in my work, not in code, but in files that I use to keep myself organised. For example, while writing this article, I’ve made a list in vscode with all the plugin names that I was going to talk about here. As I was writing about them, I would add a checkmark to keep track.
Paste JSON as code
Paste JSON as Code helps you to create classes/interfaces from a json . All you need is a json or as json schema and it will generate the models for you. It supports lots of languages in which it can generate the models. Very handy for fast development.
Material Icon Theme
As the name suggests, a theme package for your vs code editor. It beautifies your editor a bit. It’s quite customisable, for example you can set the opacity of the icons, or the color saturation, but as most of us are not UI designers, we have terrible taste when it comes to colors so I suggest not to mess with them 😆
As an alternative you can check out Gruvbox Material Icon Theme as well.
Conclusion
That wraps up our useful plugin list, but then again, the most useful plugins are the ones YOU need for YOUR particular job. What I’ve shown you here are plugins that I found myself in need to use most of the time.
See you on the next one 👋