Top 10 VSCode Extensions YOU MUST TRY!

Check out my courses to become a PRO!
developedbyed.com/
In today's episode we will look at my top 10 best vscode extensions that you must use for your projects!
Here is the full list of all the extensions:
1.Code Snap
2.Better Comments
3.Turbo Console Log
4.TabNine
5.Live share
6.Git history
7.Prettier
8.Auto Rename Tag
9.Color Brackets
10.Import Cost
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming

[@okolol]

timestamps: 0:00 intro 0:22 (theme) Material Theme 0:28 Code Snap - take a cool looking code snipet/screenshot. 1:39 Better Comments - it's in the name. 2:47 Turbo Console Log - make writing console.log so much easier. 3:23 Tabnine - GitHub copilot, but it's freemium. 4:53 Live Share - share your code, live. 5:55 Git History - simple git viewer and editor. 7:17 prettier - make your code pretty. 8:53 Auto Rename Tag - rename html tag and automagically rename the closing/opening tag. 9:44 Color Bracket - colorize your bracket. 11:00 Import Cost - calculate imported package size. 11:35 (course) developebyed 12:00 outro 12:05 ed can't talk 12:07 american memez 12:14 outro continues please put this as timestamp on your video.

[@josephmasongsong11]

God bless you. You read my mind.

[@Lleanlleawrg]

Thanks. Half of them seem a bit meh, so its nice to not have to watch it all.

[@gameboyv1790]

Thanks

[@bharath2508]

wow

[@sivadhanushuppalapati4041]

whats the font style ed is using in vscode?

[@rgdayo]

These are awesome Ed. I usually use VS Enterprise for work, and VS Code initially threw me for a loop that I have to install functionality but I'm slowly getting used to it. Need to use it more often!

[@Sakinukas]

I am pretty new to web dev, HND student and using Color Bracket with Highlight Matching Tag is so helpful.

[@proflead]

Thanks for sharing Ed!

[@RahulKumar-fp1gy]

Hi, just wanted to share that you don't need "Color Brackets", updated version of vscode has builtin support for this. You just need to enable it

[@developedbyed]

Ahh cool!

[@RahulKumar-fp1gy]

🤗

[@Jblcc]

I think Auto Rename Tag also built in as default

[@UwU-dx5hu]

@@Jblcc ok

[@dhakalabhiyan]

@@Jblcc auto rename tag built in feature doesn't always work... idk why

[@aztralenforcer]

THANKS! Now i have colored brackets! Amazing!

[@benacker8525]

Nice video, Git history seems really useful. As for the Auto rename tag and bracket colors you don't need it anymore.

[@mane_doug]

Fantastic! I had a lot of fun with your video 😂🙏

[@askhatarslanov6327]

good extensions, took couple of them. thanks!

[@adnanabdi1706]

I really love your content. They have been so useful to me. 🙂

[@vikashkushwaha70]

thank you i learned something new today

[@seanpaul93]

These lists are great, cheers.

[@wtdosama]

Nice work done 👍

[@karlstenator]

Quokka is my favourite. I wish I could run it in all aspects of life, like, cleaning the garage, washing the dishes - Quokka running in the background telling me if I'm doing it right... hmm, sounds like my ex, actually. Awkward. See, this is where I need Quokka to help me write KZbin comments too.

[@Jamie-rx4yc]

very useful extensions. Nice video

[@maurolimaok]

Thanks for the video! I would love to see a 101 video about VSCode.

[@alifyout]

Would love to see you in a css battle with either web dev simplified or anyone else.would be fun

[@gabrielfono844]

I really enjoy this video thanks

[@thebugcoder3391]

Auto rename tag is actually build in lol. Also, SVG preview is a pretty cool extension.

[@yadneshkhode3091]

Error lens is a great extension everyone must try it

[@yadneshkhode3091]

@@switchdiagram welcome

[@MrAlexm1992]

@@switchdiagram klsdfklsdjflksdf

[@kaneki4772]

What it does?

[@tPlayerioT]

​@@kaneki4772shows missing things and errors. Like missing a " ; " in the end

[@jaydenflynn7792]

TYSM

[@sandanuwan4441]

Thanks for the video. Its really helpfull

[@beconfident5482]

I loved the last extension

[@_the_one_1]

Awesome! Thank you

[@maxdzyubak]

thanks for this video!

[@PretoraSankti-cm6su]

