How to set up VSCode like a PRO!
Vložit
- čas přidán 15. 05. 2024
- Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.
Show Notes
00:00 Welcome to Syntax!
00:47 Brought to you by Sentry.io.
01:44 A recording bug.
03:18 VSCode versions.
05:59 Tabs or no tabs.
10:32 Navigation tips.
11:35 Mouse and trackpad input.
13:43 Move, select and expand by
19:07 Interface tips.
19:17 Sidebars.
24:23 Sticky headers.
26:21 Activity bar.
30:30 Show or hide?
31:35 Profiles.
32:43 Keyboard Shortcuts.
32:49 Renaming.
34:32 Extensions.
34:45 Text pastry.
36:43 Better comments.
39:03 Auto rename tag.
40:02 Change case.
40:25 Permute lines.
41:26 File utils.
43:20 Sort JSON objects.
43:50 SQLite viewer.
44:29 Spell checker.
45:42 APC.
49:19 Themes.
53:05 Final tricks.
57:44 What about the AI stuff?
01:00:10 Sick Picks & Shameless Plugs.
All links available at syntax.fm/760
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript - Věda a technologie
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 👍
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
Excellent video! Such great info! Tons of little gems in this video. Saving for later as well. Thank you guys! 🔥
sticky headers is my new favorite thing, thanks wes!
I suppose I’m a pro!. Over the years of listening to you I have installed most of these. Thank you guys.
logging shortcut and getting rid of import cost - thanks Scott!
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.
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.
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.
Awesome vid!!!
OMG why have I been taking up so much of my editor real estate with tabs 🤯 Thank you for this tip 🙏
I love the editor here are few more things
Zen Mode
ScreenCast Mode
Simple Browser
Window Title
Nested Explorer Bar
commenting for the algo so more people find this amazing show,
Love to see it
Nice to see Scott using codeium - I'm curious to know his thoughts on it, and any reasons he chose it over copilot
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
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.
Best VSCode theme - Synthwave ‘84. Enable Neon Dreams!!!
i switched to syntaxfm color theme, nicee
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.
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?
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.
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 don't want the editor to be my job" - spends 10 minutes talking how he created multiple color themes
😅
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
What's a "hyper" key?
26:36 LMAO that's exactly the first thing that came to my mind the first time I saw VSCode
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
What icon theme is Scott using here?
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.
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) :-)
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.
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.
ctrl+minus and ctrl+shift+minus just decreases my font size.... (PC) - but i def need to figure out that trick!
I want an indicator (pale blue dot) in the file explorer on every file which is opened in an editor.
Big pipe energy
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.
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
What is the name of the font that scott use in his vscode?
MD IO
Also, you don’t need an extension for changing case and removing duplicate lines anymore.
Sticky headers was the first thing I turned off after the update.... Having them on confuses the hell out of me
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.
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
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.
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!
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
55:39 Before the search results there is a link "Open in editor"
Why not just use VIM-mode?
Or Neovim :)!!!
You can also run vscodium
Do you even vim bro
We can, we choose not to.
Todo Tree is by far better than Better Comments
Different use cases imo
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. CZcams 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"?
First
Where’s the trackball? 🖲️ 🔮
First