Cookies   I display ads to cover the expenses. See the privacy policy for more information. You can keep or reject the ads.

Video thumbnail
- Hi, thank you so much for coming to this session.
I appreciate you spending one hour with me in this room,
talking about Visual Studio Code.
So, my name is Rong Lu,
and I am a program manager on the Visual C++ team.
You guys, my mic is not on.
(laughs) Now it's good.
My name is Rong Lu, and I am a program manager
on the Visual C++ team at Microsoft.
I've been at Microsoft for over ten years,
The last six years on the C++ team,
and most recently, I started working on Visual Studio Code
experience for C++ for the past six months or so,
so today we're really excited to be here,
to share what we have got in Visual Studio Code,
for C++ developers.
Oh, before I forget, before we get started,
if you haven't already, take our developer survey,
and you have a chance to win an Xbox One
by the end of the conference.
So we're gonna reveal who the winner is on Friday.
So make sure to get that URL,
https://aka.ms/cppcon.
So we do that every year, we collect developer feedback,
that really helps us shape the future of the product.
So definitely take that survey,
even if you don't care about an Xbox One.
But...
And before we are going to start talking about
what this talk is going to be about.
This is not the talk on MSVC
and VS2017,
so, 'cause we have another talk
that's going on at the same time that is about MSCVC,
Microsoft Visual C++ Compiler and Libraries,
and the Visual Studio 2017.
So if that is the content you're looking for,
you should definitely either check out that room,
or watch the video online afterwards.
But I just wanna make sure you are in the right room
and,
looking forward to talk about VS Code.
So this is what we are going to talk about in this session.
So we're gonna start off with a quick introduction
to Visual Studio Code, what the product is about.
And I'm gonna spend most of the time doing demos,
actually in the tool.
And then we will have some, a few summary slides.
So for the demo part,
actually, before I get into that.
Can I get a quick show of hands how many people
have heard of VS Code product?
Everyone? Wonderful.
How many of you have used it?
Almost everyone,
maybe
85%.
How many of you have been using it on a daily basis?
A couple, six,
seven, eight.
Okay, thank you, great.
So since most of you have
heard of the product
and the majority have used it,
I'm gonna go over the easy part fairly quickly.
So we're gonna start off with something really simple.
So I wanna do a 20 minute challenge to myself on stage.
And my team members think I'm crazy,
that I wanna do that on stage,
but I actually wanna build something from scratch,
like with zero code to start with.
And then we're gonna get into how we build the code,
and debug the code on stage,
all within 20 minutes.
So hopefully I'll be successful.
But then we're gonna move into trying out
a more complex C++ program in VS Code,
we're gonna talk more about IntelliSense features,
and how you build and debug,
with more advanced features.
And then last but not least,
I'm gonna show a few VS Code features,
how you can make VS Code your editor.
There are tons of things you can customize
in VS Code to make that your editor.
Does that sound good to everyone,
what we are gonna cover today?
Alright, cool.
Alright, so quick introduction,
'cause you guys already heard or have used it.
So this is Visual Studio which is
a really great IDE in Windows.
It is meant to be a fully-featured IDE,
which has got lots and lots of features in it.
It helps you to target multiple platforms.
It's got rich editing experience, advanced debugging,
it's also got testing, advanced diagnostics,
packaging, tons of stuff in there.
And that's what Visual Studio is meant to be.
Visual Studio Code on the other hand,
was invented with a different goal in mind.
It's meant to be a lightweight code editor.
That's why we added Code to it's name,
and we completely changed the color of the logo,
just not to confused with Visual Studio.
So it's meant to be a lightweight, but powerful code editor.
More good news, it's completely free.
It's open-source on GitHub, and it runs everywhere.
By everywhere, we really mean it.
It runs on Windows, Linux and Mac.
It has got built-in support for JavaScript,
TypeScript, and Node.js,
but it does support many more languages via extensions.
So we at Microsoft, we provide the C++
and the C# extensions,
and there's the community out there
that's providing much more language support as well.
VS Code is completely extensible and customizable,
which you'll see in some of the demos later on.
Last but no least, it's also got Git integration.
So you can pretty much do everything
from within the Visual Studio Code IDE.
So let's talk a little bit about
the VS Code C++ extension that we provide.
Basically enables C++ IntelliSense, code browsing,
code formatting, and debugging functionalities.
And since it was shipped a year and a half ago,
we have got over three million downloads.
So we are really proud of that,
and we are keeping updating this extension
on a monthly basis,
so you're gonna see a lot of updates.
And today, actually,
I am gonna show the absolute latest features
that I have installed on my machine,
that's going out this week.
So there's definitely something you haven't seen before,
that I'm gonna show you today.
And of course, it runs cross-platform,
we do support all the three platforms that VS Code supports,
that's why I have brought you two different machines today,
here's Mac, here's Windows machine,
I'm gonna do demos on both machines.
Just so you know, I'm not lying to you
that we support cross-platform,
so you're gonna see the experiences on different machines.
Alright, let's get into my 20 minute challenge.
Let me switch over
to my Mac machine.
Awesome, alright, this does not count.
Let me just show you real quick.
For people who haven't used this tool before,
real quick, how the simple layout in the VS Code UI
really, that you're working
with a couple of tabs on the left side.
This is where you see all your files, it's like Explorer,
and then this is your search,
Git, Source Code Control integration right here,
this is the debug menu,
which we're gonna use later on when we debug.
This is where you see extensions.
I don't have this machine connected,
so I don't see this list.
But otherwise, you're gonna see a full list
of extensions on the Marketplace,
that you can download and install right here.
And on this machine,
I only have the C++ extension installed.
And that's everything I'm gonna show you,
is either features in VS Code itself,
or comes with the C++ extension.
So that's the only extension you're gonna need.
And up here, a few quick menus over here,
so you have File, Edit, Selection, View, Go,
that's all for navigation.
And then you've got Debug, that's for debugging stuff.
Tasks is where you're gonna run your build tasks,
we're gonna see that later.
And then you've got Window, and Help, and that's all.
It's a really, really simple layout
for you to get started, so it's not too overwhelming.
Alright, now, if anyone want to count the time,
I'm gonna start my 20 minute.
Aright, I'm gonna do this here.
Okay, first of all,
it is gonna be from scratch, for sure.
So what I'm gonna do is
new folder here, and I'll call it CppCon.
I wanna open a folder as opposed to open a single file,
and there's a reason for why I'm doing that.
If you open a folder,
you're gonna get better IntelliSense experience.
For a single file, we have zero knowledge of your code,
therefore we're never able to provide anything.
But if you have a folder, which I'm gonna open here,
we are gonna do some magic behind the scenes.
I'm gonna show you what the magic is gonna be,
after I'm done with the challenge.
So that does not count.
I'm gonna do
a
new CPP file,
I'm gonna do a simple calculator.
So I'm gonna do it like a console-based app,
so I know I'm gonna need
CLCE.
So right away I'm gonna type in include,
you see you'll get some IntelliSense help right here,
and I'm gonna do min,
and,
start writing out my code.
So I'm gonna do STD colon, colon,
you see I get all the complete list right here,
if I type in cout,
you'll the quick info tool tip right there,
so there's definitely some magic
we're doing behind the scene,
for supporting that.
I'm just gonna type here.
- [Audience Member] So that's real IntelliSense?
- It is real IntelliSense.
It is real IntelliSense, so I'm gonna show you
how we do that, later, with the system (laughs).
Hold on that thought.
Okay, so, since I'm gonna do this a couple times,
I'm just gonna...
Do it using an instance.
And,
back here,
you'll see once I do that, I still get IntelliSense.
Okay, save,
and I'm gonna do my
calculator.
And I will have one method,
one function queue that's public,
and I'm gonna have it return
integer,
and I'm gonna pass in two integers,
and a char as the operator.
Now I'm gonna implement this for you.
This function which goes,
calculator,
and I get IntelliSense here as well as I type,
I get
function
and I'm gonna do
Y,
see how hard it is to type on stage?
That's why it's a challenge!
Okay, so I'm gonna cheat a little bit here.
If you will let me.
I'm gonna copy over--
(audience laughing) - Well, don't laugh.
There's a reason I'm doing this, okay?
(laughs) Okay, paste in the code,
looks fine, but the formatting is kinda weird,
so I'm gonna do right click and save format selection,
and it's formatted.
We do support the Clang-Format in VS Code.
Don't laugh! - You got a thumbs up
over there.
- Okay, good.
Alright, now I'm gonna just call this function in my min,
method,
and do please
enter
number one,
and operator number two,
like that.
I'm gonna take user input, before I do that,
I'm gonna need a few variables.
Int, and I need a char as my operator.
Just see,
and you
calculate across,
and,
that value to result,
and you see I got IntelliSense again here.
And as you can see as I type,
I get the prompted hints as well,
so it tells me what to input there.
So it's X, as I move onto the next argument,
it's gonna highlight the different argument
in the argument list.
So it's really handy here.
And, last I'm gonna,
output my
result,
is...
Alright.
Wait, I need a result.
And end.
Okay.
Okay, let's do the format document,
so everything I typed here is all formatted nice.
Alright, I think I'm done.
Did I miss anything?
Let's try, how 'bout let's try.
So I did a bunch of typing,
now if I'm good with the code,
let's try, how 'bout let's try build this code.
So Visual Studio Code does not come with a compiler,
which means you have the freedom to choose
whatever compile you wanna compile with.
So in this particular case, I'm on a Mac machine,
so I'm gonna use GCC to compile this code,
I already have that installed.
But how are we gonna tell VS Code
how to compile this code using GCC?
Now let's do that.
I'm coming from a Visual Studio background,
so what the first direction for me would be,
I wanna do Control+Shift+B.
That's how I build, right?
So it's actually going to be
the same stroke of key in VS Code.
So on Mac, it's gonna be Command+Shift+B,
or, if you wanna go there to Tasks,
there's gonna be Run Build Tasks menu there.
So if I click on that now it's gonna tell me,
that no build task found.
Press Configure Build Task to find one.
So basically, I need to config that first.
So VS Code ships with at few task runners.
There's MSBuild, and a couple of other things.
But really, for what we need now,
is to run an arbitrary external command.
So I'm gonna click on others.
So, VS Code creates a tasks.json file,
this is the default things.
Really, there's only a few things you need to change here,
for VS Code to be able to know how to build.
So, first of all, I'm gonna give task name
to just name it build and this is the key here,
which is a command property.
This is where you tell VS Code
what external commands you want to run.
In this case, I'm just gonna do GCC.
I'm gonna do dash G,
this is really important if you wanna do debugging later on,
this gives you the singles.
And I'm gonna do
Calculator.cpp
file,
and output, I just give a name.
That's all I need to do really,
to config the build task.
But I could do one more thing.
'Cause this,
so far, VS Code knows this is a task.
This is the command I'm gonna run.
But it doesn't know this is a build task,
so what we could do is to say,
give it a group,
and let VS know this is a build task.
And this is my default build task.
The reason I wanted to set up this,
just so I can use Command+Shift+B to build,
as a shortcut key.
Much easier, so if I wanna do that,
or I can come here to say run my build task.
That's the same thing.
Build.
Let's see this.
Okay, it's running.
It's kinda a little small.
But this is
actually my command
ran in VS Code,
and this is the result I'm getting back from the compiler,
that says there's a warning.
Because VS Code doesn't know this compiler,
so it doesn't know what to do with this output.
So it comes back as just text in your Output window.
If you switch back to the Problems window,
you've got nothing here.
The Problems window is like equivalent
of error list in Visual Studio.
Wouldn't it be nice,
if we could just go click an arrow here,
which would take us to the code?
So actually, VS Code supports this,
by
this property here, called the problemMatcher.
What this is, is basically,
you have a few definitions
that's defined via regular expressions.
Just so VS Code knows what to do
with the output of your command.
So we actually ship a default one for GCC,
so you don't actually have to go define the regex yourself.
But you can just use this default one.
So now if we do
run again,
of course, I'm getting the same warning,
but now if I switch back,
I'm actually getting the warnings
and could-be errors in the list.
And if I double click it actually takes me to the code.
Of course, this is about what the problem was,
because it's,
because I have the switch branch,
which might not be returning anything.
So for now, I'm just gonna make my compiler happy,
by
doing this.
If I do this again,
it's compile just fine, and my problem goes away.
Alright, we're good.
Now we have our
file compiled, and I have a program I can actually run.
Let's try that,
in the Command window.
So...
That's CppCon,
and the right one, calculator,
run it.
Oh, command not found?
Oh, yeah, I have to do that.
Keep forgetting when I switch back
and forth between the machines.
Alright.
So now we got our app running,
it says I should put a number, so I do,
let's do two plus three.
Who would expect my code would just work?
The code I typed on stage would just work?
You guys, anyone bet on this working?
No?
(audience murmuring)
Oh, you guys are better than a debugger.
(audience laughing) Really, really!
'Cause I was gonna set up the debugger
to figure out what the problem was.
Alright, pretend you didn't know, okay? (laughs)
But really, I wanna show how you can
set up the debugger really, really fast in VS Code.
So now if I wanna come back to start debugging,
so either I can go to the menu,
or I can switch over to this tab here.
So you have the arrow that would launch the debugger,
but before I do that, I need to config,
set up configurations.
Currently there's nothing,
I can click on that, which is asking me
which environment I wanna choose.
So in VS Code
we support,
on Mac and Linux, we support GDB and LLDB as a debugger.
Windows, you actually have a choice of MS
Video Studio Debugger, or the GDB Debugger.
So in here, I'm just gonna pick C++ GDB, LLDB,
and similar to the tasks.json file,
there's another JSON file that's
created called launch.json,
that's what you need to define for the debugger to work.
So again, it comes with a template
and there are very few things I need to config here.
Really, the only thing that matters for launch,
is the program you wanna launch.
So VS Code needs to know the name of your program.
So,
just gonna do,
workspace/Calculator, that's all I need to config.
Now I can come back to my code,
set a breakpoint right here,
and F5.
I think that should just work.
Did I save?
I need to save this.
Okay, now, breakpoint is hit,
but we haven't put our input there yet.
Do that, okay, so it's right here.
And it's not gonna hit because I'm missing a character.
Okay, now it's back in the debugger.
So even though it's a pretty basic debugger
compared with the advanced features in VS,
it's got the basic stuff going.
As you can tell, you can hit breakpoint,
you can step over, step into the code,
I can run into the actual
code that does the calculation,
and go through and realize
I'm not getting the result I'm expecting,
because my
operator apparently wasn't
getting the plus sign I was giving it.
So now if I go back
to my code,
there, see, the result is wrong,
and my Y-value seems to be right,
my X right, my operator, it was the problem.
And then
realized
I'm getting this wrong.
Wait, so it should be like this.
So now, since I've made a change to my code,
what I need to do,
which I often forget,
is I need to review my code first before I launch it.
Right?
And there have been many times
where I just forgot to review it,
and then wondering why F5 didn't give me the right result.
So, to prevent me from making that mistake,
I'm gonna come back here in the launch.json file,
and I'm gonna tell VS Code that,
before you do launch...
Let me redo the IntelliSense.
Do a pre-launch task first,
and in my case, I'm just gonna have it run my build task.
So now if I save,
now we got
a true F5 experience,
as you would have
in any other tools.
Alright, now, here's the number.
Alright, yes!
What time is it?
15 minutes, yes, I did it!
(audience applauding) Thank you, guys.
Had to celebrate the program state.
Okay.
Before I move off this machine,
let me show you how we did the magic,
how we did the IntelliSense.
Now, by default you don't have to worry about this,
because everything is done behind the scene.
But if you wanna customize, or if you're curious,
this is what you could do.
Do Command+P,
which is gonna bring up the
Command Palette in VS Code.
This is where you can type in any command.
So, what I wanna do is to
type in
CCPP,
edit configurations.
This is the one you want to look at.
This actually generates another JSON file,
many JSON files, but I promise, this is the last one.
So we only have three,
that's the three you need to remember.
This one is for IntelliSense.
So, as you know
the IntelliSense engine,
which is the one we're using right now,
is a compiler-based engine,
so it needs to know where we could find your headers.
We need to know your includePath.
And this is where we do the magic,
is we have the default
for each OS,
so for this one, which is Mac,
this is the number,
these six numbers
of includePath,
is where we look for.
In this particular case, it's IO Stream,
which happened to be here.
And the reason I got these three paths,
is because I have Xcode installed on this machine,
so it will do a detection.
If you have Xcode,
we have additional places
where we will look for those files,
but if not, it's just gonna be a local include.
So, we also by default include the workspaceRoot,
so anything you put in there, we will find.
So, in this particular case, it's a really simple app,
so I didn't need to customize these settings.
But we are gonna see how we can customize these
in the next demo, when I switch back to Windows.
Okay, so, that's that.
And one more thing I wanna show you
before I move off this machine,
is the Source Code Control integration.
So
we have
our app running
on this local machine,
everything is good,
and now I wanted to put this under Source Control System.
So VS Code actually has Git integration
already built in,
you don't have to do anything here.
Coming here, you can do initialize repository,
which is gonna ask me for the path,
which is the current path I'm in.
Automatically it finds all the changes
I've made in this folder,
and then I can decide which files
I want under the Source Code Control,
I can stay stage all changes,
maybe remove the ones I don't need.
Back,
here you type a check-in message,
I don't have the machine connected,
but if you had,
just do this click,
you're gonna have everything check-in to your Git,
under the Git control.
You can also
have VS Code connect to your repo on GitHub directly,
and then you can publish all your changes
directly to the remote repo as well.
Now the good thing about having the code
under the Source Code Control,
is now if I make more changes to it,
real simple,
you're gonna start seeing these changes reflected in here,
in the VS Code UI.
Now I made some changes on this CPP file,
now I can right click and say open changes,
this is gonna open a side-by-side view,
to diff the changes.
Really simple, but you can pretty much just do everything,
complete your code build debug,
check-in the code into Source Code Control System,
all from within VS Code.
Okay, so, let's go back now.
Okay, so that was the first demo.
And I did show you this one more thing,
just to remind myself, I don't forget about Git integration.
Okay (laughs), now,
now let's try a different machine, Windows here,
and we're gonna look at a more complex program.
'Cause you might say,
the calculator is too simple, too easy.
And
how we gonna deal with a much larger project?
And a lot of times,
you might be dealing with codebase
that you didn't write,
that's some other people's codebase,
and you might be getting stuff off GitHub,
and just wanna read the code or make some changes.
And you can actually do all that in Visual Studio Code,
with the help of IntelliSense and code browsing features.
So, what I have here, is I already have a folder open.
This is
a project on GitHub,
which I can show you real quick.
It's called
wxformBuilder.
It's a pretty sizeable project.
It basically is a designer-based tool
for you to help you design widgets or forms,
and then it can automatically generate all kinds of code.
C++, PHP,
so it's a pretty complex codebase.
So if you look at all these source codes
for the multiple folders,
lots of .cpp and header files in here,
and in here, this deals with all the designer stuff,
so there's a lot more stuff in here.
Utilities,
lots of files.
And here's our maingui.cpp file.
Without really knowing much about this codebase,
I'm just gonna
go and open
a CPP file,
right here.
Okay, so here's what you usually get,
when you open a project that you really don't know,
is hey, now I'm getting all the squiggles,
what am I gonna do?
'Cause as I said,
the IntelliSense engine really needs to know
where to find these headers.
And by default, we show you a bunch of green squiggles.
Has anyone seen these green squiggles in your codebase,
somewhere in VS code?
So what'd you guys do,
what would you do when you see these green squiggles?
- [Audience Member] That's when I open it up
in Visual Studio.
- That's when you open in Visual Studio,
well you have the option.
But if you're on Mac and Linux, you don't (laughs).
So let me show you some techniques,
actually some of the new latest features that we developed,
that could hopefully help to make that easier,
'cause we know it's a pain,
to have to go through each header file
and then find out where they are and add them manually,
each one into the includePath.
So, let me,
do this,
as well.
Which is, we also show these problems
in the Problems window,
where you can see what files we're missing.
In this particular case,
the first file missing
is model/types.h
which is a direct reference from this file.
So if you hover over this,
this squiggle,
it's gonna say there are include errors detected,
please update your includePath.
That's when you need to manually add all the includePath.
Remember that JSON file I showed you,
that's where you add your includePath.
But the second half of the message basically says,
the IntelliSense features for this translation unit,
will be provided by the Tag Parser.
So what is a Tag Parser?
Tag Parser is basically a fuzzy parser that we use,
to assist with IntelliSense features.
So
it does not validate
or recognize the full C++ syntax,
it basically simply,
matches an input stream of tokens with some patterns,
it does not know about types,
other than the built-in types.
It does not have the full context of macros,
it's scope, it's translation unit,
is strictly within single files.
Meaning it does not follow through your pound includes.
It does not have knowledge of that.
But regardless of all those restrictions,
it is a super fast.
So it can run pretty fast on large code bases.
That's why we use that to assist
our IntelliSense experience.
But right now,
this is saying the true compiler-based IntelliSense engine
is getting errors,
so everything here,
all the IntelliSense experience you're getting here,
is provided by Tag Parser.
Because Tag Parser has more knowledge,
even though it's not, it's fuzzy, it's not super accurate,
but it actually runs fast,
and has some knowledge of your code.
So here's, give me a,
I will give you an example of what I meant by
fuzzy results.
So if I hover over here on this method,
you'll see lots of possible matches.
And in fact,
this one here has a really, really long list.
Because arrays
could be a member of
vector, could be a tree, could a string, could be a list.
The Tag Parser doesn't know where it comes from
because it does not know the other types.
If I type in here to get my
parameter hints,
it's gonna circle through all these different signatures.
But, in some cases,
the Tag Parser would be doing a good job
when there's no ambiguity
in the symbols.
So in some cases, you can actually
get pretty good results hovering over.
So that's how the Tag Parser works
in the current experience you're getting by default,
is what these green squiggles indicate.
But we really, really want to get
the compiler-based syntaxes working,
because then we can get much more accurate results
when you type code, when you hover over,
you know exactly which method you're looking at.
So here's the new thing we added.
And it might not be out now, but it will be today.
So,
if you click on those green squiggles,
you should see a light bulb on the left side,
and that gives you a number of options.
So if you guys are using
the latest C++ extension before this one,
you should already have seen these two options.
But this is the new thing,
is we are giving you suggestions,
where you might be able to find those headers.
So if I click on that, what happens
is if I go over to VS Code
and go to that JSON file,
under Windows,
here's my includePath.
So what just happened was we automatically added
the suggested path to includePath.
So you don't have to go through them manually.
So that's great.
Now let's come back to this file.
Of course, I'm still getting squiggles,
because there are multiple headers I need.
And this time, it's actually not types.header, .h,
if you look at this in the Problems window,
they're saying we can not open this wx/string.h file,
which is not a direct include,
but it is a dependency of my direct include.
So we are giving you more information
about what file we are looking at, we're looking for,
so you need to basically give us this string,
and this string.h, where that file is.
Right now what I'm gonna do,
is I have to probably go back to my File Explorer,
and start searching here, right?
To find where the include, where the header is.
That could be a really tedious task,
and I really don't wanna do that on stage, especially.
So what I'm gonna do is a new thing we added,
because of these suggestions that we populate,
the way we populate that.
Let me do that first,
and then I'll explain to you what we are doing.
So I'm gonna copy over these three includes,
which has the basic mingw/include,
and some special things.
This is also mingw,
and some special things that this project is using.
But I don't know all the subdirectories.
All I know is all these root folders
seem to have lots of stuff in there.
But they are because of
so many deep subdirectories inside,
I'm just not gonna go through that.
But, I'm gonna have my
lovely Tag Parser do the work.
Because the Tag Parser is a tireless hard worker,
that's gonna go through everything in this folder.
So in addition to the includePath,
what we have here in the JSON file is a browse path.
I'm just gonna do that first,
save it, and let it do the work.
You can see it's on fire.
It's on fire.
So we need to wait for that to finish.
But essentially what we do,
is the Tag Parser is gonna search though
everything in those folders.
It does it recursively,
so it's gonna search through all the subfolders.
So the difference between
the compiler-based engine and Tag Parser,
is Tag Parser does it recursively.
But the IntelliSense engine does not.
IntelliSense basically takes whatever includePath
you would have passed to the real compiler,
so it has to be exact paths
where you can find those headers.
But Tag Parser doesn't care,
it's gonna just go and look for those,
everything in those home folder,
is gonna store all this information in the database,
so it can look up really, really fast.
That's how we use
these,
we are able to use information that's
searched by the Tag Parser to populate these suggestions.
So if we come back here, we get more suggestions.
Yay, this is a subfolder under the includePath,
that I just pointed to, right?
Now instead of us having to search through,
Tag Parser does the work,
says, hey, we found some possibilities.
Now in this case,
I was actually able to solve
all those three green squiggles,
now we only have two left.
Yay, big progress.
Now once you do the change,
do an update to the includePath,
the Tag Parser is gonna keep working.
It's a really, really hard worker.
Now if I come back here,
now we're getting some other IntelliSense results.
I'll just add that one, so that goes away.
Oh, there's only one coming back.
Getting so close.
This one is getting something.
Oh, okay, more suggestions
for this particular one missing,
which is the /setup.h file.
So this is where the fuzzy result matters,
is because Tag Parser doesn't really know
it has multiple choices.
That's why we don't do everything for you automatically.
But we instead, we provide these options to you,
so you can tell us which one is the one you wanna pick.
So in this case, I will pick this one.
And of course, even if you pick the wrong one,
you can always come back to the JSON file
to modify manually.
But the idea is really about hey, let's help out here,
and let the Tag Parser do the work instead.
And all you have to do
is to do multiple clicks on these light bulbs.
Now we have some more...
Does it go away?
No, I might need to do that with some more time.
Oh, that's another challenge to do on stage,
is to get rid of all the squiggles!
See how hard that is, it keeps coming back!
Okay, how many people bet this time will work?
Yes?
No!
More squiggles.
But I'm done, I'm done here.
I'm not gonna try to resolve this on stage,
that's too hard.
But what I'm gonna do is to show you another thing.
So there might be cases
where you just can't locate the headers,
like either the ones you currently don't care about,
or you just can't locate at the moment.
So the question is,
at this stage, I've tried really hard
to get rid of the green squiggles.
But if I really want to use the compiler-based IntelliSense,
can I do that?
So,
yes you can.
Here's the option you want to use.
Is, so go back to light bulb,
and say force semantic IntelliSense.
What this does,
is,
it forces our IntelliSense to use
the compiler-based IntelliSense,
and not using the Tag Parser
to provide IntelliSense results.
So of course we are getting the red squiggle instead,
that's an indication that you're using
the compiler-based IntelliSense engine.
Of course, that might be something
you wanna solve eventually,
because that's gonna be a build error.
But, the good thing about enabling
the compiler-based IntelliSense,
is now actually you're getting real squiggles,
that reveals real problems in the code.
Just to be clear, this is not a bug in this project,
that's just a bug that I inserted here,
just so I can show you the squiggle,
but it's not a problem with the project.
So first of all we get this squiggle
that's telling us I'm not using this,
I'm not calling this function right,
because I'm not matching any of the argument lists.
Now if I do,
remember we're getting lots of results before,
like ten or so,
and when we circle through the parameter things,
now I'm only getting one.
Oh, I'm sorry I'm getting two.
Because our IntelliSense engine,
the compiler-based one is really accurate,
it knows exactly
which function this comes from.
So now I can type in,
as I type, I actually get auto-complete as well,
as I move over, it moves over to the second parameter.
Okay.
Fixed that, oops.
Switching back from Mac, clicking on the wrong keys.
Okay, so that squiggle goes away, that's awesome.
So we can actually leverage the red squiggles
to
fix real issues in the code,
and
basically what we do so that
the full experience coming with the C++ extension,
eventually, we are still experimenting these features,
but eventually the idea is
we're gonna turn on the compiler-based engine
as the default, if it runs into any issues,
like any include errors that you see earlier,
we're gonna automatically fall back to Tag Parser
to provide the results.
So you still get fuzzy results,
but you are not buried in like tons of red squiggles
all over the place.
That is why we had this automatic
fallback mechanism in place.
So I'll definitely recommend
everyone to use the
engine,
the compiler-based one as the default,
'cause you don't have to worry about
squiggles all over the place.
'Cause we'll always fall back,
but as soon as you fix,
you tell us all the includePath,
as soon as it's configured correctly,
we're gonna automatically switch back
to the compiler-based one so you get the better results.
So you don't ever have to worry about that setting, really.
Other things I wanna show you,
is if you're reading a large codebase,
you wanna navigate through different files,
we actually have built-in code browsing features.
Right now, all these code browsing features
are provided by the Tag Parser.
So we are working on getting them to
use the new IntelliSense compiler-based engine as well,
but we are still in the process of doing that.
But just to show you real quick,
right now, as of now, this is the experience you can get.
So if I click on a function,
I can go to definition, of course.
Or I can hold the control key to click,
that takes me to the CPP file.
From here we can do a switch header source,
that's gonna take me to the header file.
Of course I can always just go
to the different declaration directly.
I can do a go-to, which takes me to a different file,
or I can do a peek, which brings in the definition
into an embedded window,
so I don't lose the context of my current file.
So those are a couple features.
Other things we can do is to search for symbols,
really fast.
So I showed you this Command Palette earlier.
So, if you go here and type in @,
it's gonna give popular sets of symbols,
I can type in, I can do set list,
which is gonna take me right here.
And
we could also navigate through two different files.
That's really easy to do as well.
So you do Control+P,
and you just start typing the name of the file.
So in this case, I know there's a maingui.cpp file,
and just goes over there.
So at this point you can pretty much just use a keyboard
for these quick navigations.
And here, I can do Control+P and if I do colon,
this allows me to type in a line number,
so I can do 241,
which takes me to this line directly.
Now in here, if you wanna do some more editing here,
one of the things you might wanna do,
is if you have similar things in multiple lines
and you wanted to edit multiple lines at the same time,
you can actually do that in VS Code,
real quick with just keyboard.
You wanna hold Control+Alt,
and move your up and down arrow,
now I have multiple lines selected,
I can select them all together,
I can start type, I even get IntelliSense as I type.
But that's really, really convenient
if you wanna do multi-line editing.
Okay, lots of the editing and code browsing features.
Now let's talk about build a little bit.
So earlier on we built a really simple CPP file,
with just GCC command.
This project is a lot more complicated.
So it is actually set up to build with Make.
If I go in here,
go to this folder, gmake,
it's got a lot of the Make files already generated,
so what we wanna do with this project,
is we wanna build with Make.
You can actually do that in VS Code,
because we can run any external commands,
you can do whatever you want.
So I'm gonna come over here.
This is my tasks.json file, we are familiar with this.
This is the command.
Last time we just passing simply, passing G++,
this time I'm using calling a BAT file that I created.
You can do anything there, so the BAT file I have,
is really, really simple.
It basically goes into the build folder,
and say make me a debug build.
And that's all I need to do.
And of course, I can still do
Control+Shift+B to view my project.
That's gonna pick up the change I made in the CPP file,
when I fixed the argument lists,
and it's gonna link,
in a sec we are gonna have our
app built.
Alright, it's done!
So that's building in VS Code
with the more complex project system,
and last but not least,
we can still debug this app.
This is an EXE file.
So
if we go to
launch.json file,
and let me show you real quick.
So in the last demo I showed you how to do launch.
Basically just need to pass in this parameter,
the program name,
basically that's all you need to do as well.
So last time we debugged with LDB,
and this one I'm debugging with GDB, very, very similar.
All it needs is where we can find this program,
which is this EXE file right there.
Now let me switch back to our, oh sorry, to my code,
let me show you something real quick.
Just type in this file,
'cause I know there's something interesting here.
So in the CPPCG files actually doing code generation.
As I mentioned this a form builder,
which then generates a CPP file,
or lots of other languages file.
This is where that happens.
I know there are,
there's a function in here
that actually takes the property
of those controls on the designer,
and turn those values into the code.
Let's say I really wanna debug this,
but I'm so lazy that I don't even wanna set that breakpoint.
But, I'm gonna come back here to the breakpoint.
Last time we simply just clicked to get the breakpoint set,
but here, I can actually type in the function name,
to let VS Code find our breakpoint right there,
by looking at the function name.
So now, I should be able to launch
the EXE that I just built.
Right there.
There's our designer.
Okay, let me add a form real quick,
and switch over to generate some CPP code.
Yay, that's our breakpoint,
by function name.
Of course I can do the normal things.
And other things I wanna mention real quick here,
is this Watch window,
of course you can look at the local variables.
But the Watch window allows you to do expression,
expressions as well, we'll evaluate those.
So in here, let's say the type is PT_TEXT,
so when I have this expression here,
it's gonna tell me it's false.
The other thing I was going to mention is all these threads.
Not only can you see how many threads are there,
but also you can click on each frame,
to look at each frame in here.
So it's gonna be really useful
when you do multi-threading debugging.
The other feature I wanna show you
real quick in the debugger,
is if I wanna say, oh, this is a long switch statement.
Oh, really, really long.
So, if I wanna just skip all that,
and say, hey debugger, just run here,
'cause I don't wanna look at everything in between.
I can say run to cursor,
and it's just gonna go around here.
Of course, in this particular case it circles back,
but you can basically have
the debugger run anywhere you want.
Okay, so, last but not least,
when we are in the middle of debugging,
you can actually interact with the debugger,
using the Debug Console window.
One of the things we get asked pretty often,
is hey, does VS Code debugger support
viewing what's in the registers?
And we don't actually have a window for that,
we don't have the separate window for that,
but you can actually get
the same information by just come here,
and do this command, dash exec info registers,
it's gonna show you what's in the registers,
what registers are being used.
Basically you can type in any GBD or LLDB commands
in the Debug Console if you want more information,
of course you want to be careful,
because you're interacting with the debugger
at the same time as it's breaking,
so it might cause some problems with that.
But viewing registers is definitely doable,
no problem with that.
Okay, so we're running short on time.
Let me just move quickly over on these things.
So pretty much just a summary of
what I just showed you earlier in the demo.
Lots of editing features, IntelliSense,
code browsing, code formatting.
We have two IntelliSense engines,
one is compiler-based, is definitely recommended
with a red heart.
And there's a Tag Parser-based one,
which gives you fuzzy but quick results
in how you can switch between the,
you can always switch,
tell us which one to use.
There's debugging, where you can
by defining a tasks.json file,
you can pretty much run any external tasks,
which means you can build your projects
with any build systems.
We have built-in support for MSBuild,
you can of course build with Make, which I showed you.
If you have CMake projects,
we actually have an extension in the Marketplace.
This is called CMake Tools extension for VS Code,
this is created by vector-of-bool,
he did a really good job
of getting the CMake experience in VS Code
in there so you can build with CMake projects
with very minimal effort in VS Code.
External tasks, which means you can do anything else
beyond debugging as well,
you can do maybe packaging, testing, deploying.
There's problemMatcher,
and the Integrated Terminal I showed you,
and a bunch a debugging features.
Now, let me do the last demo real quick.
That, how you can customize VS Code to be your editor.
'Cause I showed you how easily
you can get things up running,
I showed you the richness of the features
across editing, building, and debugging.
Now you might still have one concern
in the back of your mind,
which is
if I'm coming from another tool,
I'm already used to the colors or whatever setting,
or they keybindings over there,
it's gonna be a deep learning curve to pick up a new tool.
Now here's good news,
is VS Code is fully customizable.
So, first thing I wanna show you is go to Preferences.
These are the settings.
Tons of settings here that you can customize.
For me, all I did was
I changed the font size for the demo,
but that's how you find it, you do font.
This is the default,
the way it works is you have to click on edit
and replacing settings.
It's gonna copy over this setting
to your side of the setting.
This is everything you are customizing,
and you change the value to whatever you want.
And you can do that per workspace, or per user.
So it applies to all of your projects.
Lots of colors you can customize.
There are different color themes in here
that you can use.
Oh, actually, there's a quick way to get to the colors.
Color theme...
They set a default,
but if you wanted to do high contrast,
I actually like this one.
Oh, this is the Visual Studio Light.
I actually like this one, it looks pretty nice.
This might be too much.
(laughs) But the idea is,
hey, we have built-in lots of themes,
and you can install additional themes.
But if that's not good enough,
you can come here and say,
I wanna totally customize all the colors to what I want.
And there's tons of stuff in there if you do
let the IntelliSense do the work.
Tons of stuff in there you can customize
pretty much everything to what you want.
And anything you customize here,
is gonna override the default theme,
what's in the default theme.
Okay, so that's the look and feel,
but if you ask about the keybindings,
here is how you can customize all the keyboard shortcuts,
every single one of them.
If that's too much work, there's good news.
If you're coming from other popular tools,
and come here to find the extension
that is designed to do the key mapping for you,
between the other tool and the VS Code.
So I don't have the network connected,
but if you do, here's what you're gonna have.
You have key mappings built-in for all these tools.
I'm not gonna name them,
but if you see anything missing
that you would like to have, let us know.
Last thing I wanna show you.
I thought it was a pretty cool,
oh sorry, wrong key,
thing is, there's a Zen Mode in VS Code.
If I do that, everything else goes away.
See, I'm just coding,
right here.
No, I don't wanna save that.
Okay, so there we go.
That's all you have, Zen Mode.
Everything is peaceful.
Okay, so, a few quick things as I said,
you can fully customize VS Code to be your editor.
Just to summarize what we covered today,
a lot of stuff for,
with Visual Studio Code, and the C++ extension,
VS Code could be a really powerful
C and C++ development environment.
And it runs everywhere, cross-platform.
So you got
a fast, lightweight tool,
that's free, open-source, runs everywhere,
customizable, extensible.
There's lots of extensions in the Marketplace today already,
but if you find anything that's missing,
it's really, really
convenient to just write your own extension as well.
And Git integration, I showed you a little bit.
And on the C++ side,
what we're adding to the experience
is IntelliSense, code browsing, code formatting,
and of course you can build and run with external tasks,
and we got debugging functionality all built-in as well.
So everything can be done in that one
UI.
Alright, I think that's my,
oh, one last minute, perfect on time.
Okay, call to action,
after the session, if you haven't already,
go download Visual Studio Code from here.
This is where you can get a stable build.
Or,
get VS Code Insider build.
This is absolutely the cutting-edge latest editor.
This is basically the daily build that we use internally,
for developing VS Code.
So you're getting the exact same build
our developers are using.
And,
we as extension,
we sometimes would experiment new features
with the Insider build first.
So you're not only getting the latest from VS Code itself,
you're also getting the latest from the C++ extension.
You don't have to install both, you just need one.
But of course, if you want to,
they run side-by-side just fine.
Just get either one of those.
Get the C++ extension, this is where you can get them,
to install from Marketplace,
or you can just install from within VS Code,
like I showed you.
Click on the Extension tab, type in C++,
find the one that comes from Microsoft,
and click install, that's all.
More links down there to give us feedback and suggestions.
Last but not least, follow us to get the latest news.
We publish on Visual C++ Team Blog,
every time we ship something new
we're gonna talk about it there.
And follow us on Twitter!
We all also publish Tweets there,
whenever we have news.
And that's all I have,
I think I'm running,
right on time.
But I'm happy to take any questions after the session,
but I wanna thank you so much for spending the time here,
really wonderful audience.
Thank you so much,
and let me know if you have any questions.
Thank you!
(audience applauding)