ESSENTIAL JavaScript Extensions for VS Code in 2024

If you're working with JavaScript in 2024, you need these extensions!
1. Quokka - marketplace.visualstudio.com/...
2. Prettier - marketplace.visualstudio.com/...
3. Github Copilot - marketplace.visualstudio.com/...
4. Tabnine - marketplace.visualstudio.com/...
5. Postman - marketplace.visualstudio.com/...
6. Thunder Client - marketplace.visualstudio.com/...
7. Es7 + React Snippets - marketplace.visualstudio.com/...
8. Turbo Console Log - marketplace.visualstudio.com/...
9. Astro (or other framework) - marketplace.visualstudio.com/...
10. Live Server - marketplace.visualstudio.com/...
Bonus - James Q Quick Theme (I'm biased) - marketplace.visualstudio.com/...
*Newsletter*
Newsletter 🗞 - www.jamesqquick.com/newsletter
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*TIMESTAMPS*
00:00 - Intro
00:28 - Quokka
01:49 - Prettier
02:58 - Github Copilot
04:15 - Tabnine
04:44 - Postman
06:37 - Thunder Client
07:06 - Es7 + React Snippets
08:00 - Turbo Console Log
09:15 - Astro
10:25 - Live Server
11:53 - James Q Quick Theme
12:07 - Cascadia Code Font
12:20 - Extensions to Remove
13:45 - Wrap Up

[@AlexandreMoreauLemay]

Thanks for the video James. We recently replaced Prettier with Biomejs for our codebase lately, and now with 97% compat with prettier, definitely worth checking out

[@sun33t]

Thanks for the video James! If anyone else was wondering...you can set editor.linkedEditing to true in your settings.json to enable automatic renaming of linked tags when you've removed Auto Rename Tag

[@sandrinjoy]

Thanks

[@xeco5673]

nice collection! Thank bro~

[@murtadha96]

Thank you ❤

[@shakapaker]

Dotenv extension is for syntax highlight in dotenv files

[@j2devstudio]

I saw pretty typescript errors icon in the opening of your video and I hoped you would talk about it. Curious about your opinion

[@Lord_zeel]

Great Chrome extension if you are sick of hassling with "live server" extensions is called "LiveJS" - it's fantastic, albeit somewhat brute force. Rather than something that talks to the server over a socket to find out where a file is updated, but inevitably breaks or just fails to work in certain environments, this just keeps reloading your JS and CSS files by fetching them over and over, then applies the changes if they aren't the same. This works even works when you have to work on legacy code - PHP stack with plain CSS, loads of JQuery, all sorts of random junk? Not a problem at all. And no special server required.

[@alexandrmeyer]

wow, I actually found a couple, that I never tried. Earlier I created my own custom console log snippets, that do file names, and so on as I didn't know about that Turbo Console Log

[@UmanPC]

Great video. Tnx

[@DontFollowZim]

Oxford comma is for lists of things in English where you have a comma before the "and" and the last item in the list. In code, it's a trailing comma or dangling comma. I don't use copilot because I don't want to pay for it. Tabnine was more of a nuisance back when I used it. I use Cody AI. "Go and find snippets"... Nah. I create my own so they're more useful to me. There always either a little cruft or some missing useful bits.

[@DoctorSoulis]

Thx James! I think you would love the vsc extension of Error Lens for better error visualization.

[@Microphunktv-jb3kj]

yeah im using it.. its pretty decent ... sometimes the lenght gets crazy tho, if some frameowrk or library has really bad error handling / reporting , and no truncating with large files... sometimes, it bugs out tho..... have to refresh your window , in general the virtual ertror lens good... i think there wa some other lens as well, ah package lens was the name i think... :D quiet good for upgrading ur depency list and showing you wich packages are out of date.

[@DoctorSoulis]

@@Microphunktv-jb3kj Any vsc recommendations my friend?

[@williammckeever4790]

Thank you for posting this. Just installed this and is a great extension!

[@DoctorSoulis]

@@williammckeever4790 Glad I could help.

[@BRODZELi]

Svelte is awesome!

[@deatho0ne587]

Like single quotes due to it is one less keystroke, but yes just let prettier handle it unless it bugs you. My issue with at least Tabnine is every time I have tried to use it my computer lags, maybe the computer is not all that powerful though.

[@espindolagustavo]

my favorite extension: codegpt ❤ you can use a lot of open source llms inside VS Code

[@Aedaeum]

Just an FYI, I wouldn't recommend thunder client to anyone anymore since they now limit the amount of requests you can do unless you pay for a license. If you read the extension reviews, you'll see all the drama.

[@jitx2797]

Woah what I have to pay to make a request. Damn

[@ahmedelnawawy2458]

Thanks for the video James. if you have another extension to be removed, it will be a helpful video.

[@JoelChan611]

Thanks James. I switch to Codeium from Tabnine that could generate a block of code for free.

[@stevereid636]

I did the same. I did like Tabnine, but Codeium is a rockstar by comparision and has saved me so much time and typing 🤩

[@davidezih3510]

For anyone wondering how to activate the auto-rename tag feature in VS CODE, which he mentioned at the end but never clarified how to activate -- you'd need to add the following propery to your vs code SETTINGS.JSON file (which you can reach from the command pallette, Ctrl + Shift + P) : "editor.linkedEditing": true

[@godwillmonthe1249]

Ooh damn, I missed the free coupon😭😭 only pain.. At least the 60% one worked😍😍. Thx Mr Quick

[@mikleta]

Same, was so exciited because I thought I was going to get it for sure since I got to the video rather early, oh well... thanks anyway for you kindness James!

[@darkoplax7688]

wait how did he auto rename without the extension ? he didnt explain it there at the end

[@loic.bertrand]

5:50 interesting to see that this extension has the same bug as the Postman app where it doesn't prettify the JSON response anymore 😂

[@DetlefDumpelmann]

You can get it to work when switching to other option and then switch back.

[@colbyfayock]

i need turbo log 👀

[@konradlesniak492]

Copilot 100$ per year and is really great :)

