Some backstory
Okay, to be honest, most of the people who start off with programming choose Visual Studio Code as their primary editor of choice. It’s not unknown that the editor itself has gathered enough reputation and appraisal in the development community for its modular architecture, “lightweight” experience and the use of extensions to turn it into a full-fledged IDE.
However, like most other apps primarily built on top of web technologies, Visual Studio Code, or VSCode, uses the Electron framework as a building block for its codebase to serve the editor experience through Node.js, which again, is definitely not the fastest experience on the market.
In fact, in my 6 years of working on different programming projects and ideas, although Visual Studio Code has been at the top of convenience, it has also been one of the slowest text editors I’ve ever used.
Zed as an editor
Recently though, I’ve forced myself out of the garden wall of VSCode and onto many other text editors as a way of learning new approaches to coding. I’ve started working with Vim motions, and I know it will take a few months to get used to, I’ve found the perfect editor for my use case as a multi-language programmer - Zed.
I mean - my first impression with Zed was with the response time it took to just “boot up” on my working laptop. The difference was really staggering when it comes to VSCode turning on with all of the extensions for C, Rust, Python, Flutter and what not - versus Zed, with all the same things but while also feeling a ton lighter.
A thing to note beforehand
All of the written materials which have been presented in this article are available in this configuration file on my GitHub so that you can check it out after reading. Now that we are done with the initials, let's get going!
Setting things up…
As show above in the image, I like quite a few “personal” touches on my editor experience, and Zed makes it very easy to do with the JSON configuration scheme.
First of all, let’s open up a terminal window and write these commands to ensure our environment is good for modification:
# Make the configuration directory for Zed.
$ mkdir -p ~/.config/zed
# Create a new `settings.json` file.
# This is where our configuration will reside.
$ touch settings.json
Now we can open the newly-made file in our preferred editor. I’ll choose vim for this instance:
$ vim settings.json
Primary configuration
In order to replicate the exact window as the image, let’s ensure that all of our panels are in place. To do this, let’s write the following code first:
{
"notification_panel": {
"dock": "left"
},
"chat_panel": {
"dock": "left"
},
"outline_panel": {
"dock": "right"
},
"project_panel": {
"dock": "right"
}
}
This will dock all of the panels (notification, chat, project outline & the primary project panel) in their respected positions.
I also like to disable sending telemetry data for all of my apps. Now if you like to do that too, paste this code, otherwise it’s just personal preference. :p
{
...
"telemetry": {
"diagnostics": false,
"metrics": false
}
}
Now we’re entering hot waters. A core part of coding is seeing our preferred font family in action - every, single, time. I’ve chosen the JetBrains Mono font as the primary monospace font here as I quite like their overall accent. We can use this code to setup our font:
{
...
"ui_font_family": "JetBrains Mono",
"buffer_font_family": "JetBrains Mono",
"ui_font_size": 16,
"buffer_font_size": 13,
}
While also setting the font family - I also like to set up Vim Mode for all of my code editors. Since I’m more of a Vim “motions” user rather than just the plain Vim editor, I enable this feature for all the supported IDEs in order to make myself write code fast. I also set the keybinds to be identical to that of Visual Studio Code’s. So, Inside the configuration file, I would do something like:
{
...
"base_keymap": "VSCode",
"vim_mode": true,
}
I also set up relative line numbers in order to quickly navigate between lines using the Vim motions. To do this, simply write the following code afterwards:
{
...
"relative_line_numbers": true
}
Advanced Configuration
Now that we’re done with the basics of configuring Zed from above, let’s move on to some more “head-on” stuff with the core utility of the editor itself.
Firstly, I always prefer to save the extensions in one way or another when I’m using a code editor. As a Flutter / Rust / Python developer, I use the extensions with the given identifiers below for my current setup:
// Automatic extension installation
{
...
"auto_install_extensions": {
"dart": true,
"git-firefly": true,
"ruff": true,
"xcode-themes": true,
"toml": true
}
}
This snippet will auto-install these extensions whenever you install Zed with the same account you use for synchronization.
Since I’ve also added the xcode-themes extensions (the color scheme of Xcode is my favorite), now I can activate it with the following configuration for themes:
{
...
"theme": {
"mode": "system",
"light": "Gruvbox Light Soft",
"dark": "Xcode High Contrast Darker"
}
}
Oh, and, since I use Python in my everyday scripting as well, I’m often in need of virtual environments in order to run them. But, unlike Visual Studio Code and some other beginner-friendly IDEs, Zed does not come with prebuilt virtual environment initialization, but it is, however, manually configurable from the settings.json file, like this:
// Automatic workspace activation
{
...
"terminal": {
"detect_venv": {
"on": {
"directories": [".env", "env", ".venv", "venv"],
"activate_script": "default"
}
}
}
}
This ensures that whenever a terminal window is opened, Zed will automatically activate the virtual environment present in the current workspace.
In our final steps of configuring, I’d like to note that the tagline of the Zed editor itself says that it is a “next-generation code editor designed for high-performance collaboration with humans and AI”, and personally even though I don’t use much AI features as a developer, I do however appreciate the convenience it provides in some sticky situations. I also use GitHub Copilot if I’m on Visual Studio Code, so to configure it inside Zed with the GPT 4o Large-Language Model (LLM), we can do something like this:
{
...
"assistant": {
"default_model": {
"provider": "copilot_chat",
"model": "gpt-4o"
},
"version": "2"
}
}
Wrapping it up
So that’s it. It has been almost a month since I have switched my complete development workflow from VSCode over to Zed, and I, ever since, have had one, “chef’s kiss” of a delight whilst traversing my various codebases with it. It’s a pleasant surprise for developers who are using Zed only for the performance and sheer customizability it provides - and it’s a fully worth-it experience for sure.
I’ll soon be writing about my language-specific Zed configurations since I found it really enjoyable to search and tweak it myself. Till then, stay tuned!
Top comments (1)
Zed is a truly awesome editor, thanks for these little config tips!