Vincenzo

Posted on Nov 25

Switching to Zed: Made my own VSCode-Rest utility

#zed #bunjs #rest #vscode

I expressed my opinion about vibecoding and LLM usage before, and since then the dev world has gone batshit crazy about it and now every editor, OS, webapp, forces you into having to interact with a stupid AI agent that most of the time is freaking useless.

AGAIN, I use LLMs (specifically ChatGPT) day in and out, to do boring stuff, like creating tests or solving specifically small problems I can't be bothered to copy paste. ChatGPT is my StackOverflow, I want it out of my editor and possibly on my browser.

Unfortunately vscode, one day, decided to break my VSCode Minimal Setup I had run for the last few years to add bloody CoPilot bars, tabs and crap all over the place.

I had enough, so decided to give a serious go to zed.

I had only used it to try out a faster and more modern vim, so I had activated the vim-mode and gone ahead and done some coding for a couple of days, then I just uninstalled it.

after the situation with VSCode ended up like:

I decided to give it another go, especially for an amazing feature, which is vscode is not so obvious.

or if you speak settings.json

  "agent": {
    "enabled": false
  },

Yeah I know, Agentic shit is enabled by default, but it has one switch.
I am ok with that approach, I mean, I use brave as a browser and I always have to turn off all that crypto rubbish they have leftovers from the good old days where the hypetrain was bloody NFT and CryptoCrap.

Anyhow, I spent more than 2 weeks using only zed instead of vscode and I found just a few little issues, but loads of improvements.

I just set it up to use vscode keybinds and customised the one I had customised in vscode.

The UI is fast and responsive, it loads superfast both on Linux and Mac, it supports most languages natively, without any extensions, I know right?

Svelte

The only one I had to install was the Svelte language server with their extension.

Finding stuff in .env

By default if you file is in .gitignore the filescan wont show it nor you can search it, but you can fix it with this setting:

  "file_scan_inclusions": ["public/", "data/", ".env*"]

Anything missing?

I was shocked to see how productive I was with little to no extensions installed, until I hit 2 "hurdles".

Hurdle 1: Debug

Debug Tests

I have not had an absolute necessity to debug vitest, but that is something I use a lot, and I cannot find a way to make it work properly, but have not put myself into it too much.

Debug Bun

I use bun for all of my sideprojects, and debugging the main flow works (better than in vscode), but I cannot find for the life of me a way to debug bun:tests.

Hurdle 2: VSCode-rest

I use a nice vscode extension called vscode-rest and I love it.

I plop loads of those .http files in all of my sideprojects.

Those files are just a set of http calls, and their setup, they allow me to test some endpoint without switching out of the editor.

Pity that there was no extension that supports that syntax so I did what every dev on a sideproject does... starts another sideproject to help with the first sideproject.

POSO

I read some info on how to make a zed extension but it was too long and I decided I NEEDED it NOW.

So I went off and as I have done with a couple of my side projects:

tinchi - my own compact tailwind
ntrallazzu - my project launcher
kiffarino - my local md files based jira (wrote a post about it here)

I created a cli tool installable via npm.

I have build (or migrated to) all of those tools with bun, so I can use typescript without having to build, but then I compile them to a single javascript file that I push to npm.

I used this pattern so much that I created a little template too.

Anywho what did I want here?

I just wanted to re-use my http files really, nothing more complex than that.

those files are structured like so:

### getOne
get http://localhost:3003/api/tickets/01JZ5WE7A0RQTNFY0B188D8HVG

### link
POST  http://localhost:3003/api/tickets/01JZ8CRNQ7S69AHR9X541A97ZR/link
Content-Type: "application/json"

{
    "type": "linked",
    "linkedId": "01JZ8E15XQ8CZ71KXKJT6TXDG6"
}

### unlink
DELETE  http://localhost:3003/api/tickets/01JZ5WE7A1ZKRXG2WW1DWFPJPQ/link/01JZ5WE7A0RQTNFY0B188D8HVG

### udpate
PUT  http://localhost:3003/api/tickets/01JYRK01WZ69BYMSTDHMM5QR80
Content-Type: "application/json"

{
    "type": "bug",
    "status": "inProgress"
}

they have sections, you can specify named requests and add body and headers.

Another thing you can do is specify variables

@apiUrl = my.api.com/api
@someStuff = 185

GET {{apiUrl}}/things/{{someStuff}}

and, if you are a poweruser you can calculate those vars from other requests.

I decided that it was a bit too complicated to start with that depth of support so I focussed on the simpler cases of hardcoded vars, that you could overwrite via flags.

But yeah, few days in and I've got a poso that can be used.

And the code is here.

Now I can forget about vscode, until I find the next hurdle.

DEV Community