I've recently come across *Galactic Glow* 🌌, a hidden gem in the VSCode extension world. It lets you change your coding environment's appearance to match iconic characters 🌟. It's like a Star Wars adventure for your code

[@hassaneoutouaya]

Thank you so much !

[@vinit095]

Updated vscode has built in support for "Auto rename tag" now. You just need to enable it.

[@cutbyoccam1948]

Turbo Console Log is amazing.......... Thank you

[@pt-charles_sin1979]

Thanks For Sharing

[@IMIslombek]

Thank you bro!!!

[@CallousCoder]

Pretty JSON! And something for us GenX assembly gurus: Amiga ASM, which installs even the vasm toolchain.

[@apex-lazer]

I love you Ed!

[@dr.livesey5157]

Huge thanks!

[@arafatehossenemon3164]

Love this Video 💐

[@JunaidAli480]

Love your sense of humour 😂

[@rachwanharb5781]

Very good extentions though! Thank you.

[@noeljose]

Your new thumbnail style looks very nice

[@asilbekashirov1341]

Some more extensions: 1. Thunder Client 2. Color Highlight 3. Path intellisence

[@UwU-dx5hu]

Yeap they are really good

[@chenkaihong]

Mars, and andromeda for theme

[@WebDevXpert]

Top 10+ Essential VS Code Extensions In 2024 || Top 10 VSCode Extensions YOU MUST TRY !: kzbin.info/www/bejne/naDclZ6Cg7h_hrs

[@TumoPlayz]

Gitlens is one of my recommendations, it's really good for making git run well

[@bharath2508]

spot on ed

[@Dev-Phantom]

Really helpful

[@godreign9556]

I want to click an area of the VSCode code and would love to see the same position highlighted in the HTML Preview. Please, do you know which VSCode Extensions can achieve that? Thank you.

[@joshmorgantech]

Love ❤️ this

[@susanarodriguez9830]

Hi is there any extension that generates code in Html from a sketch? Is there a way to do it within Blackbox?

[@TechnologyHassan]

Bro your simile is very good.

[@AndrewTSq]

Best thing I have ever done in VS Code was to get a monospace font!. thanks for the other tips of extensions.

[@Mwtorres89]

what font exactly?

[@AndrewTSq]

@@Mwtorres89 Anonymous Pro (same as twitch/youtuber coding garden uses, thats what I got it from) makes readability on another level for me.

[@arvi8843]

@@Mwtorres89 Free would be Cascadia Code by Microsoft or Fira Code

[@thinkpositiveway]

quite good 🤟 bro

[@Orionus83]

I recommend: 1. Git Graph 2. Todo Tree 3. Code Spell Checker 4. Thunder Client 5. Bookmarks

[@cartidise]

the first is a life changer

[@TokyoWasTaken]

fyi bracket colorizer is now native in vs code.. no need to install that extension but It's great to see how such extensions made such an impact on code

[@user-zs4yc5tg5q]

that's amazing

[@wtv07]

how can get this ( M, u , 1 or colourful circle) after my file names under left side menu of explorer/editor

[@Buzzilio_]

Bracket pair colonization is already built-in in VS Code

[@manoharants]

Which theme are you using? Could you share the details?

[@mangiterz]

so how do you open a source code from easy language with a file extension of *.e *.ec especially that if loading the source in easy language 5.93 it wont display the correct chinese word

[@vt7091]