[@engineeringmadeasy]

Hi, I'm New to your Channel. Are a Developer, Software Engineer? What's your role mate?

[@ulrich-tonmoy]

i used live server before but now for Vanilla i use vite

[@RobertMcGovernTarasis]

Was excited for a second that the 100% discount would work, then got to the billing page. Curses. Still thanks for the opportunity

[@BReal890]

hello what is the font and theme you use?

[@lonecreeperbrine]

u even watch the video ?

[@BReal890]

I miss this section, now I see thanks

What browser are you using?

[@ste-fa-no]

I believe that's Arc browser, only available for macOS, but Windows coming soon

@@ste-fa-no the top of the browser window somehow doesn't look like Arc to me though 🤔

[@mariogutierrez4989]

the request extension is better than postman, no gui needed, just plain http text file

[@abhijeetchaudhari6652]

Use ninja console as well

[@AllCreativeGaming]

I did notice that lol. The 100% was invalid the minute the video went live but the 60% was and still is available. I watch a great many KZbinrs that use this marketing scheme to drive traffic to their sites. I have tried to further my knowledge in my journey to become a Full Stack Developer for a while and prior to that I was polishing my knowledge base on various programming languages. Each time I saw a scheme like this, I would foolishly dive on in like a dog seeing a bowl of food for the first time. I was always amazed at how the 100% never existed but the 30 - 60% always worked. Like now I tried it again and the 60% still works but I have not used it, so others may benefit.

[@TheTomislavb]

Stop with the 💉

[@AllCreativeGaming]

@@TheTomislavb 🤣😂😅 best laugh I have had in ages princess.

[@ferdinandtorggler]

In my opinion Codeium is the best AI autocomplete.

[@AlThePal78]

quokka is okay but once you save it, it does not work anymore it is a waiste of time

[@davidezih3510]

Not so. Whilst in the saved file, you need to use the command pallet (CTRL + SHIFT + P), and search QUOKKA, then select the "Start on current file" option. Hope it helps.

[@NuncNuncNuncNunc]

Would copilot pass code review? No null check, use of sort instead of toSorted, handcoded comparator instead of using localeCompare. Maybe this is all fine for your use case, but I can see this being an issue in many cases. Multiply this by all copilot snippets and applicable style violations.

[@pythagoran]

Vim Motions is absolutely essential if you're thinking about moving to a _real_ editor

[@simpingsyndrome]

VS code is like a black hole that suck all of my RAM

[@DoNotKillThePresiden]

Unlike most of them, your latest video was a complete waste of my time 😅

[@iriel492ki]

cringe