Visual Studio Code 2022 | Web Dev Setup | Top Extensions, Themes, Settings, Tips & Tricks

Поділитися
Вставка
  • Опубліковано 20 лип 2024
  • 🦸 Become A VS Code SuperHero Today: vsCodeHero.com
    🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: / discord
    🚢 Deploy for FREE on Vercel: vercel.com/ambassadors/codest...
    Do you want to learn how to become a web developer in 2022? The first step is to pick a code editor. Let me show you how to get set up so you can start learning.
    In this tutorial, we'll install Visual Studio Code (VS Code) and configure it for web development. (HTML, CSS, JavaScript) We will look at some top themes, tips & tricks, features, and install some of my favorite extensions. This video is intended for beginners.
    📚 RESOURCE LINKS 📚
    ▶ Download VS Code: code.visualstudio.com/Download
    ▶ FREE Web Developer Roadmap 2022: • Web Developer Roadmap ...
    ▶ FREE 2022 Web Development Course: courses.codestackr.com/2022-w...
    ▶ FREE VS Code Cheat Sheet: courses.codestackr.com/vs-cod...
    ▶ THEME: Night Owl: marketplace.visualstudio.com/...
    ▶ THEME: Cobalt2: marketplace.visualstudio.com/...
    ▶ THEME: Shades of Purple: marketplace.visualstudio.com/...
    ▶ THEME: Coder Coder Dark: marketplace.visualstudio.com/...
    ▶ THEME: codeSTACKr: marketplace.visualstudio.com/...
    _____________________________________
    🛠️ Tools I use:
    🟠 codeSTACKr Theme: marketplace.visualstudio.com/...
    🟠 STACKr Code Font (Exclusive to my VS Code Course - vsCodeHero.com)
    🟠 SuperHero Extension Pack: marketplace.visualstudio.com/...
    _____________________________________
    ⏱️ Timestamps ⏱️
    00:00 - Intro
    01:05 - Install VS Code
    01:46 - Walkthrough
    03:21 - Keyboard Shortcuts
    03:52 - Basic Settings
    05:01 - Themes
    05:45 - Top 5 VS Code Themes!
    06:38 - Extensions
    08:19 - Open a Project Folder
    08:58 - Add Folder Structure
    09:57 - File Navigation Shortcuts
    11:19 - Code Faster with Emmet
    13:08 - VS Code IntelliSense
    14:28 - Layout Customization
    15:40 - Manipulating Text
    17:21 - The Terminal
    _____________________________________
    💖 Show support!
    PayPal: paypal.me/codeSTACKr
    _____________________________________
    👀 Watch Next:
    Playlist: Web Development For Beginners - • Web Development - Begi...
    _____________________________________
    🌐 Connect With Me:
    Website: www.codestackr.com
    Twitter: / codestackr
    Instagram: / codestackr
    Facebook: / codestackr
    _____________________________________
    ** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
    #codeSTACKr #vscode #learntocode

