VS Code Top-Ten Pro Tips

Поділитися
Вставка
  • Опубліковано 6 чер 2018
  • Get the latest and greatest VS Code pro tips in the 2021 video 👉 • 25 VS Code Productivit...
    Learn how to use Visual Studio Code like a pro with my top-ten strategies for developer productivity and happiness. angularfirebase.com/lessons/t...
    - Get VS Code code.visualstudio.com/
  • Наука та технологія

КОМЕНТАРІ • 883

  • @Fireship
    @Fireship  6 років тому +457

    UPDATE. New and improved VS Code pro tips 👉 here ua-cam.com/video/u21W_tfPVrY/v-deo.html
    An effective IDE is one of the most important factors for developer productivity (and happiness). Here are ten ways to maximize the value of VS Code. Please post your tips in the comments.

    • @IrfanSyed917
      @IrfanSyed917 6 років тому +2

      Angular Firebase what is the icon extension you are using ?

    • @DarthGTB
      @DarthGTB 6 років тому +13

      VS Code is great. And I love the fact that I can interact with developers on GitHub about issues or suggestions I have to the editor itself and the extensions. It's awesome.
      Now a suggestion for you: the music was a bit too loud. This makes it difficult to pay attention in the content for non-native English speakers such as myself. Please balance it better on new videos. You could have kept it playing through the end of the video, but with a lower volume as well
      Other than that, great video. Thanks a mil

    • @alexandertarasenko3038
      @alexandertarasenko3038 6 років тому +1

      delete vs code, install php storm

    • @alexandertarasenko3038
      @alexandertarasenko3038 5 років тому

      Lol, believe it or not I am using vscode now. Although there are some really annoying things like ""after = in html or no autocomplete for functions on html, it is quite okay. Of course ot's not php storm but there are no alterntives I guess

    • @fabriziomeinero
      @fabriziomeinero 5 років тому +2

      Alexander Tarasenko I would agree if it were open source

  • @PabloBianchiOK
    @PabloBianchiOK 3 роки тому +6

    10. Navigatoin
    - Ctrl+k Keyboard shortcuts
    - Ctrl+k Command palette: files, commands, first letters of cammelCaseThings: cct
    - Bookmark plugin
    9. Snippets
    8. Terminal: Ctrl+`
    7. IntelliSense: @ for things in the class
    6. Peek: Peek definition, find all references. Rename symbol.
    5. Paste JSON as Code extension
    4. Ctrl+k+z Zen mode
    - vscode-spotify extension
    3. Debugger
    - Debugger for Chrome extension
    2. Git
    - Gitlens extension
    1. Live Share

  • @mycroft16
    @mycroft16 5 років тому +717

    VS Code is possibly the single most important thing Microsoft has ever created. Upended my world when I discovered it.

    • @selim9648
      @selim9648 5 років тому +102

      other than windows that u use to open vsc in

    • @Sartheris
      @Sartheris 5 років тому +13

      it was very shitty in the beginning tho, but now I LOVE it

    • @mycroft16
      @mycroft16 5 років тому +15

      @@Sartheris It has definitely come a VERY long way.

    • @cesarmartinez2207
      @cesarmartinez2207 5 років тому +12

      You haven't seen .net core yet then !!!

    • @mycroft16
      @mycroft16 5 років тому +44

      @@selim9648 works on Mac and Linux equally as well.

  • @bobburch2509
    @bobburch2509 4 роки тому +72

    So glad i just found this channel, as a beginner coder this is going to help me grasp concepts much faster than other longer videos (and then I can go to the other videos for more in depth if needed).

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

      So, after 2 years of ur comment - are you good programmer?

    • @6locc6a6y_fps
      @6locc6a6y_fps Рік тому

      ​@@MikelWayder i was wondering the same

  • @RyanValizan
    @RyanValizan 3 роки тому +39

    my jaw dropped at that json to code converter! The hours i have spent making classes to handle those responses is unreal.

    • @Tangowastaken
      @Tangowastaken 3 роки тому +1

      This literally blew my mind. Is going to save me hours.

  • @FunOrange42
    @FunOrange42 2 роки тому +11

    Believe me when I say this that these are actually really useful tips. I ended up finding out a lot of these on my own while working on projects, so it would have been nice to just learn all of these from this one single video.

  • @JoelGRodriguez
    @JoelGRodriguez 6 років тому +15

    The best tip on this video for me was learning about Carbon Based Lifeforms. Thanks for putting me up on game, homie.

  • @riddheshmarkandeya7147
    @riddheshmarkandeya7147 5 років тому +28

    Please cover the 90 other topics as well. This is just amazing!

  • @andrewminhnguyen9446
    @andrewminhnguyen9446 6 років тому +74

    Wow. That "Paste as JSON" is just magic. Thank you!

    • @madhououinkyoma
      @madhououinkyoma 10 місяців тому

      I’m surprised by the amount of people that are enthralled by this extension

  • @sarevoker
    @sarevoker 3 роки тому

    I work on open source and this editor is amazing, congrats for all developers involved.

  • @sleeplessdev7204
    @sleeplessdev7204 5 років тому +8

    I've always enjoyed the Jetbrains IDEs (like Webstorm, PhpStorm, etc) because of the rich built in features.
    But you make a good case for VS Code too. Although Webstorm is powerful, sometimes the clutter of all the buttons and toolbars bother me, so VS Code might be a good alternative for those situations. Thanks!

  • @daniel-ef5tm
    @daniel-ef5tm 3 роки тому +32

    A little tip to make you code faster
    If you want to copy a line of code, instead of selecting by dragging with the mouse or shift+Arrow keys, you can simply place your cursor at the beginning of the line and pressing CMD+C
    Happy coding 😉

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

    you’re voice is so soothing and makes these videos 100x better. thank you, great video

  • @elektra81516
    @elektra81516 4 роки тому +3

    A fellow Carbon Based Lifeforms fan! Thanks for the video, I've been loving VS Code recently and am steadily migrating from VS 2017. Cool tips!

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

    Another cool feature in vscode is the docker remote-container that enables the devs to use vscode as it was inside the actual container, making the process of setup a new dev environment a breeze and make the developer experience nearer to the env where the code will actually run

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

      Wow does it work if I want to show my client the code and make him run it?

  • @carltongordon
    @carltongordon 6 років тому +17

    i`m so loving the new animations man!! really slick!!!
    and thanks for this

    • @Fireship
      @Fireship  6 років тому +2

      +Carlton thanks for watching, glad you like the new graphics :)

  • @sanketss84
    @sanketss84 6 років тому +38

    Absolutely brilliant presentation and clear explanation of the concept. Loved your style and narration I am subbed.
    Staying here as there is so much great stuff to learn , not just from a technology standpoint but great presentation as well.
    Keep sharing the awesomeness and have a great day. Lastly VS Code is also my editor of choice :)

    • @Fireship
      @Fireship  6 років тому +4

      Thank you very much, really appreciate the feedback :)

  • @angela_jx
    @angela_jx 5 років тому +12

    The spotify extension pretty much saved my life

  • @tinahuynh5107
    @tinahuynh5107 6 років тому +1

    This was super helpful for someone who just downloaded VS Code (: Thanks a bunch

  • @jon-sully
    @jon-sully 5 років тому

    Don't know if I've ever seen a video aimed at devs/development with as good of animations and graphics as this one. Wowza. Great content as well :P

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

    Update - Chrome Debugger has been depreciated so no need to install it anymore. Thanks for the amazing tips and channel.

  • @AlanDraper7169
    @AlanDraper7169 5 років тому

    I think an extension is needed to run "npm:" commands from the command pallet. The extension I found was called "npm" that looks like it does what you showed. Great video, thanks!

  • @isaacsailor1
    @isaacsailor1 4 роки тому

    Wow! VS Live Share is everything I ever wanted when I back when I did group CS projects. Better late than never.

  • @QuinnFavo
    @QuinnFavo 4 роки тому

    Steady pace and easy to understand! Thanks for the tips

  • @JamieMcI
    @JamieMcI 6 років тому +833

    vscode-spotify?? Are you kidding? Just saved all the mouse clicks.

    • @Fireship
      @Fireship  6 років тому +138

      Haha, spotify is critical

    • @axea4554
      @axea4554 6 років тому +17

      Useless for mac (have keys prev play next)

    • @byprakosoo
      @byprakosoo 6 років тому +5

      why i cant use it in win 10?

    • @JohnSlaughterJr
      @JohnSlaughterJr 6 років тому +11

      You can press the *fn* key in the lower-left of the keyboard to turn the top-row media keys back into function keys. (You can use fn with the Delete key too, to get a forward-delete on the smaller keyboard instead of a backspace delete.)

    • @dougdevine27
      @dougdevine27 5 років тому +2

      code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

  • @ImGonnaShout2000
    @ImGonnaShout2000 6 років тому +1911

    Microsoft made something good for once

    • @RpMRickyMunoz
      @RpMRickyMunoz 6 років тому +77

      ImGonnaShout2000 office?

    • @user-ie8pj4ui7p
      @user-ie8pj4ui7p 6 років тому +64

      Himanshu office sucks

    • @RpMRickyMunoz
      @RpMRickyMunoz 6 років тому +2

      LC Lin lol sure jan

    • @Rollersteaam
      @Rollersteaam 6 років тому +198

      TBF Microsoft also made .NET and C#, one of the best languages available IMO

    • @RobertKaucher
      @RobertKaucher 6 років тому +112

      TypeScript? If you are doing Angular, you are using TypeScript...

  • @WilsontheWolf
    @WilsontheWolf 3 роки тому +1

    One important key bind I use is ctrl + r to list recently opened files, as I often switch between projects

  • @BattleFailedMoments
    @BattleFailedMoments 6 років тому

    Awesome, Awesome! AWESOME. Great video quality and editing btw :) looks slick.

  • @camstuart
    @camstuart 6 років тому +4

    Really awesome stuff Jeff, and thanks for taking my recommendation!

    • @Fireship
      @Fireship  6 років тому

      + Cameron Almost every video starts with a suggestion, so thank you!

  • @bettayebabdelkrim6222
    @bettayebabdelkrim6222 5 років тому +1

    it's not just that your infos are awesome but your way of delivering them, i also like the way you designed your video to be attractive to developers, thnx dude !

  • @aindaecedo
    @aindaecedo 4 роки тому

    amazing quality. Easy to understand, thank you and congrats!

  • @taranbirsingh2927
    @taranbirsingh2927 3 роки тому +1

    Thanks for all the great tips. Plus the music recommendation. I'm loving Carbon Based Lifeforms.

  • @appleqor
    @appleqor 6 років тому

    Densely packed with juicy knowledge. Thank you. Subscribed.

  • @avimehenwal
    @avimehenwal 5 років тому

    AMazing video ... excellent quality. I ditched my older editor with vscode today

  • @H1L1CH
    @H1L1CH 4 роки тому

    Another helpful video which changes my approach to web developing. Thank you very much for what you do!

  • @dominikseljan3043
    @dominikseljan3043 6 років тому

    Great video! Didn't even know Code has such a useful features. Thanks!

  • @StephenMoreira
    @StephenMoreira 6 років тому +4

    Loved. Need a continued series. Part 2, 3 and 4 !

    • @Fireship
      @Fireship  6 років тому +3

      Just might do that. There are many other extensions and features that were left out.

    • @StephenMoreira
      @StephenMoreira 6 років тому

      I know some developers are against being over tooled, and I certainly agree. Sometimes there's just certain little plugins/extensions that just changes my life lols. The JSON as Code is gonna be great!

  • @velox__
    @velox__ 4 роки тому +56

    VS Code over Remote SSH is also amazing. Does exactly what you'd expect

    • @nonadqs
      @nonadqs 3 роки тому +3

      VSCode as SSH editor is awful and bloat, you should use nano, vim, emacs, or any other text line editor

    • @madhououinkyoma
      @madhououinkyoma 10 місяців тому

      @@nonadqssounds like you might never have used the extension. It more than just text. You can explore the file structure in the interface. I haven’t used it much but it can be very helpful.

  • @tiagotele1
    @tiagotele1 5 років тому

    Awesome! Many plugins that I didn't know before!

  • @callumvanheerden1530
    @callumvanheerden1530 5 років тому +7

    I really appreciate that this is in 4k. Thank you.

  • @mrclaytron
    @mrclaytron 6 років тому +38

    Great video man! I've been using VS code since day 1, and there are still awesome extensions I'm learning about... That JSON extension is cool!
    I've got to a point with VS Code that when someone says they don't like it, it annoys me haha.

    • @Fireship
      @Fireship  6 років тому +5

      Nice! I was a little resistant to switch about 1.5 years ago, but have not looked back since.

    • @mrclaytron
      @mrclaytron 6 років тому +2

      Angular Firebase yeah, when I first switched from Sublime, I was only about 50% in on VS Code, as some features were missing at the time... But I really liked the direction and workflow, and every month new features meant there was less and less reason for me to keep using Sublime.
      Cheers - I'm a big fan of all your videos! Keep up the good work :-)

    • @markotikvic
      @markotikvic 4 роки тому +2

      If talking about text editors upsets you maybe it's time to seek professional help. Best of luck.

    • @256k_
      @256k_ 2 роки тому

      Was a big atom fan back in the day and when vscode came out I was super resistant at the beginning but eventually I got converted and it was the speed of loading large projects. Atom was no where near as fast or efficient as vscode.

  • @indieNik
    @indieNik 6 років тому +13

    I jumped from Brackets to VSCode for the brilliant features and add-ons it provides! Powerful stuff :)
    Great stuff and video/graphics skills!
    Thank you!

    • @Fireship
      @Fireship  6 років тому +2

      Thank you. Yeah, I was super impressed from day one and it just keeps getting better

  • @nirm2246
    @nirm2246 3 роки тому

    Starting an angular project for work. That JSON to Code is going to come in so handy! I hate writing interfaces lol!

  • @sync3217
    @sync3217 5 років тому +1

    Awesome video man. I didn't even know about vscode-spotify or the json extension. Thanks! Just a quick question, what theme do you use?

  • @gilsonviana4936
    @gilsonviana4936 6 років тому

    Extremely useful tips! VS code is really changing for good the development environment. Thanks for the video.

  • @ameetshrestha6424
    @ameetshrestha6424 3 роки тому +1

    Really loved the sidebar and the icons you have there. Can you tell me what extension did you use or how you customized it?

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

    Wow, that GitLens function is life changing, thanks for creating this video! It only made me love VSCode even more lol!

  • @hotmandead1
    @hotmandead1 5 років тому

    Excellent Video Learned alot and now my workflow is even better

  • @NeerajLagwankar
    @NeerajLagwankar 6 років тому

    Paste JSON as code is a life saver! Thanks a lot!

  • @alifepenneddown
    @alifepenneddown 3 роки тому

    Please keep adding these amazing videos. It is really helpful for "junior" developers like me (no pun intended)

  • @mathewmccloskey8242
    @mathewmccloskey8242 6 років тому +2

    VS code has changed the damn game and I love it

  • @magedojo
    @magedojo 3 роки тому

    That paste as JSON extension looks amazing

  • @greensheen8759
    @greensheen8759 4 роки тому

    All of this is super helpful! Thank you so much

  • @__dev14
    @__dev14 5 років тому

    High Quality Videos! Subscribed!

  • @momchilnikolov9698
    @momchilnikolov9698 6 років тому +1

    Did not expect the Carbon Based Lifeforms reference...Nice touch!

  • @TheOnlyEpsilonAlpha
    @TheOnlyEpsilonAlpha 4 роки тому

    The Second Video i watched from your Channel and i learned something new again ^.^

  • @lh999
    @lh999 5 років тому

    All this is amazing!! Thanks for share!

  • @johnathanwhite191
    @johnathanwhite191 6 років тому +9

    the spotify plugin + carbon based lifeforms made my day! thank you

    • @Fireship
      @Fireship  6 років тому

      Nice! CBL is my fav music for programming :)

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

    This video right here! It's a lifesaver!

  • @SinanMustafov619
    @SinanMustafov619 6 років тому +3

    Great tips, thanks.
    What is the theme/skin that you are using for Ubuntu and VS Code?

  • @StrangeIndeed
    @StrangeIndeed 4 роки тому +3

    Fun fact: you can rename files refactor in VS Code with F2 shortcut.
    Even funnier fact: it doesn't apply only to VS Code; you can rename files with F2 for example in File Explorer on Windows and other applications

  • @foxjonesofficial
    @foxjonesofficial 3 роки тому

    One other tip is that in the files tab on the left you can add Npm scripts which will show all the parts of the doc

  • @zss123456789
    @zss123456789 4 роки тому

    Bless you sir, you are doing this world a big favor!

  • @jeromesnail
    @jeromesnail 4 роки тому

    I've been using code-server for a couple of days, and it's great!
    It's VS code but directly on your server.
    I set it up with a reverse proxy on one of my domain, and I can use it on ANY device as a PWA. I also set up a reverse proxy on port 5500 for live server, so you can work on your PC/Chromebook/tablet and see the changes LIVE on any device. A MUST for web development :)

  • @antondutsov8524
    @antondutsov8524 5 років тому

    Thank you for this video!

  • @hanguyen221
    @hanguyen221 6 років тому +4

    Hi! Great video, what is the color theme & file icon theme do you use tho?

  • @yogenp
    @yogenp 6 років тому +1

    I always get excited to see new contents from you. Awesome pro tips indeed. Hoping that eventually I can earn some money to start contributing. I know you love Firestore. But, it will be cool to see a video on Cloud Functions with Realtime Database and Typescript. Cheers.

    • @Fireship
      @Fireship  6 років тому +1

      Thank you, I'm sure I will find some good use cases for future RTDB videos

  • @B1Happy
    @B1Happy 3 роки тому

    Wow thanks man! Cool extensions!

  • @JustAlexSanda
    @JustAlexSanda 4 роки тому +1

    Please share the color theme you're using for your VS Code - looks really beautiful

  • @CodeInspire
    @CodeInspire 6 років тому +7

    Where and how you edit your video? Please tell me. It's amazing :)

    • @Fireship
      @Fireship  6 років тому +9

      Adobe AfterEffects + Premiere

    • @CodeInspire
      @CodeInspire 6 років тому

      Thank you :)

    • @bakk.
      @bakk. 3 роки тому

      @@Fireship What is the background music after the intro?

  • @BrentMalice
    @BrentMalice 4 місяці тому

    man youve come so far, and yet you started so hi already. ily buddy

  • @masken8355
    @masken8355 6 років тому +1

    When i downloaded Visual Studio i saw they had VS Code soo i installed it too never turned back since

  • @will_abule
    @will_abule 6 років тому +6

    Thank you finally I can code live

    • @Fireship
      @Fireship  6 років тому

      It's a very cool feature.

  • @vitale232
    @vitale232 4 роки тому

    learned so much. thanks!

  • @pnmenon1522
    @pnmenon1522 4 роки тому

    Azure extension for Vs code is another cool feature , I never access my portal while development and everything can be done by Vs code , which is great

  • @saisreenivas1003
    @saisreenivas1003 6 років тому

    super one of the greatset tutorials

  • @mayureshs80
    @mayureshs80 6 років тому +2

    Very helpful video. What color theme and file icons theme was used in the video ?

  • @meansnada
    @meansnada 5 років тому

    I like your videos a lot and I was thinking about subscribing (PRO MS) and I was wondering... do you only work on Angular or will you also include other languages/frameworks like Dart/Flutter? Thanks!

  • @Lorkin32
    @Lorkin32 5 років тому

    Big tip is to do a rundown on the new breadcrumbs! Really good

  • @codeforweb7602
    @codeforweb7602 3 роки тому

    Thank you for this awesome video! Very informative!

  • @khalidelgazzar
    @khalidelgazzar 4 роки тому +1

    Thanks .. that's a super helpful video

  • @Behrnah
    @Behrnah 4 роки тому +2

    what theme do you use for vscode ?
    awesome videos 👌🏻

  • @ostar-en7ec
    @ostar-en7ec Рік тому +2

    I love your channel. Please don't change.

  • @mateja176
    @mateja176 6 років тому +231

    05:05 We relax a little too hard hahahaha

    • @Fireship
      @Fireship  6 років тому +11

      Haha, it happens

    • @weird_oscillator
      @weird_oscillator 6 років тому +2

      CBL

    • @Fireship
      @Fireship  6 років тому +1

      My all time favorite programming music :)

    • @heyramineni
      @heyramineni 6 років тому +2

      God this music is amazing. I've just heard it after seeing it in your video. Do you have any more like these? A playlist of some kind? BTW those tips are darn useful. Thanks.

    • @heyramineni
      @heyramineni 6 років тому

      B B thank you 🙂 .. Will check 'em out...

  • @fakehub9723
    @fakehub9723 4 роки тому +1

    I recommend changing ctrl + p to shift + space

  • @Supaship6000
    @Supaship6000 6 років тому +2

    • @Fireship
      @Fireship  6 років тому

      Thank you Zack. WebStorm is also great, a sequel is already in the works :)

  • @aaaaanh
    @aaaaanh 3 роки тому

    Been using since 2017, but it’s 2021 now and I’m still like “I’ve never met this [editor] in my life” after watching this video

  • @philwood3520
    @philwood3520 4 роки тому

    Holy shit I wish I knew about this when I was working with this company and struggling using VIM and Git (via the command line). VS code has everything I could ask for and then some!

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

    05:04 that was the best story-chaining I've ever heard

  • @garethd1593
    @garethd1593 6 років тому +2

    Great new intro!

  • @yuqianhuang6394
    @yuqianhuang6394 6 років тому +3

    Nice tips!

  • @luisfernandoperezaraya2892
    @luisfernandoperezaraya2892 5 років тому +7

    Which icon theme are you using? :D Also, in some of your videos I saw that you can access the folder by just clicking the file name you are currently on, which is that extension too? Thanks! I love your videos.

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

      hey there! have you found out yet?

  • @HAWXLEADER
    @HAWXLEADER 3 роки тому

    Multi line editing and box selection are life savers (not features in the video)
    So is line moving alt+up\down.

  • @thundy3348
    @thundy3348 3 роки тому

    The carbon based life forms reference and subsequent joke made me instantly sub. Kudos sir lol

  • @wazbat1
    @wazbat1 5 років тому +1

    Biggest question I have, what theme are you using? It's lovely

  • @javierpacareu
    @javierpacareu 5 років тому

    The JSON one is pretty awesome

  • @gunitakon
    @gunitakon 6 років тому +1

    WOO new episode... currently using JetBrains IDEs, but I think once my license runs out I'll switch to VSCode. Still not sure though, I really love all the out-the-box features of JetBrains' IDEs.

    • @Fireship
      @Fireship  6 років тому +2

      Webstorm is a great product, I've just gotten used to the lightweight feel of VS Code.

    • @gunitakon
      @gunitakon 6 років тому

      I definitely get that. Especially because I'm running on a 7-year old dual core laptop.

    • @eus9
      @eus9 6 років тому

      Webstorm 4 lyf. IDEs > editors

    • @mathewmccloskey8242
      @mathewmccloskey8242 6 років тому

      VS code feels like the best of both worlds, powerful like an IDE and lightweight like an editor!

  • @pixelatedmushroom
    @pixelatedmushroom 4 роки тому

    Also fascinating that vim, which is nearly 45 years old (or vi is, anyway), is very high on that list!

  • @jacquesdurand4416
    @jacquesdurand4416 4 роки тому

    Command + P ! Changed my life !

  • @edgolub
    @edgolub 3 роки тому

    Paste JSON as type... that is amazing!