DEV Community

Create VS Code Extension with React, TypeScript, Tailwind

Rakshit Raj on February 26, 2024

TL;DR This article also deals with basics of Making of VS Code Extension other than react, typescript, tailwindcss. For just get to the ...

Read full post

Fidal Mathew • Feb 27

Awesome! Thanks for sharing!

Rakshit Raj • Feb 29

Thanks for commenting, all these appreciations helps a lot.

Anmol Baranwal • Feb 27

Saving it for later. It seems detailed and will surely help in the future :D
Gonna read it in a day or two.
By the way -> you only have 1 commit. LOL!

Rakshit Raj • Feb 28 • Edited

Actually I followed this blog and made it in one go, that's why 1 commit #promotion 😁

Florian Rappl • Feb 28

const cssStyle = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, "media", "vscode.css"))

These lines (i.e., the mentioned one and lines, e.g., to reference an image) are totally unnecessary. You anyway use a bundler. Configure the bundler to inline the resources as base64 data URLs. The result will be also faster as you don't need to go over the extension bridge; it's already loaded (and don't forget - files are anyway served through the bridge).

In general I'd also recommend CSS-in-JS for VS Code extensions. It's just a much simplified / improved DX and you don't get any perf hit as JS is running anyway + it's all coming from local bridge.

Besides that - nice article!

Check out the Piral VS Code extension if you want to see how such tricks can be applied (and more): github.com/smapiot/vscode-piral

Rakshit Raj • Feb 29

Actually after going through all these bundlers webpack, babel, rollup, I found parcel the fastest.

Although I don't have much depth knowledge in parcel but CSS-in-JS was only available for CSS not Tailwind. For Tailwind there was a sperate section, for sure looking forward to learning it.

Thanks for suggesting, I will keep that in mind onwards. 👨‍💻

Florian Rappl • Feb 29 • Edited

Actually after going through all these bundlers webpack, babel, rollup, I found parcel the fastest.

Hm, not sure if you wanted to write that to my comment? I never questioned that. But now that you bring it up - it's not. If you care about performance you'd pick either Vite, rspack, or esbuild. The last one is certainly the most performant, but comes with the least DX - however, sufficiently enough for that scenario.

CSS-in-JS is quite bundler independent. After all - the only thing you need is JS (every web bundler handles JS).