These works with any code right on VS? (Just starting out with coding with C# learning some for my Game Dev degree)

[@zvheer7597]

code snap will really be usefull

[@AmodeusR]

If comments being grayed out is bad, just change comment color to as bright as a pure red or blue in the json user config.

[@krepkovmeste]

what font do you use?

[@YeahEsCereal]

One I use is Error Lens. It shows errors on the line it is on and after the code (red for errors and yellow for warnings)

[@MrSrdjanStojkovic]

TNX

[@johnkeen1659]

Could you tell me your monitor's name and brand? My neck starts to hurt and get rigid so bad! Good video for reference by the way!

[@uniqueeducationcorner975]

Power mode is one more beautiful extension in vs code

[@tifking73]

How do you not have more subscribers!?! I’m going to add a lot of these extensions. Thanks!!!

[@apdalle4438]

Legend

[@kaleabalemayehu]

you use the best theme i've stick to it since i use it, it is awesome

[@kaushalmishra2286]

name of theme plz

[@amad_a96]

Name if theme?

[@h3ckphy246]

@@amad_a96 material

[@nishan.7]

@@h3ckphy246it has many variants...exactly which one is this?

[@EricksonGaloso]

Hi hope you notice, what's your vscode theme? thanks!

[@krmrmax5643]

Hello guys I have a super random question about buttons in css (no js). And who should I ask if not Ed or the community :). So I have a button which is clickable and all of that (you click -> little button animation happens -> text pops up beneath it) but I want to get rid of the dropdown text by pressing the button again. Furthermore, I want that the animation is played again once I pressed the button (to close the dropdwon text). Current state: I can get rid of the dropdown text by clicking on the side BUT NOT by clicking on the button again :( Thanks guys! If you have more questions about this case feel free to ask more about it

[@beenyshsaeed4559]

Share your code.

[@krmrmax5643]

@@beenyshsaeed4559 ​ @Beenysh Saeed I think all of the code is too much for one comment. But to brake it down: HTML CSS .BUTTON ul{ opacity: 0; } button:hover{ transform: scale(0.9); transform-origin: left top; } .BUTTON button:focus{ transform: scale(1); } .BUTTON button:focus + ul{ opacity: 1; } .BUTTON li:hover{ transform: scale(1.2); } Dont get confused: my div class also has the name button (so I wrote it uppercase) Hope you can understand the code!

[@brunocmesquita]

What font you use on your editor?

[@juicychann]

is thre such a thing as import cost but for python?

[@Mwtorres89]

why does my consolas font look so bold on my PC? im on windows... how can i fix this with out clearType.?

[@Oslovikings123]

What font are you using?

[@tariksahnoun4585]

I love you big bro ❤

[@creepychris420]

is tabnine like free copilot? yo just btw auto rename tag is now just a setting. sometimes it deletes the end tag tho lol.

[@robertantony4877]

dude i have doubt width:25px; height:2px; background-color:rgb(231, 0, 0); margin: 5px; (I gave these properties to my navigation button ,and the firstt div looks different ftom other , can you say y )

[@tegaogheneovo5881]

hey you, you taught me alot some years ago

[@grainyali]

perfect.... thanks.. you have a beautiful smile 💎

[@aliirtaza6936]

sir which theme you using???

[@nrgking1667]

What theme do you use?

[@farismuhammadd]

Can you tell me the name for theme you are using??

[@Gailon1000]

What Color sheme are you using?

[@MdNaimurRahmanHera]

Cool man ❤️😄

[@codekicks2171]

NOTE : bracket pair colorization is now built in with vs code and has been depreciated

[@aaymankhalid9997]

I need an extension which could colorize tag pairs.

[@Smoke_lb]

pov: you are scrolling through the comments to find more good extensions

[@castlemoyle]

I sure wish I could get prettier to work on any of my machines. Either nothing happens (and i do a lot of inserting tabs by hand) or I get "overkill" where it (?) inserts a line break every 60 or so characters in 's and a line break everywhere it sees a colon (:) Anyone have any alternatives?

[@b1mind]

VSC has rename for html tags now, same action as elsewhere. > rename symbol

[@abyssoftus]

Bracket pair colorization is now a native functionality

[@minineji7050]

The ending 😂

[@surendrasaluru2807]

Couldany one tell me how to practise full stack html css js react node on vscode

[@Amvflix7]

Dev ed ❤️

[@paulcharman8113]

Does better comments just work on js files or does it work on html and css too

[@blbezcc]

It works in MANY languages.

[@tareq8022]

i need this team 😢

[@Alif_f]

Auto rename tag is build in on vs code now

[@zzzyyyxxx]

Curious, why not Copilot instead of tabnine? I think both are paid but with Copilot you can get a free license if you just do some PRs to some open source libraries.

[@DanteMishima]

After the trial, Copilot will want you to pay.... For an Ai that was collecting your data

[@yannickdurden]

@@DanteMishima yes, but only for public repo, not private

[@Kokujou5]

i just tried out the auto rename tag plugin and... that's so disappointing! it makes me very sad :( yes you can rename tags, but it doesn't consider non-closed tags like img and br. those would be invalidated. and if you have them you would need to add a closing bracket... quite disappointing.

[@kundan_g]

How to save the codesnap image

[@sahriaahmed122]

Can u tell me what's your Vs code theme plz? 😊

[@Dev-Phantom]

Maza aaya