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

Пікірлер: 58

  • @sun33t
    @sun33t5 ай бұрын

    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

    @sandrinjoy

    5 ай бұрын

    Thanks

  • @AlexandreMoreauLemay
    @AlexandreMoreauLemay5 ай бұрын

    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

  • @xeco5673
    @xeco56735 ай бұрын

    nice collection! Thank bro~

  • @shakapaker
    @shakapaker5 ай бұрын

    Dotenv extension is for syntax highlight in dotenv files

  • @murtadha96
    @murtadha965 ай бұрын

    Thank you ❤

  • @DontFollowZim
    @DontFollowZim5 ай бұрын

    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.

  • @UmanPC
    @UmanPC5 ай бұрын

    Great video. Tnx

  • @Aedaeum
    @Aedaeum5 ай бұрын

    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

    @jitx2797

    5 ай бұрын

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

  • @Lord_zeel
    @Lord_zeel5 ай бұрын

    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.

  • @DoctorSoulis
    @DoctorSoulis5 ай бұрын

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

  • @Microphunktv-jb3kj

    @Microphunktv-jb3kj

    5 ай бұрын

    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

    @DoctorSoulis

    5 ай бұрын

    @@Microphunktv-jb3kj Any vsc recommendations my friend?

  • @williammckeever4790

    @williammckeever4790

    5 ай бұрын

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

  • @DoctorSoulis

    @DoctorSoulis

    5 ай бұрын

    @@williammckeever4790 Glad I could help.

  • @alexandrmeyer
    @alexandrmeyer5 ай бұрын

    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

  • @darkoplax7688
    @darkoplax76885 ай бұрын

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

  • @j2devstudio
    @j2devstudio5 ай бұрын

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

  • @davidezih3510
    @davidezih35105 ай бұрын

    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

  • @BRODZELi
    @BRODZELi5 ай бұрын

    Svelte is awesome!

  • @espindolagustavo
    @espindolagustavo5 ай бұрын

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

  • @deatho0ne587
    @deatho0ne5875 ай бұрын

    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.

  • @JoelChan611
    @JoelChan6115 ай бұрын

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

  • @stevereid636

    @stevereid636

    5 ай бұрын

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

  • @godwillmonthe1249
    @godwillmonthe12495 ай бұрын

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

  • @mikleta

    @mikleta

    5 ай бұрын

    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!

  • @ahmedelnawawy2458
    @ahmedelnawawy24585 ай бұрын

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

  • @loic.bertrand
    @loic.bertrand5 ай бұрын

    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

    @DetlefDumpelmann

    4 ай бұрын

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

  • @konradlesniak492
    @konradlesniak4925 ай бұрын

    Copilot 100$ per year and is really great :)

  • @colbyfayock
    @colbyfayock5 ай бұрын

    i need turbo log 👀

  • @ulrich-tonmoy
    @ulrich-tonmoy5 ай бұрын

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

  • @RobertMcGovernTarasis
    @RobertMcGovernTarasis5 ай бұрын

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

  • @BReal890
    @BReal8905 ай бұрын

    hello what is the font and theme you use?

  • @lonecreeperbrine

    @lonecreeperbrine

    5 ай бұрын

    u even watch the video ?

  • @BReal890

    @BReal890

    5 ай бұрын

    I miss this section, now I see thanks

  • 5 ай бұрын

    What browser are you using?

  • @ste-fa-no

    @ste-fa-no

    5 ай бұрын

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

  • 5 ай бұрын

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

  • @engineeringmadeasy
    @engineeringmadeasy5 ай бұрын

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

  • @mariogutierrez4989
    @mariogutierrez49895 ай бұрын

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

  • @abhijeetchaudhari6652
    @abhijeetchaudhari66525 ай бұрын

    Use ninja console as well

  • @ferdinandtorggler
    @ferdinandtorgglerАй бұрын

    In my opinion Codeium is the best AI autocomplete.

  • @AllCreativeGaming
    @AllCreativeGaming5 ай бұрын

    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 KZreadrs 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

    @TheTomislavb

    5 ай бұрын

    Stop with the 💉

  • @AllCreativeGaming

    @AllCreativeGaming

    5 ай бұрын

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

  • @AlThePal78
    @AlThePal785 ай бұрын

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

  • @davidezih3510

    @davidezih3510

    5 ай бұрын

    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
    @NuncNuncNuncNunc5 ай бұрын

    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
    @pythagoran5 ай бұрын

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

  • @simpingsyndrome
    @simpingsyndrome5 ай бұрын

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

  • @DoNotKillThePresiden
    @DoNotKillThePresiden5 ай бұрын

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

  • @iriel492ki
    @iriel492ki5 ай бұрын

    cringe