Это видео недоступно.
Сожалеем об этом.
Unlock VS Code Efficiency with these Hacks
HTML-код
- Опубликовано: 15 авг 2024
- These VS code shortcuts will help step up your workflow!
Bracket Pair Colorizer: marketplace.vi...
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowel...
I've been working on some courses! Find out more: www.kevinpowel...
---
My Code Editor: VS Code - code.visualstu...
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
Are there any shortcuts that you use all the time that I didn't mention? Let me know what they are!
Hey Kevin - you seem like someone who'd enjoy vim - it allows you to minimize the amount of things you need to do with your mouse.
Ever since I started using it and learnt a little, I now use it for lots of shortcuts, in a lot of programs, also as a browser extension and obviously in vscode:D Definitelly recommend; just know that the learning curve is quite steep, but I'm sure you can do it:D
ctrl + pageUp/Down
ctrl + D
Kevin Powell cmd+shift+L select all of the same token as under the cursor
1. You can replicate tabbing in browser with setting this code in keybindings.json. Ctrl+Shift+p and type keyboard and then select Open Keyboard Shortcuts(JSON).
{
"key": "ctrl+tab",
"command": "workbench.action.nextEditor"
},
{
"key": "ctrl+shift+tab",
"command": "workbench.action.previousEditor"
},
2. Install CSS Navigation extension, you can jump to class definitions from html to css. If your project includes sass and css and want definition to jump to sass, go to settings and under CSSNavigation, go to Active CSSFile Extension, then remove css from the list.
3. Rename Symbol. Inside css file, put cursor over class name and press F2 which you can rename all occurrences of that class.
Duplicate & Delete Line
1. Alt + Z or ⌥ + Z → Word Wrap
2. Ctrl + Shift + E or ⌘ + Z → Open Explorer
3. Ctrl + P or ⌘ + P → Quickly get to a file
4. Ctrl + Shift + T or ⌘ + Shift + T → Reopen closed tab
5. Ctrl + W or ⌘ + W → Close current tab
6. Alt + _Number of tab_ or ⌥ + _Number of tab_ → Quickly switch to a tab
7. Alt + Click or ⌥ + Click → Multiple Cursors
8. Ctrl + Alt + ↑/↓ or ⌘ + ⌥ + ↑/↓ → Lining up multiple cursors
9. Alt + ↑/↓ or ⌥ + ↑/↓ → Switches the selected lines
10. Ctrl + ~ or ⌘ + ~ → Opens the Terminal
♥ Keep Creating Kevin!!! ♥
Thanks, now I can print it!
Alt Shift Down to duplicate the line instead of moving it.
I knew about word wrap option and used to leave it on all the time, but I never thought about toggling it on and off only when needing to access long lines. That's a good tip.
One shortcut I really like is Ctrl/ Cmd + Page up and Ctrl/ Cmd + Page Down for toggling through tabs sequentially when you have multiple tabs open.
Another setting, not a shortcut per se I make sure to turn on is formatOnSave, really saves me time from having to manually format my code.
Another great video as always Kevin, really appreciated this one. Cheers!
Some of these shortcuts are awesome, thank you so much.
Btw, you forgot to mention ctrl+d to select matching text through the whole file and do quick edit and replace (i cannot live without it).
immensely useful
For anyone seeing this in 2022. Bracket Pair Colourizer is now built into VSCode
When you are in the cmd + p menu (Mac), you can leave the marker on the file you want, press ctrl + return (on mac) at it will open it in a new pane. use cmd + a number(again on Mac) to navigate to a window.
pretty useful that! alt+shift+DOWN should be included to rapidly copy lines of repeating codes, just as important in my opinion. emmet makes it easier but still it has its uses.
I was here just for that multiple-cursor trick in VS which I have watched a lot in your tutorials...thanks a lot, sir...it is just a life savior for me
Ctrl + shift + t
Thank you, thank you, thank you!
I hadn't heard of that one before but whish I knew about it years ago lol. I'm always closing the wrong tab too.
1. toggle word wrap
W : alt + z
M : opt + z
2. toggle the side bar
W : ctrl + b
M : cmd + b
3. toggle file explorer
W : ctrl + shift + e
M : cmd + shift + e
4. quick open a file
W : ctrl + p
M : cmd + p
5. reopen a tab you just closed
W : ctrl + shift + t
M : cmd + shift + t
6. close the active tab
W : ctrl + w
M : cmd + w
7. go to a specific tab that is open
W : alt + number
M : ctrl + number(I think???)
8. add cursor to lines above/below
W : ctrl + alt + up/down
M : cmd + option + up/down
9. toggle the terminal
W : ctrl + ~
M : cmd + ~
Kevin your videos are amazing.
I was learning bootstrap. But after watching a few of your videos on css
I think it's better learn CSS with you.
It will give me more flexibility in the front end.
I will start your course tomorrow. Thank you
ctrl+shift+a comments the selected. And ctrl+tab swith between tabs (similar to alt+tab for windows)
Ctrl + shift + p (on windows)
Now you would see a list containing almost every command available on VS code.
Searching for alt + 1 shortcut long time. Thank you.
Make sure you have active the multiple cursor. I just figured that out because It wasn't working and I inspected the program to see If I had to activate some shortcut extension XD
Hey Kevin, nice video. Would love to see how you organize your .sass files, especially the grid ones. It would be awesome if you can share. Keep up the good stuff.
Thanks for the suggestion :) - I keep changing how I approach my grids still. Once I find something that I'm most settled on I'll do a video on it :)
Make a video on flexbox layout not teaching flexbox but making complex layout using flexbox and grids. And it would be awesome if you make a series on it
Finally!!! (I am not a css person but I love your videos) and anything VSCode is amazing 😉
I don't think VS code need that much mouse movements ... because the keyborad shortcuts and easy keyborad navigation makes it almost mouse free !
Tell me what do you feel about it \/
excellent vid also great channel. Subscribed Thank you!
Very helpful as usual Kevin. Thanks!
Its excelent!! it would save me so much time if watch it before, lol. But i still learn one new one. Thanks!!!
Awesome! I'm loving it. Thanks for the tips. Are we heading towards a great big cheatsheet? VS for coding fun!!
A big cheatsheet is a good idea, thanks!
Great video with very useful information. Thank you. Not sure if my MAC is different than others. It seems to be sometimes. On MY MAC, in order to add more cursors, I have to do alt+click.
On my VS Code multiple cursers is Alt-click not ctrl-click
In my too
@@ortania Mine as well. But I'm on Linux - maybe it's a Linux thing?
amazing and beneficial
CTRL + D - create additional cursor at next find location.
This is the one ive been looking for, thanks
Hi, could you make a video about using the proper html outline algorithm?
While I wish I could, the outline algorithm isn't actually implemented anywhere. It's an awesome idea that has no use sadly.... developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
I see "Bracket Pair Colorizer 2". I'm assuming it's the same thing with fixes so that's the one I'm installing.
Does anybody know what he means by control click? Because I’m pressing control and clicking my pad and it’s not working
On Windows is alt+click not ctrl+click for placing the cursor in multipoe places
Ok ohh well... hmm.... THANKS KEVIN! You're the best!
"ctrl + right click" for multiple cursor is not working in my vs code, works perfectly fine in sublime
It's Alt+left click in VSCode.
@@BenjaminAster thanks a lot
Make a video on Skelton Screen with custom CSS
A few people have been asking for this lately, I'll look into it a bit more :)
@@KevinPowell please make a video.
RUclips has some of the video regarding this topic but not clearly explained.
Bracket pair colorizer have a different version ‘2’ if you want
Maybe b is for browser
On my VS Code (Insiders edition) alt-z was bound to "toggle zen mode" so I remove that binding and attached it to "toggle word wrap."
Huh, that's interesting.
god level
Just don't get too rambunctious using that CTRL-W close combination. If you do it once too often, you'll also close Code!
ctrl+q should quit code, not ctrl+w.... I'll have to test this, terrible oversight if it does close it!
@@KevinPowell it does close it
Ctrl + [ and Ctrl + ] indent and outdent a line for you
nice one!!! thanks
I am supriised they do let you detach the sidebar to another display
you are awesome
You didnt mention one of the best features of ctrl + p, which is you can search for something by just typing parts of the name. Like if you're looking for "index.html" you can just type inht and it will match INdex.HTml.
Can I collapse a region of html - example a nav or table section - then use down arrow somehow to move the entire section?
I think so? Be worth testing out
0:00 Hmm... I wonder what is that white window...
OBS Obviously
To toggle to the terminal for Mac is ctrl + ~ and not cmd
Oh no! I went too fast there :(
I always find it strange when things are bound to ctrl on a mac, it's so rare! I'll put a note in the description, thanks for letting me know.
@@KevinPowell np, always happy to help out
5:05 go to a specific open tab by #-if a Mac has Spaces, CTRL+n goes to Space n, but does nothing in VSC. dunno if the behavior is difference not using Spaces, but why would anyone not use Spaces on their Mac, eh?
I had trouble hunting this one down to be honest, since I'm on Windows. I had assumed it would be opt + n, since normally opt == alt on windows, but everything I saw had it as ctrl, which is a terrible key binding. I did see *a lot* of posts about how to change it to cmd + n though!
Why not use git? That way you can revert to the previously committed version should you accidently saved a file that should not have been saved.
O' u back thanks #kevin.
I use the extension Rainbow Brackets, not sure how this compares to Bracket Pair Colorizer.
Looks similar, but it hasn't been updated in 3 years now. Not sure that matters for something so simple though :)
@@KevinPowell Thanks for your response Kevin.
This is all great but how to you turn off the helpful hints that VS Code keeps shoving in my face when I'm trying to type something?
look for 'hover' in the settings and disable it
good
Love the on going tutorials, bit jealous that you've actually got 'VS Code' working though.
Many haven't: including me, and despite watching many many vids on the subject; this error constantly gets in the way.
"phpcs: Request workspace/configuration failed with message: Unable to locate phpcs. Please add phpcs to your global path or use composer dependency manager to install it in your project locally."
Set the path, reinstalled and set 'composer', then individually set the path to 'composer'. Nothing works, and as I say that error message pops up every time you open a CSS file, really frustrating.
Currently still using Notepad++, it works.
Perhaps, (with your superb teaching skills), you could do a TUT on the pitfalls of getting this horrid program to work as prescribed - just a thought.
Oft' to watch one of your other CSS lessons now, can't get enough of your laid teaching style: really learning shed-loads since finding you on u-Tube.
Many thanks, ..Many thanks, ..
Interesting, I've never did anything. I just installed it and it worked.
I'd suggest Atom or Sublime if you're having trouble with VS Code.
Are you using PHP anywhere? Really strange that that pops up when you open a CSS file.
@@KevinPowell
Hello my beloved mentor, (serious here: cos your teaching techniques are somewhat bloomin' brilliant.) Just wish that I could afford to pay you something for your time, but being retired and on the state pension does that: (it makes you broke.)
PHP wise: I'm running the Laragon Server with personal home page version 7.(something) installed: been through the rest of the WIMP WAMP Servers with varying degrees of success. I'll mention here that VS Code didn't work with any of them either. Ended up with Laragon cos it flipping well works right out of the box, and no faffing about with missing DLLs either.
(EasyPHP I'm looking at you here, what a pain that was to set-up.)
Note to self: (don't get distracted.) As I say: I'm running Notepad++ at this end with no problems whatsoever, .. I just wish it had some of the real cool features that VS Code has to offer, but unfortunately (++) hasn't got them; even with various plugins installed.
Can't win them all: many thanks for replying ..
6:26 control + alt + down/up when I do that my screen rotate is 180 degree working O.o
What vs code color theme and font is it in the video ?
I forget the font (I'm not on my computer right now and want to make sure I don't forget to reply), but the colour scheme is Atom One Dark
Kevin Powell thank you for prompt response. Please update on font if you can
Kevin Powell did you get a chance to look up the font ?
@@mayureshs80 haven't as I'm out of town for the weekend. I seem to think that I had changed it, and then went back to the default later on, which is Consolas
How do you get better at css and responsive design
By practice. Watch Kevin's old videos and watch his course on Scrimba. Watch Brad Traversy' videos and take Jonas Schmedtmann' Udemy course on advanced css
As avneet said, practice is key. The more you build, the more you learn.
Start small, go over the fundamentals, understand them and keep on pushing all the time.
Great lectures!!!
Ctrl+/ to add a comment. Works in all CSS/SCSS/JS/Html
Oh, how did I not include that, might be the one I use the most!
Isn't there some cheatsheet with all these things?
Yup, there are a few out there.
Hello sir , i have one query pls tell us how to install Python on vs code . I have already seen many videos but I am unable to understand. Your help will be greatful for me and others also.🙏🙏🙏🙏
I've never used Python so I don't think I'm the right person to help here.
@@KevinPowell oK sir , Thanks for Your reply and Your videos help me much in designing basically CSS and thanks for being here.
Why not atom or sublime?
I used to use Atom, but tried out VS Code based on someones recommendation and loved it. I prefer it's git integration over atom and a few other small things. I still think atom is great though.
I never got into Sublime.