@@sem6045 straight up this comment would be positive somewhere like tumblr. my brain is so tuned to that site I saw gay brackets and was like hell yeah
@@leonie9248 They simply haven't tried it 😆. One person I saw said they don't like it because it was "too complicated" or too hard to learn, which just means to me that they are just lazy
Default Keyboard Shortcuts for basic editing: Fold (collapse) all regions | Ctrl+K Ctrl+0 | editor.foldAll Unfold (uncollapse) all regions | Ctrl+K Ctrl+J | editor.unfoldAll
We can use an extension called brackets or something like that to do that too. When you select the div it gets selected in a color and you can check it out at the bottom of the page to see which is the actual div selected.
By default, it is Alt + Shift + Right/Left for expand/shrink selection. It is extremely useful especially when you have deep nested stuff. You don't need to put effort into finding precisely the start and end of an expression.
and for people that are curious about it, if you are gonna copy the text for example, you don't even need to select it, you can simply yit and you have (y)anked what is (i)inside the (t)ag... yank "is the same" as copy in vim, gonna delete it? delete what is inside the tag (dit) ✨✨✨
@@duruiz also cit for changing tag you can also sorround with another tag using vim-surround i have mapped that to ysit. Vim bindings imo are way more intuitive
@@sukhmandersingh4306 yep! I've been using nvim/vim for years and I'm always learning some new stuff. recently I've migrated to native lsp and I'm moving my plugins to lua alternative ones, everything is faster :)
I also think there is a shortcut "shift+alt+right arrow key" which lets to select items with the same indentation, its hard to explain with text but if you try it out its super useful for any language
I’m learning html now and I just started learning about div ‘s ,,, I think this is definitely gonna help me out in the future when I get more advanced 💪🏾
Well I'm just starting to learn web developement and the prospect of making stuff for the web really seems like something I would enjoy, and I think other people enjoy that too.
alternatively, there's a small arrow on the left side, where the line-numbers are located, each arrow indicates another indent. You can collaps each arrow, thus collapsing the entire indented section and selecting it, thus selecting everything inside
It might be easier on vim. You just have to press 3 key vat Boom and it's selected whole tag. But getting familiar to vim is the real problem at the beginning
There is an extension/built-in feature for colored brackets, so that your dive and shiz will be colored and you can just see what div is it closing by color yea
Dude you guys have to make a compilation video of every single one of these awesome tips on your channel Or some sort of a cheat sheet that people can use
You could also just collapse the div completely by hovering on the left of the div near the vertical number line and clicking on the 'v' shaped icon which appears. After that just copy the ... and it'll select everything inside the div element.
In Emacs I have custom commands defined to jump between lines with matching indentation. That works independently of the language the code is written in.
I think the shortcut is "shift" + "alt" + "arrow left/right" - it is also useful when you want to copy a method/class from a file and don't feel like using the mouse ^^
Thanks! Btw, Sublime Text since v2 can expand selection to scope by default. And it works for strings, arrays, and objects. Ctrl+Shift+Space, if I remember correctly.
You can see the closing tag right there, it's "", but if you are talking about the div tags... well yea. Just do your counting and struggle with your eye muscles. You are correct about that balance thing though.
I use the VIM extension for vscode. So i just need to place the cursor on the main div and type ‘yit’ to copy all the child or ‘vit’ to select them. And if you want to delete them it ‘dit’
In vim its easier. Just go to any opening/closing tag and hit '%'. It will automatically take u to the other end. What more is that this also works for curly braces, double quotes etc. So if you have a function and wants to copy the whole thing, go the opening braces and hit 'v%y'and u r done.
the original way is click at the begining of the opening tag, any language, the line will turn white so look for the closing and hold shift and click, done
There are thousands of plugins to actually lightly colorize brackets / different sections of your code so that you can remember which level goes with what. (Even tho it works better with actual programming languages like C or Java)
Наука
Bruh. I can’t freaking believe. You just added 7 more years to my lifespan.
LOL
Bruh wtf 😂 I am assuming you are a free lancer? Cause no company uses "vscode" for development Lol
@@chizuru1999 maybe not super old and bureaucratic companies.
But most companies don’t impose an editor for you to use. Especially in web development.
@@chizuru1999 what else lol
@@masamaeda9217 Whatever sails your boat or videos you watch on RUclips to learn. Reality is often different. 🤷♂️
There’s also a addon called “rainbow brackets” it gives brackets different colors based on how deep its nested
This
Yay a fellow 🌈 brackets user!
I’ll try it out. Thanks for this. Small visual aids help me out a lot
@@jeltehoekstra2952 😂
@@sem6045 straight up this comment would be positive somewhere like tumblr. my brain is so tuned to that site I saw gay brackets and was like hell yeah
You can also collapse that div from its opening tag and than copy it by highlighting the line and the start of the next line
Yep, i think it's easier for me
This
That's what I do
Yes
This, i always do this when i work on long long html like this one
I love you. No more scrolling for hours and putting my thumb to the screen to hold my place in the line!
or you could just use the cursor instead of your thumb
@@manofvulture I’d accidentally move the cursor when scrolling and have to redo it
@@deltawastaken clumsy fella
Idk for html tags but most modern text editors have something for matching the parenthesis or curly bracket. In sublime text I think it's ctrl-m
I just click the tag and follow the striped line down.
I wish this was a thing for Reddit. Can’t find who that one guy is replying to
It isn't, but thread/block/bracket collapsing has been a thing in text editors and Reddit for years to solve this exact problem.
i use old reddit which highlights it when you click the area to the left of the reply. i have never used new reddit so i dont know what happens there
Same
XD
TRUE
It's a more simpler way to do that. You can just click any where to opening tag and select it.Closing tag will automatically be marked.
exactly was just gonna say that
That's the way i do, but i liked how he put it in a keyboard shortcut, it makes it easier, since i mostly use the keyboard to everything
it's cool but your way don't work on vs code, in vs code mark disappear while selecting
The most educative short video I've watched...my life as a developer has become a lot easier 🙏❤️
Wait till he discovers vim.
Ha
this
More like wait until he discovers the vim-keybinds vscode extension
@@mymoomin0952 Yeah, this is more likely. But vim (or neovim for me) works much better than any extension
Vim is very good at robbing me by tricking me into thinking I'll save a lot of time, lol.
I usually just collapse the div and select it that way, but this is pretty nifty
Jetbrains has this by default, I think it's Ctrl w and Ctrl shift w
Try ~
Quite literally the most used key on my keyboard
@@leonie9248 They simply haven't tried it 😆. One person I saw said they don't like it because it was "too complicated" or too hard to learn, which just means to me that they are just lazy
@@branthebrave I used to be part of the Eclipse cult. As soon as I found IntelliJ, I never looked back..
@@heylittleguy26 Exactly the same here.
Man, I'm just a beginner in HTML, but y'all doing some jewels in here for vs code. I love it.
Default Keyboard Shortcuts for basic editing:
Fold (collapse) all regions | Ctrl+K Ctrl+0 | editor.foldAll
Unfold (uncollapse) all regions | Ctrl+K Ctrl+J | editor.unfoldAll
Nice, I usually just fold/collape the element I want and select it that way, but this is probably better :)
Pretty neat! visual studio has something like this (to highlight a scope) but it's more mouse-involved
We can use an extension called brackets or something like that to do that too. When you select the div it gets selected in a color and you can check it out at the bottom of the page to see which is the actual div selected.
Wow, this is amazing. There are so many features in VSC that I didn't even know I needed but will definitely help me out
Theres also expand selection (to scope). There're similar commands in all IDEs. Mostly called expand something.
By default, it is Alt + Shift + Right/Left for expand/shrink selection. It is extremely useful especially when you have deep nested stuff. You don't need to put effort into finding precisely the start and end of an expression.
Mind blown!!!!! I was literally doing this the other day and was wondering if there was something like this. Super useful thank you!
As a beginner HTML coder, can say working with layered DIVs is difficult. Genius solution, and I already use VSCode.
That's actually really helpful, you don't usually get this much value from these short content videos
in vim, this can be done with vit
visual inside tag
@Maksim Verkhoturov vscode is noice
Exactly my thoughts during the video
and for people that are curious about it, if you are gonna copy the text for example, you don't even need to select it, you can simply yit and you have (y)anked what is (i)inside the (t)ag... yank "is the same" as copy in vim, gonna delete it? delete what is inside the tag (dit) ✨✨✨
@@duruiz also cit for changing tag you can also sorround with another tag using vim-surround i have mapped that to ysit. Vim bindings imo are way more intuitive
@@sukhmandersingh4306 yep! I've been using nvim/vim for years and I'm always learning some new stuff. recently I've migrated to native lsp and I'm moving my plugins to lua alternative ones, everything is faster :)
This already exists in vim. Its three keystrokes: vat
This
I also think there is a shortcut "shift+alt+right arrow key" which lets to select items with the same indentation, its hard to explain with text but if you try it out its super useful for any language
I’m learning html now and I just started learning about div ‘s ,,, I think this is definitely gonna help me out in the future when I get more advanced 💪🏾
Fun fact: I have no idea why anyone would subject themselves to coding, but I appreciate you guys because you make the internet possible.
we do it because its fun to make the computer do what you want
@@tacokoneko this, and because you can make the craziest stuff you can imagine
Yes and yes
Well I'm just starting to learn web developement and the prospect of making stuff for the web really seems like something I would enjoy, and I think other people enjoy that too.
@@dipanjanghosal1662 how is it going for you? I started in decemeber 2023 because of the exact same reason as you
This is by far the most useful thing I’ve ever had recommended on RUclips. Not that that’s saying much, but still.
I was looking for this since my entire life. I HAVE FOUND IT. THANK YOU
alternatively, there's a small arrow on the left side, where the line-numbers are located, each arrow indicates another indent. You can collaps each arrow, thus collapsing the entire indented section and selecting it, thus selecting everything inside
Or just press % in vim...
vit to select inside of tags
It might be easier on vim. You just have to press 3 key
vat
Boom and it's selected whole tag.
But getting familiar to vim is the real problem at the beginning
Or shift+V and then %, when your cursor is inside the tag.
Use Emacs
@@lostguy362 I've tried to use it during my college years, and it was lot harder to learn than VIM :P
@@yondonjamtsganzorig7417 yeah I can understand
There is a lot to remember in emacs
There is an extension/built-in feature for colored brackets, so that your dive and shiz will be colored and you can just see what div is it closing by color yea
Dude you guys have to make a compilation video of every single one of these awesome tips on your channel
Or some sort of a cheat sheet that people can use
I know nothing of web development, but seeing how many people were genuinely helped by this video is enough to earn my like and sub! 👍
Thank you, You're a life saver.
Now I don't have to spend an hour scrolling to move large sections of code for organization.
I just love that I follow this page and learn this stuff
If you are using VIM just press "dat"
Working with react native i really needed this thanks.
Amazing. I’ve spent my week doing this on a project to add JS to a SPA! Thank you.
I like the standard way of clicking the carrot on the left to collapse parent element and select it afterwards
You can also just click or highlight the opening div tag and VS code will highlight the closing one that the tag is attached to after a couple seconds
You could also just collapse the div completely by hovering on the left of the div near the vertical number line and clicking on the 'v' shaped icon which appears. After that just copy the ... and it'll select everything inside the div element.
Programmers: I hate nesting
Meanwhile HTML programmers:
Amazing 😂 I mostly comment the beginning and the end to help me navigate... This very helpful
BRO THANK YOU, YOU JUST SAVED MY ENTIRE WEEKEND
This is a cool 👌🏾 function, thanks for highlighting it
Nice tip! So useful and will save considerable time working in files
In Emacs I have custom commands defined to jump between lines with matching indentation. That works independently of the language the code is written in.
I think the shortcut is "shift" + "alt" + "arrow left/right"
- it is also useful when you want to copy a method/class from a file and don't feel like using the mouse ^^
You can also click on the opening div and closing tag will be highlighted I think this is either a core feature or one of prettier extension.
Holy Moly 🎉 this is fire 🔥 .. my life is now fulfilled
Thanks! Btw, Sublime Text since v2 can expand selection to scope by default. And it works for strings, arrays, and objects. Ctrl+Shift+Space, if I remember correctly.
Dude, you just saved my marriage-
I have been struggling so much trying to work around a large HTML, you don’t know just how much that helped me!
I use a rainbow tag extension, it pairs open/close tags with colors
You could also use a proper IDE which includes collapse and expand features.
Another way of doing it is to just click on the div and follow the indentation line to the other div
WOW. This is Very useful for me. VS Code is a really wizard. And your work as well ❤️
I truly needed this
you can click next to the line number(where the div starts) and it will minimize the div and you can copy it (it will copy the entire div
Loved the trick and also the satisfying sound of your keyboard 👌🏻😍
You can see the closing tag right there, it's
"", but if you are talking about the div tags... well yea. Just do your counting and struggle with your eye muscles. You are correct about that balance thing though.
Thank you so much 🙏🏾
Collapsing is also cool. Because having a small screen might disturb vision of highlighted
I use the VIM extension for vscode. So i just need to place the cursor on the main div and type ‘yit’ to copy all the child or ‘vit’ to select them. And if you want to delete them it ‘dit’
I just click once, follow the line, then shift click. But this works too.
Interesting trick. I usually just use the code folding "-" sign to collapse the div and then copy it from there.
Before this I used to collapse a tag, select it in collapsed state then expand it
In vim its easier. Just go to any opening/closing tag and hit '%'. It will automatically take u to the other end. What more is that this also works for curly braces, double quotes etc. So if you have a function and wants to copy the whole thing, go the opening braces and hit 'v%y'and u r done.
Cool command! But you can also collapse the div and then highlight the 2 collapsed lines.
you can retract the div section and select it as well
I suggest also adding a feature where it highlights the line only instead of selecting if it that isnt a thing already.
I can imagine that fifteen years ago, people who were writing HTML tags on Notepad would rage quit and smash their computers.
the original way is click at the begining of the opening tag, any language, the line will turn white so look for the closing and hold shift and click, done
You've got the collapse method, or the PowerTools option which draws vertical lines between the opening and closing brace/div.
I don't even code and I feel relieved
I do code folding. This way I won't have to see the content of the selection. Much easier to the eyes. Very useful for this kind of occasion.
In intellij and other jerbrains IDEs you can +/- collapse entire areas or expand selection with CTRL-W or contract it with CTRL-SHFT-W
Thanks, it really helps
There are thousands of plugins to actually lightly colorize brackets / different sections of your code so that you can remember which level goes with what. (Even tho it works better with actual programming languages like C or Java)
My mind is blown 🤯
Thanks a lot for the tip. ❤️
There’s also something called separation of concerns and components which will avoid having that much html in a file for no reason
I like keep the cursor on the end of the first open and press ctrl+shift + [ , it collapses the div, much easier to copy that way
You could just easily click the line number for the div. It'll wrap the div and it's content and you can do whatever you want with it.
I just click the drop down next to the line number which shortens the line, and then I select😂😂. Thanks for this too
Every day I'm reminded that half of my worth as a developer is just VS code
Neat, I've just been using the collapse thingy in the side bar for years.
Doesn't work for cut or delete because its only affects first line
I hold ALT + SHIFT while using left and right to select more or less blocks of code
When I learned about this trick for the first time I felt happy and mad that I didn’t know it sooner.
Saved my life. Amazing.
Really helpful man 👍, thanks
Very helpful. Thanks 🙏
Omggg I need this fr 😭
You could also bind that to Ctrl+W and Ctrl+Shift+W to get proper IntelliJ keybinds in vscode
So cool! I was looking for a feature like this, since I was used to using it in Intellij IDEA
I am happy just to hear this man’s keyboard sound.
that's why I'm using component for group tags
Hi, Thank you. It's very cool. It's great. Please make more videos like this. Best of luck.
you can install a extension on vscode named "backet select" that does this and more
Really learning while sleeping big thanks sir
What the hell? You just blown my mind and saved a lot of time 😂❤️ thankuuuu
Eva theme gives you a line that goes from the starter tag to the closing one (upon clicking)