The problem - Vite

I had a strange problem with Vite, Vue and TypeScript a while back.

Normally my Vue workflow went something like this:

• npm run dev to have a browser with hot-reloading next to my editor
• Implement the story / fix I was working on
• Test & push for review

Now the error I kept having was when I pushed the code, my build pipeline kept failing, due to the fact that Vite does not run TypeScript's compiler during dev and wasn't catching any type errors that I made!

Github discussion
Vite docs

So the 'official' recommendation is to run tsc --noEmit --watch in a separate process. This works fine, but didn't really solve my problem; instead of forgetting to run npm run build before deploying, I was now forgetting to run tsc while developing locally!

The solution - tmuxinator!

I'm a big fan of unix and vim. Since I was already using tmux for window management, I wondered if there was a way to automate my tmux sessions. I found tmuxinator!

After reading the docs, all I had to do was create a new tmuxinator project with the panes that I required.

Now when I open my terminal, I type tmuxinator start proj_name. This opens three terminal panes:

• vim with my project open
• npm run dev
• tsc --noEmit --watch so I can see any TypeScript errors real-time!

This saved me lots of time by not relying so much on my build server to catch errors.

Note that every project is different and my point is not to shill tmux/tmuxinator, but to remind you that whenever you notice certain patterns in your workflow, it could be worth automating.