>> Welcome to VS Code Day,
and thanks for making it to the last session.
My name is Sana and I'm a Program Manager on the team.
I'm coming to you from the East Coast.
I hope wherever you're located,
you and your loved ones are safe.
Today I'm going to share some fire VS Code tips and tricks.
Some of the customization features that we've
brought on in the last six months or so.
Some of the things that I think can really make and improve
the quality of life in
the Editor for you and make it a lot better.
Let me just share my screen,
you can see my screen over here.
I have a very basic Node.js
Express app and let's get right into it.
I'm going to open up my "Settings".
Command-comma opens up my settings.
The first setting I want to show you is a warm-up one.
I just recently learned about this and I thought it
really helped improve what I was doing.
It is this one, "files.default.language".
Right now if I were to open a "New File" in my Editor,
it is a plain text file by default.
I don't get any of the colorization
and syntax highlighting I might expect.
I can change that, and right now I set it to be a "Markdown
File" because often when I'm creating new files in VS Code,
I'm just jotting down a couple of nodes,
I just want to do it in Markdown.
Now if I open a "New File",
it's in "Markdown" and I can start taking notes as I want to.
That's a really cool setting I like,
really improved my workflow.
In fact, another thing you can set this to is
actually "Active Editor Language".
This means that wherever editor I "Open" the new file from,
the new file will take on the same language as that.
If I open a new file from a JavaScript file right now,
the new file I do is
actually in JavaScript, so that's really cool.
The next setting I want to show you is a setting to
improve the suggestions that
the Editor gives you while you're coding.
This is a new setting that came in recently,
"editor.suggest.showStatusBar" and "editor.suggest.insertMode".
Let me show you what this does.
Go to my "JavaScript File",
and I type "app."
The new setting that we just added adds
this "Status Bar" underneath the suggestions I see.
Right now I can go in and press "Enter" to
insert the method it just provided to me.
I can also go back here and re-trigger my suggestions,
and I can also see if I want to
replace the method instead of inserting it.
This will replace it, that was really neat.
The "Status Bar" also tells me that I can "Toggle"
the details of the methods of the suggestions.
If I press "Control+Space"
I can also see details of this.
That's really cool, I can "Toggle"
the details if I want to because
sometimes we know that if you
provide too many suggestions, it covers your code.
You can "Toggle" the details like that as well.
To make it even better,
you can actually change the size of the "Suggest" widget.
If you want it to take up more,
if you want to make it horizontally short, vertically short.
If you just want to see one suggestion at a time, you can do that.
You can also do that for the details as well.
This way you can see and "Toggle"
the information that you want provided to
you and VS Code will remember
the sizes of the widgets that you just did over here.
All right, cool.
That's a really nice quality of life feature, I like to call it.
The next thing I want to show you is
actually a really hot feature that was
highly requested for a couple of years in
the Editor and that is "Pin Tabs".
Wait for it, are you ready?
Right-click, "Pin".
I can "Pin" the Tabs in my Editor as I want.
I can "Pin" multiple Tabs if I want to.
If I have multiple Files open and I close all of them,
the Pinned Tabs are persistent so they won't
close until you "Unpin" them. That's really cool.
They're always at the front of the rest of
your Tabs you have open.
If I want to go and play around with
more customizations with a pin tabs.
I can change this setting "workbench.editor.pinnedTabSizing".
I have it set to "Normal".
But the other options for this are "Compact" and "Shrink".
"Compact" will just show you
the File Type icon of the Tab and not the full name.
Then "Shrink" will show you the first couple
of letters of the filename.
If you want it like that, I prefer
to have this to be set to "Normal".
Then the other thing that was highly requested,
that's your really cool feature and setting
is the ability to wrap your Tabs.
If I have a couple of Tabs open,
before I would have to,
if this was disabled, I would have to scroll through all of them.
If I "Open" up a bunch of Files,
you can see that I have to scroll
through all my Editors I have open.
But now with this setting,
we just wrap onto the second row and that's awesome,
and I can see all the Tabs I have open. I really like this.
It makes it easier, for me at least,
to know what I have "Open" and what I
don't and "Pin" the Tabs I want to keep.
Another way to distinguish between the "Pin Tabs" you have open and
the "Unpin Tabs" you have open is to go
into your "Color Customizations" for your theme.
You can see here that I'm rocking the
"SynthWave '84" theme at the moment.
I can actually Customize this theme a little bit further.
I have a couple of settings for Tabs I have set.
If I uncomment this,
you can now see I have a slight yellow line
distinguishing the last of
my "Pin Tabs" and the remainder of my Tabs.
I prefer to have this because it just lets me
visually see what I have pinned and what I don't have pinned.
I really like this "Setting" as well.
Speaking of customizations,
another thing that we constantly heard from Developers
is that they want to customize VS Code in the way it looks.
VS Code, I think the best thing about it is that you
can really change it to be your preferences.
My VS Code and your VS Code could look
very different and that's totally okay.
What I want to do is show you
the "Flexible Layout" option that we added to the Editor.
If there are views in the Sidebar that you
prefer to maybe have in the Panel at the bottom here,
you can do that and vice versa.
For instance, if I wanted to take the Debug Console,
I grab it by its header and I
can place it in the Sidebar if I want to.
I can place it in its own view
or I can place it in an existing views.
I can put it in the "Debug View" over here,
and that was awesome, super-easy.
I wanted to take the search and move it
from the sidebar and put it in the panel
because if I want a wider way to look at my output,
I can do that here,
and this is now my Editor.
This is super neat. It really lets you play around with,
if you want to see things on the left,
on the right, top, bottom.
Whatever your preferred method
of viewing all your parts of your code is.
If you're the kind who mess around with
the "Drag and Drop" a little bit too much,
you can reset everything by
using the command "Reset View Locations".
Cool. Now that we've customized our Editor a lot to our liking.
What happens if I were to set up a new machine with VS Code?
I don't want to go through the hassle of taking all my settings,
all my key bindings,
the UI state that I customized just now,
having to re-set that up on a new machine.
If I had a work machine and I was
setting up a new personal machine,
I want to make sure my environment is relatively the same.
Before you spend an afternoon or a couple hours doing that,
I want to show you something called
Settings Sync that we recently added as well.
I'm going to emulate the two device workflow by using Insiders,
which I have right now, and Stable.
The Stable is like my new machine I have.
You can see here that I am actually logged into Settings Sync.
Settings Sync is what preserves
your settings and your extensions across different machines.
You can see what I'm actually syncing.
I'm syncing my settings,
my keyboard shortcuts, my snippets,
extension, UI state, syncing all of it.
Great. We go into here
and make sure that Settings Sync is turned on.
This is my new instance of VS Code I'm setting up.
Let's turn this on,
and it's going to ask me what I want to sync across my devices,
all of them as well.
Sign in with my GitHub account,
and it gives me an option to merge or replace my settings.
I want to actually replace these local settings with
the settings I've synced in the Cloud with my Insiders settings,
so I'm going to replace the local ones from
the ones that I've synced, and there you go.
My settings now look like
the settings I had in my Insiders. I can open up.
My settings are all here,
all of my extensions are here,
so as soon as I make a change over here, so for instance,
if I wanted to hide the Azure
and the Remote Explorer things over here,
if I do that, it syncs up as well over here,
and it happens pretty instantaneously.
It literally took less than a minute to set up my new machine.
I don't have to worry about the hassle
of making sure I save everything,
preserved everything, VS Code will just take care of that for me.
Now that I've signed in to VS Code with my GitHub account,
it also unlocks a couple more GitHub-related features
that make it really easy to
improve the quality of your life as a developer.
For instance, this is my sample Express app,
but I haven't backed it up yet.
It's just locally on my machine.
I go over to the Source Control view over here,
I can get an option to initialize this as
a Git repository or publish this directly to GitHub.
I'm going to press on this.
This gives me an option to publish
directly to my GitHub because I've already signed in.
I can make it a private or public repository,
so I'll make this a private one.
I can choose what files I want to push.
Let's just choose all of them.
It will, in a couple of seconds,
upload everything to GitHub,
make sure it's being tracked in VS Code with Source Control,
and I can go directly to it so that I show you what that
just opened up over here and did my first commit for me.
That was super easy, literally a push of a button to make
sure I've backed everything up in VS Code with Source Control.
Earlier, if I had to go do this,
I would go to GitHub,
couldn't empty repository, have a single file on there,
bring it down, and then drop my local files into that.
It's a roundabout way of doing this,
so this makes it a lot easier to just directly do it from VS Code.
One more thing I want to show you is if I start with a new window,
I can do something similar as well.
Now I have an empty window with no folder open,
but I want to actually clone a repository from GitHub.
Here I get an option in the Explorer to clone the repository.
Doing this clone from GitHub,
I can search for everything on GitHub.
I can either put in a link, or because I've signed in,
I get the suite options,
so I could search for anything I want.
If I wanted to do a create-react-app,
just search for it from here.
But what I want to do is actually clone this CatSaidNode project.
Within a couple of seconds, it's cloned.
I don't have to worry about choosing if I
wanted to clone over HTTPS or SSH,
this just does it for me,
you don't have to run a Git fetch.
If I check my remotes,
they set that up for me as well. Very easy.
I just have to worry about starting my code
and not worrying about getting it into the Editor.
We made it a lot easier to get started over here with those tips.
I hope that helped. Brian, back to you.
>> Fantastic. I do love tips and tricks.
You know, I'm a big fan of that, right Sana?
>> I love tips and tricks.
These are so much fun to go
through each release and see what's new.
>> I have some questions for you right off the bat.
Lots of this really is
helpful in terms of improving your development workflow,
that developer loop, so to speak,
that some folks have termed.
I've greatly enjoyed micro-optimizations, even the slightest bit,
because of how repetitive we might be doing
these things within our Editor.
In terms of extensions, though,
sometimes they help add into the productivity that we have.
What would be your favorite extension around
that thing as a tip for folks to check out?
>> My favorite extension definitely has to be Live Share.
I actually was recently showing a friend how to use Live Share,
and I just realized how amazing it is to be
able to connect with people in the same Editor.
It's really providing a seamless experience
as we're all working remotely.
I think it's increased productivity for a lot of folks in Teams.
Even students in classrooms are learning to code.
I think Live Share has made a lot of that a lot easier,
so if you're not using it, you're missing
out on an awesome experience in VS Code.
>> Live Share is fantastic.
Then in terms of your tips,
you shared a lot of tips today, but is there one,
just one major tip that's
essential that you want to share
with everybody that can help them benefit?
>> Yeah, let me share my screen.
Cool. There's a lot of really great hot tips.
I think if you haven't done a couple like autosave,
make sure you've set that to be on.
I really liked this file default language when I
showed earlier because it made it all easier to
just not have to worry about saving my file and
just working in the current context I'm in.
If I had to take a really cool tip,
I did say these were fire tips,
there was a really cool extension I found called Power Mode,
and it actually adds flames while you code,
so that was really neat.
As I'm coding, you can see some awesome, fun customizations.
>> That is fire. Well done.
That's awesome. There you go, folks.
Check out the Power Mode extension for VS Code.
Do you want to have fire as you're typing?
One last thing that I think folks might be thinking,
and I'm hoping you might be able to give us some insight here,
is there any hint as to what
might be coming with VS Code in the future this year?
>> Yeah, I think a couple of people earlier might've teased at it,
but I think we saw a lot of things about notebooks,
we saw a lot of things about Remote Development,
Codespaces, we mentioned,
all of this is on the roadmap to really
improve the different kinds of editing experiences you can have.
We worked on the current out-of-box experience,
but also involving other editors,
so notebook editors are really
useful for data science and education.
We have the new testing infrastructure,
I think Eric teased that.
There's a lot more also coming with improving
the getting started experience in VS Code,
so the Welcome page,
maybe lookout for a new one coming soon.
>> Awesome, that's fantastic to hear,
and very exciting stuff.
It's great to see how much VS Code has come
and just anticipating what else is out there for everyone.
Thank you so much, Sana. I'm definitely going to be incorporating
some of those tips into my development workflow.
>> Cool. Thank you, Brian.