How to make Visual Studio Code your L-IDE-saber
Hi! I hope you’re not facepalming because of the bad pun in the title. The content of this post is serious, I promise!
There are enough things that can get in our way and mess with our flow and productivity as developers. Our IDE shouldn’t be one of them.
I recently joined a new project and with it came the question of which IDE to use.
In my previous project, I was using IntelliJ because I was programming in Kotlin and using Spring Boot. In my new project, I’m using Python. I enjoyed using IntelliJ and especially its refactoring capabilities and the way testing is integrated.
However, I also enjoyed Visual Studio Code (VSCode) for prior JavaScript and TypeScript development. VSCode feels more lightweight and snappier than IntelliJ.
Luckily, I had one day in between the projects where I had to do some admin stuff but mostly time to get ready for the project. I used this time to dive into VSCode and see if I could improve my setup.
What features do I expect in an IDE?
- Syntax highlighting
- Autocompletion
- Git integration
- Terminal
- Debugger
- Linting
- Test runner
- Refactoring
- Automatic formatting
- Custom key bindings
- Task definitions
- Extensions
It’s an extensive list and with the right extensions and customisations, VSCode can do all of them
Let’s go through the features and see what I did.
Syntax highlighting
There is out-of-the-box syntax highlighting, however, I’m using the extensions Python and AWS boto3 and HashiCorp Terraform to enhance it.
You will find extensions for most technologies and I feel like syntax highlighting helps a lot with readability.
One other thing to mention here is the theme. I’m using Aura Soft Dark.
There are certain preferences that I developed over the years. For example, the colours green and red belong to tests. I don’t like themes that use red or green as part of their theme. I also don’t like themes that just use shades of one color, I like the colours of my theme to be distinct but in a visually appealing manner.
Aura uses less common colours and is visually appealing. Love it!
Autocompletion
Now this one is hard to get right in a dynamically typed language. I’m currently using IntelliCode Completions and Amazon CodeWhisperer (part of the AWS Toolkit).
I’m not yet sure if I will keep CodeWhisperer yet, time will tell if my linter will catch potentially wrongly generated code.
I only just started with the project, so I can’t comment much yet.
Git Integration
VSCode has a git integration that is decent for the standard git functions like committing, pushing and handling branches. I use 2 extensions here.
The first one is GitLens. GitLens shows for any given line who was the last person to change it and when and with what commit (that’s why they call it blame).
The second one is GitLive. GitLive is for real-time collaboration which I don’t use GitLive for. However, it also shows you merge conflicts from other branches in the repo. This way you can check with your teammates what they’re doing and proactively avoid merge conflicts.
Terminal
Not much to say here. Just that you can configure VSCode to open a specific terminal if you’re using multiple.
Debugger
Not much to say here either. I always feel stupid, if I have to resort to the debugger to figure something out. I found that, if there is an expression that I need to validate in a debugger, then I should probably write a test for it.
Linting
I throw linting, static code analysis, and dependency scanning in the same category. Any analysis of my code that tells me what I should improve.
The Python extension that I mentioned comes with pylint, a common python linter that I’m using
I also use Sonarlint and Synk for further code analysis.
You can connect both of these with backends to get specific project settings if you’re using them.
Test runner
This is a big one. Out of the box, you don’t have a test runner configured.
You can use the Test Explorer UI extension to enable the testing UI. Then you need an extension for the language you’re using to hook it up to the testing framework.
I’m using the Python Test Explorer for Visual Studio Code extension and it works like a charm. Another great feature of it that I use a lot is that it will add a run and debug link above your tests in your test file so that you can quickly run your test without having to leave the file.
Refactoring
VSCode offers refactoring features such as variable and method extraction, as well as symbol and file renaming. I adjusted the key bindings here to something more approachable.
Automatic formatting
For JavaScript, there is the Prettier extension but you can get auto-formatting by simply adjusting the configuration. I have format on save and format on paste enabled.
Custom key bindings
I already mentioned this. You can and probably should do this.
Task definitions
You can create task definitions in VSCode without any extensions. I used this once in a mono repo, where we had multiple services that would have to be started for the UI to render anything.
Extensions
I mentioned several extensions already. However, there are some more that I didn’t, which are little extras instead of essentials.
TODO Highlight: This extension applies a special format to TODO comments so that you can spot them easily and makes them hard to ignore.
Todo tree: This extension creates a menu entry that lists all the TODO comments in your code base.
Thunder client: It’s basically Postman but in VSCode. It’s not as feature-rich, but I’m not a fan of extensive use of Postman anyway. I rather have my tests right in my code base. I use this more for exploration to send one-time requests.
Settings
When migrating over from IntelliJ, I also adjusted some settings to make my life easier:
- Autosave with a 1 second delay
- Hide all tabs. I hate closing all open files and finding the file in a mess of open files. Hence, I hide all tabs and simply use option+tab to navigate between the recently opened files.
My setup (without revealing any details about the project or client) looks like this:
If you take a closer look you might be able to identify the different extensions in the menu. I feel like it’s extensive enough to have everything I want without being too cluttered.
I also really like how the parts that belong to the tests are visually separate from the code without clashing. Shoutout to Dalton Menezes for his awesome theme!
I hope you can take away some inspiration for your setup and if you want to recommend any settings or extensions to me, please leave me a comment.