КОМЕНТАРІ • 403

  • @codeSTACKr
    @codeSTACKr  2 роки тому +42

    🦸 Become A VS Code SuperHero Today: vsCodeHero.com
    🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: discord.gg/A9CnsVzzkZ

    • @keylanoslokj1806
      @keylanoslokj1806 2 роки тому +2

      Will you do another vscode free tutorial? Its fantastic!!!

    • @DeepakLalchandaniProfile
      @DeepakLalchandaniProfile 2 роки тому

      Its awesomr

    • @laigrimmie6610
      @laigrimmie6610 Рік тому

      hi you have tutorial how to make automouse and keyboard using vscode i planning to use it in a gameplatform can you teach me

    • @InfinityGuy-uw7cr
      @InfinityGuy-uw7cr 9 місяців тому +1

      Ur INSANE man, all for free as well :D, keep up the awesome work!!!

    • @adeojo9054
      @adeojo9054 7 місяців тому

      good

  • @m.o.7661
    @m.o.7661 Рік тому +66

    I have watched so many vs code videos explaining the foundation for any coder to begin working. You by far win the title. So easy to follow, well explained and in a timeline that makes sense without mentioning something that leave people confused. Thanks very well done!

  • @DragonwingZify
    @DragonwingZify 2 роки тому +24

    This was a really excellent introduction.
    I have been working with VSCode for a while now and i definitely learned some tricks.
    Thanks for sharing it with us and for those who are new to VSCode or maybe just intermediate,
    I highly recommend watching this video!

  • @jizhou749
    @jizhou749 Рік тому +31

    Instead of saying whole bunch of bull s**t. I just wanna say: " Thank you. This video is amazing." 😄

  • @dugrober
    @dugrober Рік тому +3

    Fantastic, period! I learned HTML by myself back in the 90's using the extinct Home Site software, which BTW I loved. I remember many of these codes. The way you explain brings back many memories!

  • @Day23458
    @Day23458 Рік тому +8

    Super clear video man love it. Being able to customize the layout /theme of the workspace before beginning to write/learn anything is a huge stress relief

  • @krullerooi6845
    @krullerooi6845 Рік тому +3

    The best, most concise, and easy-to-follow customizations for vs code I have ever seen. Just subscribed!

  • @schattenbrot7013
    @schattenbrot7013 2 роки тому +15

    For people who use the terminal/command line a lot. You can open a project folder with the command `code .` right from any terminal.

  • @adrianam3346
    @adrianam3346 2 роки тому +3

    The best VS Code Introductory course ever! Thank so much for this tutorial!

  • @richardhaynes1127
    @richardhaynes1127 Рік тому +1

    Excellent video. I just starting to preactice coding working with html and css. Your video was clear and explained and cleared up exactly what I was looking for. Thanks so much for your instruction.

  • @cielstar04
    @cielstar04 2 роки тому +3

    Honestly this went smoother than I thought. Thanks for your help!!

  • @Brian-zc6yp
    @Brian-zc6yp 2 роки тому +5

    Amazing video! I've really come to love your channel, its inspired me to push through hard times when learning to code. Keep up the great work!

  • @cesman5358
    @cesman5358 2 роки тому +2

    Thanks a lot I just learn a lot in your video how to use the VS features .... I am an old programmer catching up wit the technology Thanks for all this good stuff mate

  • @cinthia105
    @cinthia105 2 роки тому +1

    Good introduction! Text wrap and multiple c+p shortcuts were extremely helpful. ty!

  • @SimX9000
    @SimX9000 Рік тому +2

    Wow this is an awesome video for a total newb. Love that it's time indexed as well. Thank You!

  • @CarlosWashingtonMercado
    @CarlosWashingtonMercado 2 роки тому +5

    Neat, concise, clear. Congratulations.

  • @johnborghese1880
    @johnborghese1880 2 роки тому +2

    I learned more, faster than any other VS code video. Thank you

  • @MrForgot1000
    @MrForgot1000 Рік тому +1

    Nice bro! I asked that you helped me to set up vs code when I was passing feedback questions of that. And gave this link :)

  • @midlifecoding
    @midlifecoding 2 роки тому +25

    Ok first of all thank you for this video! I am changing careers into web development and I have been thinking that there is no way I can type code fast enough to keep up with people half my age, but this video showed me otherwise. You have given me a newfound love for writing HTML, CSS, and JS, and I am eternally grateful!

    • @ssmufc9941
      @ssmufc9941 Рік тому

      Haha none of us (old or young) type code fast. We copy, paste and autocomplete like lightening though! Good luck in your career change 😊

    • @misttea9136
      @misttea9136 Рік тому

      I wish I had learned this when I was just teenager.

  • @Sara_lm
    @Sara_lm 2 роки тому +2

    I am new to coding and I really like your channel! Amazing video, excellent tutor!

  • @CodeWithStein
    @CodeWithStein 2 роки тому +2

    Nice video Jesse! A lot of helpful tricks 😀

  • @techoriya7488
    @techoriya7488 2 роки тому +7

    The Best video on complete VS Code topic. 💙👏

  • @nadaO0O0O0O0O0
    @nadaO0O0O0O0O0 2 роки тому +2

    Your tutorial is absolutely simple and clear, before your video I thought kinda complicated cuz I’m new, but now it’s more clean and simple thanks :)

    • @codeSTACKr
      @codeSTACKr  2 роки тому

      Glad it helped!

    • @JustinMacri007
      @JustinMacri007 Рік тому

      @@codeSTACKrjust asking if I create something or an app how do I upload it to the net?

  • @gphotzoegamer9522
    @gphotzoegamer9522 Рік тому

    I just started with Web dev and you make things easier by explaining this.

  • @ironrose888
    @ironrose888 2 роки тому

    Thank you for showing the different ways that you can configure to help me work faster. Your channel is awesome 😎

  • @nielslytzdk
    @nielslytzdk 2 роки тому +17

    Very nice introduction to VS Code! One question: Will the built-in IntelliSense work on all files like css, scss and js or do you need to install an extension for each type? I find that vscode quickly becomes slow on startup if too many extensions are installed... Always a pleasure watching your videos :).

    • @codeSTACKr
      @codeSTACKr  2 роки тому +7

      Thanks! IntelliSense works on many languages out of the box. If you don't get suggestions, search for the language extension in the marketplace and it can be added on.

  • @mythm2063
    @mythm2063 2 роки тому +1

    The video I needed, thank you!

  • @rossturner7378
    @rossturner7378 2 роки тому

    This was very helpful! I will 100% be checking out more of your videos. Thanks!

  • @PA-bu5cs
    @PA-bu5cs 5 місяців тому +1

    Thanks for a super good vide - Easy to follow, perfect pace and well presenter overall :) Thanks !

  • @TBI-CodingToHeal
    @TBI-CodingToHeal Рік тому +3

    Tried several other tutorials on VS Code but yours got me off the ground! Thank you! Relearning programming 12 years after a TBI is daunting. I'm taking baby steps toward cognitive recovery using coding as therapy. Wish me luck! It's taken 12 years to summon up the courage to even attempt to relearn JS, let alone the many new complexities of what has obviously become much more than a programming language -- it's an infinitely extensible platform with hundreds of moving parts. I'm following your tutorials as my gospel! Thanks again. Please let me know of any other resources you can recommend to kick start me into the world of front and backend application development.

    • @goat11t
      @goat11t Рік тому

      I hope your still doing well ❤

  • @orz3ch621
    @orz3ch621 2 роки тому +1

    Im gonna be next to be thankfully for this video :)
    Thanks for all and good luck!

  • @Daniel-di6im
    @Daniel-di6im Рік тому +1

    My tutor never thought me this
    And here you are doing it for free
    One in million sir

  • @user-kz6ed2ul4s
    @user-kz6ed2ul4s 11 місяців тому +1

    Nice!! Just recommended this to fellow developers

  • @rfuesting
    @rfuesting 2 роки тому

    Great video! I am just now learning javascript. This video really helped me in setting up VS Code. Thanks! I'll be watching your other videos as well. Liked and subscribed!

  • @ktmorgan3292
    @ktmorgan3292 2 роки тому +5

    Outstanding! Extremely practical and concise. Thank you.

  • @ash.mystic
    @ash.mystic 2 роки тому +12

    Fantastic introduction to VS Code! I will recommend this to new devs and I picked up several useful tips too :)

  • @siamakut
    @siamakut 2 роки тому +1

    The best starter of vs code, thank you ❤️

  • @PeanutsandPopcorn
    @PeanutsandPopcorn Рік тому

    I have no idea what I’m doing but this is definitely the place to start. Thanks!

  • @kingrpg1347
    @kingrpg1347 Рік тому +1

    ur a life saver i tried to do it witout help it turned into a hot mess so thank u soo much u got a sub and a like for that

  • @milankitanovic234
    @milankitanovic234 2 роки тому +1

    Where have u been all my internet lifetime ..omg THANK YOU MAN! ♠

  • @EGS_lyrics
    @EGS_lyrics 8 місяців тому +1

    It's so clear and easy to follow, big respect, fun from Ethiopia 🇪🇹

  • @sallylauper8222
    @sallylauper8222 2 роки тому +6

    This video seems to be more about VS Code than about VS Code 2022. I've been using VS Code about a year to write HTML and JavaScript. I recently installed 2022 because it is maddeningly difficult to get VSC to run a C# Hello World program (kind of ironic, as VSC and C# are both Microsoft products). I see bracket colorization is built in now.

  • @md.rokonhossain6206
    @md.rokonhossain6206 2 роки тому +2

    It was so easy to understand and informative, I could easily understand!
    Thanks a Ton!

  • @jaguayoe
    @jaguayoe 4 місяці тому +1

    Just wow!!! Thanks!!!

  • @augustinaho7391
    @augustinaho7391 Рік тому

    hello sir i was looking for a clear and precision video since last week and i found you thanks for this video you made with the deep explanations .i'm just beginner as developer (html,css,javascript )

  • @BadriMouradDz
    @BadriMouradDz Рік тому +1

    Thank you so much for this video .

  • @AzatarsCoding
    @AzatarsCoding 7 місяців тому +1

    I really like this video. Straight to the point!

  • @scorpawe
    @scorpawe 2 роки тому +1

    Thank you so much! So good!

  • @sevginur
    @sevginur Рік тому +1

    thank you lot. this video is very handful for me :)

  • @rsngrl
    @rsngrl Рік тому

    thanks for the note about Word Wrap!

  • @wimeatsworld
    @wimeatsworld 2 роки тому +2

    Thanks for the video.
    Any advise on how to set VSC up so it's friendlier towards PHP? All else is lovely but for PHP it's absolutely dreadful...

  • @99Leo
    @99Leo Рік тому +1

    Wow! Very clear explanation. Thank you very much!

  • @akibsi112
    @akibsi112 Рік тому +1

    Thank you so much for this vidio and it realy motivated me to watch more of your production. All the best

  • @phillipdonnelly6430
    @phillipdonnelly6430 Рік тому +1

    The best! Brilliant, thank YOU!

  • @glennmiller394
    @glennmiller394 2 роки тому

    I'm so glad I found you.

  • @CanDoSo_org
    @CanDoSo_org 2 роки тому +1

    Great tutorial, thanks man.

  • @jaygreentree4394
    @jaygreentree4394 2 роки тому +1

    This video has inspired me to make a vs code shortcuts page for touch portal (stream deck alternative).

  • @DeathProofXXX
    @DeathProofXXX 2 роки тому +1

    Great video, really helped me while learning to code

  • @blancacortes8659
    @blancacortes8659 2 роки тому

    I really enjoyed the video!! thanks for sharing!!

  • @percymaraire6168
    @percymaraire6168 2 роки тому +1

    Thank you so much for your great videos!

  • @imamit100
    @imamit100 Рік тому

    wonderful, every bit of key-shorts are very helpful.

  • @gandavnarrain2855
    @gandavnarrain2855 Рік тому

    Thank you. Very helpful.

  • @vikashkumarrai6334
    @vikashkumarrai6334 Рік тому +1

    A good helping work by you

  • @nikeapollo1
    @nikeapollo1 Рік тому +1

    Amazing, thanks a ton!!

  • @modaboutique001
    @modaboutique001 Рік тому +1

    Very nice and useful video for a total beginner - love it 😍thank you so much..

  • @invisibleman531
    @invisibleman531 2 роки тому

    Thank you! Very helpful!!

  • @mikerobinson5006
    @mikerobinson5006 2 роки тому +48

    Thank you so much for the video!
    Where I can get a visual studio 2022 professional for reasonable price?

    • @kevinphilips7453
      @kevinphilips7453 2 роки тому

      Yes, I got a key from some website, extraordinarily cheap, and it worked perfectly.

    • @kevinphilips7453
      @kevinphilips7453 2 роки тому +1

      BNH-Software

    • @mikerobinson5006
      @mikerobinson5006 2 роки тому +1

      @@kevinphilips7453 Thank you for the recommendation I found them, I got the key instantly the purchase and it works perfect!

  • @ppadilla9922
    @ppadilla9922 2 роки тому +1

    great video!

  • @roysmith6054
    @roysmith6054 Рік тому +1

    Very helpful video. Thank you.

  • @reza-iq5df
    @reza-iq5df Рік тому

    Thank you this was really helpfull.

  • @DAG_r8
    @DAG_r8 2 роки тому

    I actually learned stuff thank you :)

  • @sylvesterpromise3300
    @sylvesterpromise3300 2 роки тому +1

    You just got a new subscriber

  • @juanfranciscocazenaveescan5870

    beautifully explained, crystal clear and super professional, thanks very much for all the education you are sharing!

  • @akmzahidulislam3289
    @akmzahidulislam3289 2 роки тому

    Brilliant introductory video. Thanks a lot.

  • @ENVELOPEYOURDESIRE
    @ENVELOPEYOURDESIRE Рік тому

    Thank you so much for this great tutorial, liked, and subscribed and look forward to learning.

  • @judevector
    @judevector 2 роки тому

    Wow this video helped me alot in setting up my vscode thank you

  • @prasadpachankar5763
    @prasadpachankar5763 2 роки тому

    Dude, its great

  • @CloudSolutionPro
    @CloudSolutionPro 2 роки тому

    A very nice and impressive introduction to VS Code, thanks

  • @thecoolnewsguy
    @thecoolnewsguy Рік тому +1

    Thank you so much sir! This video was so useful!

  • @johnjohn___
    @johnjohn___ 2 роки тому

    dude... im leaning python and this tutorial still made my day

  • @mattsepter4078
    @mattsepter4078 2 роки тому +1

    Thank you for this!

  • @tausiftabrez625
    @tausiftabrez625 Рік тому +1

    Amazing Video about visual code 👏

  • @ocalalydiahope8032
    @ocalalydiahope8032 2 роки тому +1

    Thanks for good explanation, am watching from Uganda

  • @AmericanCube
    @AmericanCube Рік тому +2

    very helpful :D

  • @nurikaitmatov
    @nurikaitmatov Рік тому +1

    Thanks for your help ❤

  • @user-xu9tb7oe2z
    @user-xu9tb7oe2z Рік тому

    very nice, thanks!

  • @almandohafenaaje1420
    @almandohafenaaje1420 Рік тому

    Yoh bro, you deserve a Windhoek beer, Thank you

  • @richardbacani5827
    @richardbacani5827 Рік тому +2

    you are awesome i like the way you teach us with your videos, i hope we could learn much more with your teaching skills. youre the best.

  • @ekramhosen8358
    @ekramhosen8358 2 роки тому +1

    Very helpful video! thank you

  • @kwadwokonaduasare7690
    @kwadwokonaduasare7690 Рік тому +1

    Really impressed and want to learn more

  • @anthonycarter1528
    @anthonycarter1528 2 роки тому

    Great information! Thanks!

  • @EzemEmezie
    @EzemEmezie Рік тому +1

    This video is amazing ...i have subscribed with notification on

  • @codelanguages
    @codelanguages Рік тому +1

    Visual Studio Code is my go-to code software.

  • @DBL6Domino
    @DBL6Domino Рік тому

    this was amazing. thank you

  • @Goforussendme
    @Goforussendme Рік тому

    very informative and easy to understand

  • @rhomiezhomeboy8270
    @rhomiezhomeboy8270 2 роки тому +1

    Thank you very much...keep up the good job

  • @semhar1396
    @semhar1396 2 роки тому

    wow...It really helped alot

  • @whiteimposter9304
    @whiteimposter9304 Рік тому +1

    you are a true savor thank you so much

  • @InspireWithKaveen
    @InspireWithKaveen 2 місяці тому +2

    thank you for your help

  • @ericnguyen7462
    @ericnguyen7462 2 роки тому

    Thank you. This is very helpful 🙏🏻