10 Great VSCode Tips for Web Developers

Поділитися
Вставка
  • Опубліковано 8 лют 2025
  • There are lots of great extensions and keyboard shortcuts in VSCode. This is a collection of ones that I use on a regular basis.
    Please share your favourites in the comments for other people.
    HTML from video: gist.github.co...

КОМЕНТАРІ • 34

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

    When looking for the settings for an extension, without going to the GItHub repo, you can just click the “Feature Contributions” link at the top of that extension’s info page. It’ll show all of the different new settings that you can configure in the settings.json (assuming you don’t want to do it through the User Settings menu system instead, of course). You were hovering close to the Feature Contributions link and I thought that’s what you were going to show us :)

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

      In addition to listing the Settings, the Feature Contributions panel of an extension’s page also shows you the Commands, Code Actions, and Activation Events that the extension enables (which can be useful for the more IDE-like extensions out there).

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

      p.s. thanks for another great video as always Steve :)

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

    Your videos are so helpful and straight to the point.
    Zero unnecessary, off topic rambling, which unfortunately many other coding videos do include which make them hard to sit through.
    Great channel

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

    Thanks Steve for another great tutorial! Quick thing: Zoom in: Ctrl and +, Zoom out: Ctrl and -, Back to default: Ctrl and 0 (Zero).

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

    Thank you steve! You told me about this program in another comment. I will watch this soon. Appreciate your help.

  • @zerefdev
    @zerefdev 3 роки тому +8

    Auto rename tag is now integrated in vscode. no need for extra extension. Settings > Linked Editing

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

    Great video! Thank you for the tips! very useful!

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

    When adding extra cursors ( 2:35 ) and need the lines to be lined up vertically, opt - z can be helpful to toggle word-wrap. If your lines of code are wrapped, the command opt arrow shortcut will a place a cursor in the character column where you want it AND at the wrapped line ending. Toggling word wrap off solves this.

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

    Man you could be a voice actor. You have the "narrator voice".

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

      Like a distant thunderstorm, with warm honey! (Or maple syrup?)

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

    Great content. Thanks a lot.

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

    Thank you, very useful!

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

    Great video! Thank you for the tips!

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

    Hey Steve, thanks for the videos. I love vscode for web development. The only thing I don't like is that a lot boilerplate typescript is required to make a vscode extension. In vim a 10 line function usually does the trick. I see you have been making videos about PWAs. Do you know of anything that can automate a PWA from a website? I think I saw a github project for that.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому +1

      The boilerplate code is only an issue if you are building your own extensions.
      I don't know of any PWA automation tools.

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

      @@SteveGriffith-Prof3ssorSt3v3 That's true. I build my own extension a while back, I added all my commands into that one extension to avoid making multiple extensions. I only have a few commands, if it grows I will split it up into another one in the future. Thanks.

  • @Star.638
    @Star.638 3 роки тому

    Thank you.

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

    hey man great video i have just something ctrl + alt + arrow change the screen like rotate it on windows

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

    Steve- one quick question. I am a relative beginner with JS. I can play around with the language, but I am trying to improve and understand the language deeper.
    I’ve been reading The Eloquent JavaScript by Marijn Haverbeke. Would you recommend this book? It’s definitely been challenging and keep pushing me.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому

      Absolutely. Great book. Other good ones for deeper understanding are Nicholas Zakas Object Oriented JavaScript, Douglas Crockford JavaScript the Good Parts, and Kyle Simpson's You don't know JS.

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

      @@SteveGriffith-Prof3ssorSt3v3 thanks for the suggestions.
      I’m also thinking about going for the Jon Duckett JS & jQuery one, which is more visual.
      The takeaway for me is learning from books can be far more effective than udemy/FCC etc, because books are far more consolidated and allow you to have a one stop shop for most information rather than endlessly googling.
      Any thoughts/comments on just how effective a well written programming can be for learners?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому

      @@andrewgarfinkel1978 John Duckett is a good author but I wouldn't waste my time with jQuery.

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

      @@SteveGriffith-Prof3ssorSt3v3 got it. So just the JavaScript section of that book

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

    Hi bro,
    can you make a video on how to make a dependent select box like country, state , city linking each other through databases in php. I don't know Javascript. That makes it difficult.

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

    ctrl + , for settings :)

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

    In my VS Code, Clear Previous Output : on is not working.. Can you help?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому +1

      Not sure what you are talking about.

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

      @@SteveGriffith-Prof3ssorSt3v3 I use code runner to run the code. Each time I run, it prints output and outputs from previous run is also there in the terminal. I don't want this.
      There is an option in the setting to make
      ClearPreviousOutput : True
      But unfortunately this is not working. Do you know any fix?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому

      @@ravinirala9990 no. I dont use code runner.

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

    More videos like this please.

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

    Well then... unsubbed due to censorship, can't handle a link to a helpful pdf file.