Instead of auto rename tag, I just use "Linked editing" a vscode setting, for me it is the same. As for extension a fairly new one I use is "Paste JSON as Code", when I need to turn json object into TS type, very helpful. Also "Pretty TypeScript Error"
9:00 shortcut for that is Ctrl + T, at least for me on Windows. That way you don't have to type pound manually. I'm actually going to try all this no tabs stuff and try to navigate more and more with my keyboard.
You mean going back/forward where your cursor was? Try Alt + Left/Right arrow to go back/forward. This doesn't navigate between symbols, but rather between last cursor positions.
I forgive you editor Randy. TH-cam is a new platform for radio/podcast folk. I will release you from JavaScript Jail if you can tell me what a Closure is?
Ignore me... it is in fact ctrl+minus (I was using cmd+minus) - The shortcuts are "Go Back" and "Go Forward" in case anyone else runs into the same thing.
Pro Tip: VSCode now has a Screencast mode which will show on the screen which keyboard shortcuts you are using. It's pretty nifty 😉and would be really useful the next time you do some of these VSCode tips videos so that we can follow along.
Not sure if mentioned already but Cmd + Shift + L won't add a cursor to every line in the selection but rather find all occurrences in the selection. I don't not have custom shortcuts, so not sure if it's a custom config, but it didn't yield the expected result for me.
Tried no tabs, couldn't do it 😂 but I saw there's an single tab setting that's kind of a middle ground that I'm trying where if you click on the tab it brings up the file picker. Kind of wish it was open editors instead.
I find it an interesting conversion when a dev can move from the file list to the open fuzzy finder (command p). I feel like newer devs who are still learning what files and folders are named, or is easier to use the file list. But once you know the framework… command p.
All I ever do: 1. Install VSCode 2. Install Docker 3. Install the "Remote Development Extension Pack" 4. Some minor sane configuration. 5. Done! Everything else is per project via devcontainers!
56:30 yes, please disable that if you have it! Recently I was so fed up with VSCode being slow in some projects and I thought the issues was TS being slow. I actually noticed that my editor would sometimes freeze before these import numbers would show up and then I decided to disable the extension and everything started working normally. Caused me a lot of frustration.
@@ianwright5919 yeah Sublime Text is definitely faster, I just really like VSCode at this point and what it offers even without extensions. I don't need it to be the fastest editor (only most usable to me), but Import Cost was really slowing it down horribly to the point of being unusable.
all is cool till you are in word or good docs and you start trying to duplicate up or down or do ctrl+d and it doesnt work and then for a moment you wonder whats wrong before realizing. awesome tips
Gotta try turning off my tabs for a while! I used Karabiner to remap my f keys on my mac to work in reverse in vscode, so whenever vscode is in focus, I gotta hold down fn to use the media keys, but in every other application they behave like normal
Maybe a custom keybinding that overloads CMD + Shift + L with a When condition that checks for selection and runs the command to insert lines across selection
With the navigate forward and back - I found the default shortcut was too complex - I'm using a hyperkey for caps lock and set the shortcuts to be: "hyperkey + a" and "hyperkey + s" to navigate forward and back and it's really sped up my coding.
37:00 I guess "todo tree" is a better variation of "better comments", it's highly customisable, and gives you icons in the gutter, and even better, gives you a panel to view all the todos or notes you are tracking. For example, i use it track and list all the "ts-ignore" and "svelte-ignore" to fix it later. Not just the todos i mean.
Re: Multiple cursors and adding props to several components at once, another way you can do it is, going to the beginning of the and then selecting doing cmd+opt+down arrow (or up) By the way, i think some of the shortcuts mentioned in the video are different to the default configuration (For example cmd+L doesn't work and cmd+shift+L is actually opt+shift+I) :-)
Using file tabs in a multi-document editor is just insane to me. Use the open file list in the sidebar! There’s literally no advantage to tiny cut-off filenames going along the top.
Based on my window management on my screen -- I dock the sidebar to the outside depending on whether I have VSCode on the left/right side on a wide monitor. Everything to the right when I'm in fullscreen.
Fun video. Can you do a Twitter poll to ask people how many VSCode extensions they use? A coworker of mine cries about VSCode being slow on his terrible corporate work machine, and I recently saw he has more than 80 extensions installed... I have 14.
I think I have about 70 installed - hard to say because some just add themes or a settings file, while others run entire processes. Go to Command Palette → Process Explorer and you'll see if there is anything hogging memory or CPU
Instead of the Auto Rename Tag I use the built in Emmet command "Emmet: Update Tag" which I have mapped to "Ctrl + Cmd + U". This works in both HTML and JSX. Another invaluable Emmet Command "Wrap with abbreviation", I have mapped that one "Ctrl + Cmd + W". I use that one everyday editing React components.
I have about 40 of those boxes - been doing it for years - the wife gives me grief, but she calls me from work for IT Support and wants me boxes of cables :P
Commenting at only 22 minutes in, already have setup a notepad of cool stuff and made some config changes. This video is more valuable than any other I've seen this year.
A couple of extension I use a lot - - calculate - you can easily do calculates (10 + 3) * 10 - select and search calculate in the command pallete - sort lines - you can sort the selected lines ascending, descending, remove duplicates etc. in the command pallete
![ได้เวลา! พาน้องแฝดฉีดวัคซีนครบ 1 เดือน🫣 [cc] แดนแพทตี้ SS2 | EP.52 |](http://i.ytimg.com/vi/IzeLtaXBLNE/mqdefault.jpg)
Instead of auto rename tag, I just use "Linked editing" a vscode setting, for me it is the same. As for extension a fairly new one I use is "Paste JSON as Code", when I need to turn json object into TS type, very helpful. Also "Pretty TypeScript Error"
Also enable in settings, auto closing tags 👍
"I don't want the editor to be my job" - spends 10 minutes talking how he created multiple color themes
😅
Wes is about a year away from being a VIM advocate the way he's navigating the code
The tab name setting changed my life. And I had to go check back on the Wes's reel to see what the entry requires
9:00 shortcut for that is Ctrl + T, at least for me on Windows. That way you don't have to type pound manually. I'm actually going to try all this no tabs stuff and try to navigate more and more with my keyboard.
What is the Windows equivalent of the ctrl + - navigating between symbols? That is just zoom in/out on Windows.
You mean going back/forward where your cursor was? Try Alt + Left/Right arrow to go back/forward. This doesn't navigate between symbols, but rather between last cursor positions.
@@rand0mtv660 that's good enough! cheers bud
What's a "hyper" key?
HEY! the thumbnail doesn’t match the video. Different outfits. Scott has a hat.
Caught red handed. Go straight to JavaScript jail.
Busted! The team was at React Miami this past week and I didn't have time to scrub for happy Scott and Wes frames.
-Editor Randy
I forgive you editor Randy. TH-cam is a new platform for radio/podcast folk.
I will release you from JavaScript Jail if you can tell me what a Closure is?
Is this open book? "the combination of a function bundled together (enclosed) with references to its surrounding state"?
Scepter theme
My favourite
Nice to see Scott using codeium - I'm curious to know his thoughts on it, and any reasons he chose it over copilot
26:36 LMAO that's exactly the first thing that came to my mind the first time I saw VSCode
ctrl+minus and ctrl+shift+minus just decreases my font size.... (PC) - but i def need to figure out that trick!
Same. Did you figure out what the binding shortcut to override was? I tried "Go to Previous/Next Reference" but it didn't override the zoom out/in.
Ignore me... it is in fact ctrl+minus (I was using cmd+minus) - The shortcuts are "Go Back" and "Go Forward" in case anyone else runs into the same thing.
Its Alt and arrows for windows and Ctrl +- for mac
Pro Tip: VSCode now has a Screencast mode which will show on the screen which keyboard shortcuts you are using. It's pretty nifty 😉and would be really useful the next time you do some of these VSCode tips videos so that we can follow along.
sticky headers is my new favorite thing, thanks wes!
logging shortcut and getting rid of import cost - thanks Scott!
Big pipe energy
The symbol search (Ctrl + T) only shows symbols in files "public" folder of my workspace. Any help pls
Not sure if mentioned already but Cmd + Shift + L won't add a cursor to every line in the selection but rather find all occurrences in the selection. I don't not have custom shortcuts, so not sure if it's a custom config, but it didn't yield the expected result for me.
Tried no tabs, couldn't do it 😂 but I saw there's an single tab setting that's kind of a middle ground that I'm trying where if you click on the tab it brings up the file picker. Kind of wish it was open editors instead.
Love the SyntaxFM theme -- I'd been looking for a replacement for the old ir_black!
I find it an interesting conversion when a dev can move from the file list to the open fuzzy finder (command p). I feel like newer devs who are still learning what files and folders are named, or is easier to use the file list. But once you know the framework… command p.
All I ever do:
1. Install VSCode
2. Install Docker
3. Install the "Remote Development Extension Pack"
4. Some minor sane configuration.
5. Done! Everything else is per project via devcontainers!
4:42 Important consideration! *Always* read your configuration before syncing. You might find than an extension saved a secret there!
git add -p is a good practice for any config files so you can clear any edits first
@@WesBos The conversation was about *editor* config. Did I miss something? or did you?
vim extension is a must!
gd, gi, gx, *, /, vim surround ...
commenting for the algo so more people find this amazing show,
Love to see it
I want an indicator (pale blue dot) in the file explorer on every file which is opened in an editor.
Excellent video! Such great info! Tons of little gems in this video. Saving for later as well. Thank you guys! 🔥
56:30 yes, please disable that if you have it! Recently I was so fed up with VSCode being slow in some projects and I thought the issues was TS being slow. I actually noticed that my editor would sometimes freeze before these import numbers would show up and then I decided to disable the extension and everything started working normally. Caused me a lot of frustration.
It is brutal.
I guess VSCode being "fast" is subjective. I use Sublime Text and in comparison VSCode does feel incredibly slow (even without extensions).
@@ianwright5919 yeah Sublime Text is definitely faster, I just really like VSCode at this point and what it offers even without extensions.
I don't need it to be the fastest editor (only most usable to me), but Import Cost was really slowing it down horribly to the point of being unusable.
all is cool till you are in word or good docs and you start trying to duplicate up or down or do ctrl+d and it doesnt work and then for a moment you wonder whats wrong before realizing.
awesome tips
It's why I switched to Obsidian.
Scott looks a lot like Christian Slater lol
i switched to syntaxfm color theme, nicee
I love cobalt theme made by wesbos
Gotta try turning off my tabs for a while! I used Karabiner to remap my f keys on my mac to work in reverse in vscode, so whenever vscode is in focus, I gotta hold down fn to use the media keys, but in every other application they behave like normal
anyone know the setting to have the git commit and sync button as one action is in VSCODE? Scott mentions it at 22:42 ?
There is a down arrow next to the button that you can change it to be commit and sync
Can you tell me how Wes shifted to multi-cursor using just one keyboard shortcut?
Maybe a custom keybinding that overloads CMD + Shift + L with a When condition that checks for selection and runs the command to insert lines across selection
With the navigate forward and back - I found the default shortcut was too complex - I'm using a hyperkey for caps lock and set the shortcuts to be: "hyperkey + a" and "hyperkey + s" to navigate forward and back and it's really sped up my coding.
37:00 I guess "todo tree" is a better variation of "better comments", it's highly customisable, and gives you icons in the gutter, and even better, gives you a panel to view all the todos or notes you are tracking.
For example, i use it track and list all the "ts-ignore" and "svelte-ignore" to fix it later. Not just the todos i mean.
Re: Multiple cursors and adding props to several components at once, another way you can do it is, going to the beginning of the and then selecting doing cmd+opt+down arrow (or up)
By the way, i think some of the shortcuts mentioned in the video are different to the default configuration (For example cmd+L doesn't work and cmd+shift+L is actually opt+shift+I) :-)
I love the editor here are few more things
Zen Mode
ScreenCast Mode
Simple Browser
Window Title
Nested Explorer Bar
Sticky headers was the first thing I turned off after the update.... Having them on confuses the hell out of me
Using file tabs in a multi-document editor is just insane to me. Use the open file list in the sidebar! There’s literally no advantage to tiny cut-off filenames going along the top.
Based on my window management on my screen -- I dock the sidebar to the outside depending on whether I have VSCode on the left/right side on a wide monitor. Everything to the right when I'm in fullscreen.
Also, you don’t need an extension for changing case and removing duplicate lines anymore.
Fun video. Can you do a Twitter poll to ask people how many VSCode extensions they use? A coworker of mine cries about VSCode being slow on his terrible corporate work machine, and I recently saw he has more than 80 extensions installed... I have 14.
I think I have about 70 installed - hard to say because some just add themes or a settings file, while others run entire processes. Go to Command Palette → Process Explorer and you'll see if there is anything hogging memory or CPU
Do you use lint or prettier?
Also how do you set up for sveltekit on vscode? I constantly having problem of it not working all the time
I learned vim motion in vscode then moved to neovim, and now everything i try to go back to vscode i could feel the lag.
need to find an new podcast for car driving now - the youtube video`s of the podcast is so good when you see it in vs code also.
Todo Tree is by far better than Better Comments
Different use cases imo
OMG why have I been taking up so much of my editor real estate with tabs 🤯 Thank you for this tip 🙏
55:39 Before the search results there is a link "Open in editor"
Instead of the Auto Rename Tag I use the built in Emmet command "Emmet: Update Tag" which I have mapped to "Ctrl + Cmd + U". This works in both HTML and JSX. Another invaluable Emmet Command "Wrap with abbreviation", I have mapped that one "Ctrl + Cmd + W". I use that one everyday editing React components.
Just use the F2 to rename everything, it's smart
Why not just use VIM-mode?
Or Neovim :)!!!
I have about 40 of those boxes - been doing it for years - the wife gives me grief, but she calls me from work for IT Support and wants me boxes of cables :P
My (Scott) wife needed a weird usb for our printer the other day and justified the entire system to her immediately.
Commenting at only 22 minutes in, already have setup a notepad of cool stuff and made some config changes. This video is more valuable than any other I've seen this year.
What icon theme is Scott using here?
Do you even vim bro
We can, we choose not to.
What is the name of the font that scott use in his vscode?
MD IO
Awesome vid!!!
Why do you use such a big line spacing, space between lines?
These are small compared to the Laravel folks. Give it a try and you might like the extra room.
cause we have huge monitors and can afford the space. Feels good
You can also run vscodium
A couple of extension I use a lot -
- calculate - you can easily do calculates (10 + 3) * 10 - select and search calculate in the command pallete
- sort lines - you can sort the selected lines ascending, descending, remove duplicates etc. in the command pallete
Best VSCode theme - Synthwave ‘84. Enable Neon Dreams!!!
is Neon Dreams is theme option in synthwave 84 theme collection ?
First
First
Where’s the trackball? 🖲️ 🔮