ESSENTIAL JavaScript Extensions for VS Code in 2024

Поделиться
HTML-код
  • Опубликовано: 22 май 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
    @sun33t 4 месяца назад +17

    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

  • @AlexandreMoreauLemay
    @AlexandreMoreauLemay 4 месяца назад +5

    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

  • @Lord_zeel
    @Lord_zeel 4 месяца назад

    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.

  • @xeco5673
    @xeco5673 4 месяца назад

    nice collection! Thank bro~

  • @murtadha96
    @murtadha96 4 месяца назад

    Thank you ❤

  • @DontFollowZim
    @DontFollowZim 4 месяца назад +4

    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
    @UmanPC 4 месяца назад

    Great video.
    Tnx

  • @alexandrmeyer
    @alexandrmeyer 4 месяца назад

    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

  • @espindolagustavo
    @espindolagustavo 4 месяца назад

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

  • @shakapaker
    @shakapaker 4 месяца назад +4

    Dotenv extension is for syntax highlight in dotenv files

  • @j2devstudio
    @j2devstudio 4 месяца назад

    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
    @davidezih3510 4 месяца назад +1

    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

  • @Aedaeum
    @Aedaeum 4 месяца назад +4

    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 4 месяца назад +2

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

  • @DoctorSoulis
    @DoctorSoulis 4 месяца назад +2

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

    • @Microphunktv-jb3kj
      @Microphunktv-jb3kj 4 месяца назад +1

      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 4 месяца назад

      @@Microphunktv-jb3kj Any vsc recommendations my friend?

    • @williammckeever4790
      @williammckeever4790 4 месяца назад +1

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

    • @DoctorSoulis
      @DoctorSoulis 4 месяца назад

      @@williammckeever4790 Glad I could help.

  • @BRODZELi
    @BRODZELi 4 месяца назад

    Svelte is awesome!

  • @JoelChan611
    @JoelChan611 4 месяца назад +1

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

    • @stevereid636
      @stevereid636 4 месяца назад

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

  • @deatho0ne587
    @deatho0ne587 4 месяца назад

    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.

  • @ahmedelnawawy2458
    @ahmedelnawawy2458 4 месяца назад

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

  • @darkoplax7688
    @darkoplax7688 4 месяца назад +1

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

  • @godwillmonthe1249
    @godwillmonthe1249 4 месяца назад +3

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

    • @mikleta
      @mikleta 4 месяца назад

      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!

  • @loic.bertrand
    @loic.bertrand 4 месяца назад +2

    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 3 месяца назад

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

  • @konradlesniak492
    @konradlesniak492 4 месяца назад

    Copilot 100$ per year and is really great :)

  • @RobertMcGovernTarasis
    @RobertMcGovernTarasis 4 месяца назад

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

  • @ulrich-tonmoy
    @ulrich-tonmoy 4 месяца назад

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

  • @mariogutierrez4989
    @mariogutierrez4989 4 месяца назад

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

  • @BReal890
    @BReal890 4 месяца назад

    hello what is the font and theme you use?

    • @lonecreeperbrine
      @lonecreeperbrine 4 месяца назад +2

      u even watch the video ?

    • @BReal890
      @BReal890 4 месяца назад

      I miss this section, now I see thanks

  • @engineeringmadeasy
    @engineeringmadeasy 4 месяца назад

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

  • @colbyfayock
    @colbyfayock 4 месяца назад

    i need turbo log 👀

  •  4 месяца назад

    What browser are you using?

    • @ste-fa-no
      @ste-fa-no 4 месяца назад

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

    •  4 месяца назад

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

  • @abhijeetchaudhari6652
    @abhijeetchaudhari6652 4 месяца назад

    Use ninja console as well

  • @ferdinandtorggler
    @ferdinandtorggler 16 дней назад

    In my opinion Codeium is the best AI autocomplete.

  • @AllCreativeGaming
    @AllCreativeGaming 4 месяца назад

    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 RUclipsrs 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 4 месяца назад

      Stop with the 💉

    • @AllCreativeGaming
      @AllCreativeGaming 4 месяца назад

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

  • @AlThePal78
    @AlThePal78 4 месяца назад

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

    • @davidezih3510
      @davidezih3510 4 месяца назад

      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
    @NuncNuncNuncNunc 4 месяца назад

    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
    @pythagoran 4 месяца назад

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

  • @simpingsyndrome
    @simpingsyndrome 4 месяца назад

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

  • @DoNotKillThePresiden
    @DoNotKillThePresiden 4 месяца назад

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

  • @iriel492ki
    @iriel492ki 4 месяца назад

    cringe