DEV Community

Cover image for Create VS Code Extension with React, TypeScript, Tailwind

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 ...
Collapse
 
mattveraldi profile image
Matteo Veraldi

The quality of this post is UNBELIEVABLE. Thank you very much, it covers basically everything I need to get started! 🎉

Collapse
 
wwayne profile image
wwayne

Fantastic share! Thank you for the outstanding post.

Collapse
 
fidalmathew profile image
Fidal Mathew

Awesome! Thanks for sharing!

Collapse
 
rakshit47 profile image
Rakshit Raj

Thanks for commenting, all these appreciations helps a lot.

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

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!

Collapse
 
rakshit47 profile image
Rakshit Raj • Edited

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

Collapse
 
florianrappl profile image
Florian Rappl
const cssStyle = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, "media", "vscode.css"))
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
rakshit47 profile image
Rakshit Raj

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. 👨‍💻

Collapse
 
florianrappl profile image
Florian Rappl • 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).

Thread Thread
 
rakshit47 profile image
Rakshit Raj

Thank you sir 🫡, I'll keep that in mind

Collapse
 
yogini16 profile image
yogini16

Nice one!! Thanks for sharing

Collapse
 
rakshit47 profile image
Rakshit Raj

Glad you liked 😇

Collapse
 
ricardogesteves profile image
Ricardo Esteves

Bookmarked! 👌

Collapse
 
rakshit47 profile image
Rakshit Raj

🥳

Collapse
 
docba profile image
Docba

thank you for sharing!

Collapse
 
akbatra567 profile image
Akshit Batra

Great article, seems like now I need to start thinking what extension to make.

Collapse
 
rakshit47 profile image
Rakshit Raj

For sure, glad you liked it.

Collapse
 
unuts profile image
natsuki ueda

Thank you for your example! This helped me from some errors.

BTW, (this might be a beginner question), what does it mean not using webpack as bundler? How is typescript code transpiled into js without any bundler?
In my case, There are three options(webpack, esbuild and unbundled).

Collapse
 
essijunior profile image
NDANG ESSI Pierre Junior

Wow!!! Thanks alot