Creating a Visual Studio Code Extension

[Music]
hi welcome to visual studio toolbox I'm
your host Robert Green and joining me
today is Hassan saan hello
Hassan
hi thank you in a previous episode we
looked at the cosmo DB SQL Studio
extension that Hassan wrote for visual
studio code which was awesome and if
you're working with Cosmo DB it's a
great extension to get makes it much
much easier to work with that back end
and we've done episodes before on
building extensions uh for visual studio
we did a multi-part series on the new
extension model and you can also
obviously build extensions for visual
studio code so Hassan I thought we'd
have you on the show and give us a quick
overview on how you do
that yeah thank you Robert thank you for
me again uh we are going to try to I
guess live coding today and I'm going to
show you how to create the there are
like two types you can create extension
in vs code one of them is with Native
apis and the other one is the web view
so we are going to focus on the web View
today and I'm going to try to show you
what you need to start with so we can
create new tabs in the vs code and if
you will have sometime maybe we can even
I can even show you how to publish them
to Marketplace today cool right now I
open the vs code here and we are
starting from the scratch and if you see
kind of like errors like that this is
usually like a warning error so you can
get rid of it uh for this uh session you
know I just use a set execution policy I
just don't want to see all that warning
messages so that's can actually take
care of it uh so as I said before you
know to I guess uh have a web view or
the native uh API view you're going to
need some kind of uh like references for
example you're going to need not Js it
needs to get installed uh if you need
any kind of source
control we use usually most of the git
in the vs code and rather than that we
are going to use Yen and the vs code
extension generator so those are the two
items you need to actually install
before you do anything so let's actually
start with that first so what I'm going
to do here is I am just going to write
uh npm
install G yo and the other one is the
generator hold which
is is so and what is again uh U is kind
of like a framework it just kind of you
know start from the scratch like uh for
example v c extension it just puts the
all the files together unit it's almost
like a framework puts everything
together like what vs code is actually
expecting okay so as you can see just
install it it shouldn't take that much
time I will say probably 30 to 45
seconds we should be good to go uh it
will be installed I already have them
I'm just doing this you know so you will
actually see so as you can see we are
good to go the first thing we are going
to do right now we need to create well
let's actually create a new folder here
for this let's call that
toolbox and let's go in toolbox now we
ready to run the Yen and the generator
so I'm going to Sayo code here which is
going to actually create that whatever
the vs code extension is going to need
so when you run that it's going to
actually give you some options here so
as you can see you can create all kind
of stuff here uh so I'm going to focus
on on the extension but as you can see
there are all kind of other stuff that
you can create for the vs code uh and
I'm going to go and pick the JavaScript
here I'm not really I guess that good
with the typ script so you can pick one
or the other so I'm going to go to types
JavaScript so it's going to ask you
questions so let's call this one
toolbox uh identifier let's keep it
toolbox you can have some kind of
description you can always change those
in the Json file it's going to create so
let's say this is an
aim
extension and do you want to keep the
type checking so I'm just going to keep
it nor for for now if you have you know
Source sa with the git uh the source
control you can do it from here since we
don't have that much time I'm just going
to keep this no here and I'm going to
use npm for any kind of references in
future if I want to add okay as you can
see it created all the
files and it's ready to go so I have all
the code I need to start with so I'm
going to start with open with code this
should open a whole new vs code with all
the files I need and I createit from the
yo and the vs code
generator so so far so what we are doing
good and let me see here find my cursor
and close all this stuff and let's look
at what we have so far so the I guess
the main file you want to uh look at is
the extension JS this is the area that
you know whenever you write the comment
on the vs code the activate is going to
get triggered and it's going to actually
do whatever it says so right now it says
it's going to give you know console or
congratulations and it's going to send
information to us h word from the
toolbox so it's not doing that much but
it's doing something so that's most of
your code is going to go here so we can
call that as a back end so for example
if you're WR an extension and you are
trying to create like a databases or
anything like that this is the code that
you need to add functions here and add
all the that code
into uh another one which is the packet
Json so as you can see you can overwrite
those those are items actually here
right uh version is pretty important
here and the vs code is pretty important
here especially if you want to debug so
sometimes the you know whenever you
create the framework uh the framework
might give you the wrong number here so
you want to be sure that you're going to
go in here help and check the about so
this number as you can see this is the
vscot engine should match to this number
if you want to debug locally
successfully if you don't if it doesn't
sometimes you know whenever you start
debugging uh it cannot find the comment
and it cannot even you know start the
new vs code so that's something I guess
that's the minimum version that this
extension will work in right so corre
there's no you don't have to change that
every time somebody updates their Visual
Studio code which happens about
monthly correct so you don't have to
change it but whenever initially it
should match to what you have so
whenever you debugging you know yeah it
it will work uh and rather than that
another important one here this is the
activation event so as you can see it
says title so whenever you uh press
control shift p when you start to type
this this function is going to get
trigger which I just show you on the
extension
JS so and also you know we had all the
dependencies and all kind of stuff we
will kind of look at them later but
that's really the main functionality
here we have so I'm not going to change
anything here all I'm going to do is
let's let's try this so you know it
should work so what I'm going to do here
is I'm going to go and start debugging
with F5 and I click on it it should open
a whole new vs code and as you can see
it says extension develop and host okay
so now all I'm going to do here is I am
just going to press contrl shift p and
as you can see Hello word is already
there okay so I'm going to select that
and as you can see I get a message it
doesn't that much but it's working so
yeah so far so good right promising yeah
so far so
very uh so let's close this one so
actually let's do something more uh I
guess useful so maybe try to create a
tab at least let's create a new tab when
we actually register this one now so
question is this now installed in code
forever so if you launch code is it in
separately is it installed no it's not
installed at all it's just whenever you
start debugging it just creates a new vs
code and it's available only there so
it's not install anyway yet
okay so next one uh I guess let's try to
create a new tab to create a new tab
what we have to do here is since this is
the register comment here I'm going to
create a panel so my
panel oh look co-pilot is front of me so
this is going to be nice uh so I'm going
to create a web view panel and as you
can see copile is already giving me all
kind of information so I'm just gonna
let's see I'm going to take it as it is
so let's explain first the first one is
going to be the ID so you can we can
just change that to toolbox
and this will be the title uh so let's
say uh visual
cudio toolbox
extension that will be on the Tad and
I'm just going to leave those alone
that's going to be it's going to open on
one column and well let's take this out
from here first so this is going to open
one panel empty panel so let's actually
run this one here quickly
so that's going to open a near Rees code
and I am going to go here hello word
again and Bam I have a tab okay you can
see empty there's nothing in it but it's
a good start so let's close this one and
try to put something here so as I said
before we are not doing the native API
we are doing the web view so web view is
almost like a if frame you can put all
kind of HTML uh stuff here I picked the
web view because you know my extension
is all kind of custom stuff like I have
map and all kind of stuff and those are
not really available in the native API
so that's why I put the web View and H
the web View kind of is easier
especially if you know how to write web
application HTML JavaScript you know you
can do all kind of stuff so what we need
right now is we need some
HTML so let's do that uh let's create a
function which actually returns some
HTML so let's see
if uh coil is going to do well there we
go co-pilot is good nice use co-pilot
anytime you like only time you won't
want to you know use the co-pilot when
you interview I have all kind of stories
with that so let's see uh let's see what
we have here so this is I don't really
need that much so what I'm going to do
here is I'm going to take this out from
here let's say H1 Visual Studio
code and let's do
p Visual
Studio toolbox
extension by how about that okay so
right now what we did is we just create
simple uh HTML I don't really need all
this stuff here so let's take this out
too and let's take title out so it's
pretty simple and this function returns
this HTML and it just puts on the panel
so let's run this
again and let's run our hello
word back so we have the HTML uh working
uh you know everything looks good so
what else we can do what we can do here
right now it's very simple there's
nothing going on here so probably next
what you want to do here is you want to
introduce some JavaScript here so you
can do some kind of you know uh features
so for that let's maybe try to
change uh the color of this how about
that so I'm going to go here put my
script right here I mean everything is
you know right now
hardcoded but you know you can make this
uh much better uh so as you can see here
uh the first thing you are going to need
is let me take this let me accept this
here I'm going to need the vs code acire
vs code API that is the like almost like
the native API of vs code so that by
that I can do all kind of stuff and I
can kind of send messages uh to the
extension JS extension JS can go back
and send messages back to HTML so we are
not there yet but uh that is the idea so
I just take that uh let's say rather
than doing that let's make this very
simple so what I'm doing here is I'm
getting the vs code then I have the P1
let's just change the p1's color style
color is yellow
so it's prettyy
simple uh let's see here as you can see
I can just click here this will just
refresh it and it will have the latest
one so let's PR sure everything is
working fine here let's click
refresh and well I guess this is easier
yeah so I'm going to go back here run my
hello
word and
well the color didn't change that is
interesting what might happen I have an
idea by default uh vscode will not let
you run any script so you have to Define
it in this function here as you can see
we are creating the panel here you are
going to tell you have to enable the
scripts without that it doesn't matter
how much JavaScript you have out there
it's not going to run it so let's do
this one here by you know enabling the
script here then the script should be uh
okay to go so let's run this
again and cross the fingers we are going
to actually have a yellow text this
time don't like it let's
see oh I kind of know right now so I
think what we need here is we need
the uh onload when the body is loaded I
think that is what we are going to need
here so let's
see right we are going to need document
at event listener and we are going to
look
at
D
content
loed
okay uh
from here we are going to have function
and this function should run this one
all right okay that looks better let's
try
again I'm optimistic now
make so let's run
this yay there we go all right so now we
have JavaScript maybe it's not doing Dam
much it's just changing color but at
least it's running so everything is
good uh the next thing I'm going to
actually show you here so this is might
not be that much useful because your
control is right now only in this HTML
page so what really we want is we want
to be able to send messages from here to
the our uh extension uh CS file so we
can actually do things like for example
if you say create a new database you
click a button you're going to send the
database name to extension JS and can
credit for you for example so to do that
actually vs code uses uh the web
messaging so to use that uh we are going
to actually add that in here so for that
I guess we need at least a one button so
let's put a simple button
here and let's
say all
extension Js
and
[Music]
uh actually this one has all the feature
all the stuff I need as you can see I am
using the vs code the post message is
the uh you know the web messaging post
messages comes with the HTML so I am
just sending the alert and I'm passing
this hell lab to you uh from my HTML
file so this should send a message now
we have to catch the message to catch
the message we are going to go back
here and we are going to
say as you can see my co-pilot is
working great so from here on it receive
the
message let see here they're going to
say
message uh let's
[Music]
see yep we are going to do that
and from here we can actually say show
the information text that is
great and that's it so as you can see
all we are doing here let's see what we
are missing
here
so there we go so whenever we receive
the message this is going to run look at
the C we have the alert for alert we are
going to take the same message coming
from HTML and we're going to return it
back to the HTML page page so it should
display it there so that is the idea and
let's run it and let's see how this is
going to
work
so here we go hello word we have our
button we going to click the button as
you can see this already came from the
beginning so I can just take this out
and uh
as you can see we got hello from the web
view so it looks like I did a mistake
here I make this text box this should be
I guess a button but hey it works so
every time I clean as you can see I get
the message so I'm going extension JS
and extension JS comes back to me and no
in this way you know it just gives me
the some text to display
cool
so really I think this is most the B
phics that I can that's a lot easier
than I expected it to be yeah I can
share you know I mean web view API is
pretty simple especially if you know
HTML JavaScript and you know some you
know web application kind of background
is pretty easy it's pretty easy okay so
now how do I install how do you install
this for
yourself and then you want to share it
with others what happens correct so the
next part when you are happy with what
you you want to publish this to
Marketplace so you can actually you know
share with others and people can you
just write it for yourself do you have
to publish it in the
marketplace uh you can just write it and
you can put it somewhere your vsix file
but it's much better in the kind of you
know it's central place Marketplace and
you can have all kind of information out
there you can see how many people comes
how many how many of them is downloading
it so it gives you all kind of
information you need and it's use a
devops believe it or not so and also Al
if you put the marketplace it will be
available here right so it will be much
easier for people to you know like find
your
extension so to be able to do that first
you need to actually go to the Azure
devops in here in dev. azure.com and you
have to create a new
organization uh so for example my
organization is s web and that is a my
extensions uh organization here mhm
after you create this one uh as you can
see when you click here it's going to
ask you I'm not going to go there but
it's just going to ask you Comm some
common questions about the names and you
know all kind of information so that
that part is not really tricky uh after
you create this one you are going to
actually need a personal
token uh so to create a personal token
you are going to go and click right here
user settings and as you can see you
have the personal access tokens here MH
so when you click on
it my token is here no worries the value
nobody can see even me I cannot see it
so it's here but you know uh you can
just right click here as a new token
you're going to give a name for your
token let's say new token this is my
organization the one that you know we
just this uh created in the devops you
can put an
experation uh usually I keep it 30 or 60
days and the tricky part here is you
have to actually go and click here to
show all Scopes here and find the
marketplace see right here and you have
to click the manage so this token is
going to you know manage the marketplace
uh for you so really devop is going to
be uh the I guess the pipeline out there
for
us so when you click the create here
which I'm not going to do it but it's
going to display a new token for you and
the value of the token you have to keep
it somewhere safe because you are not
going to be able to see that again in
here so wherever you feel safe I guess
you can keep it out there and if you
forget it you have to come back here and
create a new token uh for your the I
guess the area for you so that is the
first part uh you have to
accomplish the second one is after
creating the organiz a and the personal
access token you need to create a
publisher in
Marketplace so for that you go to Market
Place uh Visual Studio manage so let me
take this out from
here and when you come here this one
should be empty for me I already have
mine uh but all you have to do is you're
going to create a publisher here and
when you log in here you want to be sure
that you are picking the exactly the
same account how you create create this
organization so they can kind of match
and the token will work so it has to be
the same account so in here really there
are two uh values very important ID is
unique and this will be actually in your
url uh when you actually pass on the
marketplace and you cannot change that
so I guess pick it wisely that's uh the
ID of your extension okay and the name
uh is the you can makebe company name
brand name it will get this played it on
the marketplace page right under uh you
know the ID so those are the two
required fields that you have to do and
rather than that you can kind of add all
kind of information about you you can
put logos and other stuff and after you
know you click create here and you're
going to end up with a new you know
publisher so for example this is mine so
those are the two things you have to do
first before uh we go back to visual
studio now you have the token you have
the uh publisher now we are in here this
is our extension and I'm going to go
back to the terminal here let's
see and what I'm going to do right now
I'm going to need the visual studio code
extension and to install that you just
go npm
install Global and it's going to be vs
code VSC this is going to give me an
error because I already have that so
it's going to say that you already have
that I cannot install it but for you it
should install uh and work fine as you
can see it say it already there so the
first thing you going to do you want to
be sure that the token that you just
created works and to actually do that
you can easily write V see here
vce I believe it's login and you're
going to put your publisher name uh that
you created in the marketplace so mine
is s web and I credit it's going to say
oh I already know your token are you
sure you want to overwrite it I say no
I'm not going to do that but for you it
should ask the token and you actually
paste the token here then it's going to
remember your login for the other uh
comments that we are going to write so
I'm just going to say no here just to be
safe and this is going to work so the
next we want to publish it so put
publish it there are a couple of ways
you can publish and the most common is
really the b c
publish so when you actually enter
that which I don't want to do that
because it's going to you know the
publish in the wrong place but it's
going to ask you all kind of information
uh the biggest I guess the thing you
need to watch here is if you look at
your file so if you you can just publish
it just like that but that means that
it's going to use a package that Chason
and you want to be sure that the version
number is larger than what you have in
Marketplace if it's not larger it will
fail okay so or you can actually go here
in the publish you can actually you know
say that
1.1.1 that will take it as a version so
it will overwrite whatever you have in
the package Chase okay uh as soon
package.json it doesn't it doesn't okay
no it doesn't so from here uh when you
click the publish it's going to ask you
a couple of questions uh it's going to
check for example it's not going to find
a source control it's going to ask you
are you sure it's not going to find
license it's going to say are you sure
you want to still publish this you know
you don't have a license so it's going
to ask you some kind of you know couple
of questions you can say yes or no and
after that it's going to publish it uh
to Marketplace now a big I
guess a tip for from me because I've
been doing that for a couple of times
and sometimes you know you run it
locally you know many times it happens
every day it works for me but it doesn't
work for others right so and the main
reason for that is usually when you go
and look at the packet Chason you have
this Dev dependencies so you want to be
sure that those dependen is in you know
production too and usually that is the
problem you know maybe you just add this
typescript for example and it's
available only in death I in prod so you
might be you know missing
uh references and it might work locally
you might say that oh you know this is
great it's working you publish it it
will publish the market place but if
another user kind of downloads it and if
they don't have that reference then that
means it's gonna fail and your uh thing
is not going to work so the best I guess
the uh what I how I handle that is
usually even I know that reference is
there what you can do here is you can go
and
say here you can say V uh
scce
package so this will package it locally
and it will create uh the okay see says
the read me so you have to kind of
change something here so this is your
read me this going to be available for
everyone so I'm just going to just
change it right now say this extension
right
for visual studio toolbox so let's save
this one let's try
again so now it's going to create that
vsix file which means that you can take
that file and install it locally to your
machine there we go and after that be
sure that it's running you know in
production in your machine then try to
uh I guess publish it all perhaps you're
just writing the extension for
yourself and that's how you can get it
running always in Visual Studio code and
install it without putting it in the
marketplace and then eventually you may
or may not put it in the marketplace for
others to use correct I'm the biggest
problem is if there is something wrong
with it and you don't catch it and after
you put the marketplace you cannot roll
it back right so that is the biggest
problem that's why I kind of create that
you know I use a package and run it
locally be sure is working in my machine
uh as a you know production then I try
to publish it because if you are going
to publish something broken then you're
gonna try to fix it as soon as possible
yeah that might get ugly okay
cool
awesome yeah so I think yeah I think we
cover most of the stuff really uh
there's good documentation on the
extents on what you can do with this yes
uh if you actually look at the we cot's
uh web weite it's kind of displays it
has all the native API web view how to
do it there are some videos out there
you can watch so there's a great uh
documentation and other thing actually
maybe I can show you so this was a you
know uh just a simple one if you want to
actually
see the real one that I have and how
complex that can get I can show you
right here so as you can see my
extension JS here I have all those
functions you know this one executes the
query for example takes all of these
options here and if I want to for
example maybe show you this is the
activate so you know as I said before
when we create HTML it was pretty
hardcoded so you might have CSS files JS
files you can use this uh to actually
get the local file and I pass those to
the HTML I create uh so as you can see I
all kind of messages
here and this is the one see I pass my
JavaScript CSS and all kind of stuff
here nice dynamically and you know I
have my CSS file JS file so you can I
mean you can do all kind of stuff here
since it's you are really creating a web
application here which is going to get
display on one t or
VC awesome that is cool that is cool all
right so thanks thanks for showing us
that it's uh definitely definitely not
as complicated as I was expecting it to
be yeah I tried to make it simple I
guess good job all right thanks again
yeah hope you guys enjoyed that and we
will see you next time on Visual Studio
toolbox
[Music]