Hey everyone. So did you guys know that VS code
is not only used for coding but also for documentation?
I mean, that's news to me. Some developers use it
mainly just for that. So in this video we're going
to show you how along with some extensions that make
the process even easier. Let's check it out.
Documenting and VS code is straightforward using markdown language, which
is a lightweight markup language to add formatting to text.
There are alternatives, but we'll use markdown for this demo.
So to learn more you could check out this site
here.
Right now I have an opened blank folder, so let's
create a document for reminders like a shopping list amongst
other pieces of information. So I'll go ahead and get
started here by creating a file called reminder.
Dot MD for Markdown and Visual Studio will recognize that
it's markdown as you can see on the bottom right
hand corner.
And you'll see why some people love this, because it's
almost like writing HTML and but in a much simpler
fashion. So for example, if you wanted to write a
header that said shopping list.
You just used a# followed by shopping list, and to
preview what you're seeing just hit command K, let go
of the keys and press the letter V.
Now if I wanted to.
Add a second header, a subheading like H2.
For items, I just do 2 pound signs.
O look at how easy that is. If I wanted
to do a numbered list, just type in one and
my first item would be a laptop.
2.
A big mouse.
And three.
And SSD hard drive. Let's say I wanted to add
an image, I could add that to the root of
my folder. We'll closeout this view here. And to add
the image all I need to do is drag it
and hold the shift key and that will allow me
to specify where I want it within my code and
drop it and it automatically puts the right formatting to
display the image. So now you could already get a
sense of how easy it is to create. Detailed documentation
and nice.
Formatted way. Let's say I wanted to add some JavaScript
code. If I paste that in, that doesn't look very
nice, right? But if we add 3 ticks and then
specify the language like JS here, now it recognizes it
and then all we need to do is close with
another three ticks where your code ends. And if we
Scroll down a little bit, we could see how nicely
formatted that is. So now let's say you're inputting a
lot of.
Documentation together and it needs to be on multiple pages.
Well, you'll probably want to have links that navigates from
one page to another. O to create a link, all
you need to do is add a description of your
link within brackets.
Like this link to more info in this readme dot
MD and then the destination of the page. So it's
going to point to another file called readme dot HTML
and as you can see there's the link. So I
don't have that page in my folder yet, so let
me go ahead and just drop that in.
I'll close this automatic view that popped U an now
if I go and click on the link it brings
up the page O why don't we go ahead and
take a look at the contents of it in the
full view?
After closing those Windows I could do command KV and
if we glance down here we can see all the
different syntax that's required to get the results that you
see on the right hand side, such as block quotes.
Let's be it unordered or ordered.
Code which we already went over.
Tables etc. O by looking at this you can see
how detailed and neat documentation can be.
With all of these different ways of formatting and the
learning curve is extremely low and that's really nice. So
now if I'd like to publish this, I can go
ahead and click on source control on the right hand
side, choose initialize repository.
I'll enter in first.
Commit.
I didn't stage, so it's prompting me. If I want
to stage, I'll say yes.
And hit publish and I will save this to a
private repository called my Git Project C and if we
take a look at it we'll see the results.
And if I were to go to my reminder Doc,
Scroll down, I could see our original document that we
put together with our code and our link which works
here also. Now you just saw that I had to
commit stage and push my content after I was done.
But if I'm working with a lot of document, I
might not want to have to remember to keep doing
that over and over. So this is where an extension
like Getdoc comes into play, which is.
An extension that automatically commits push pulls changes on the
save, almost like you were in a Word document. So
whenever you hit save.
It will push and commit for you. Now it does
this every 30 seconds or so, which you can modify.
So let me first make sure that it is enabled.
I'll hit shift command P and I see Git doc.
It was cached so it shows it right away. It
is enabled. So I'm going to go ahead and change
this to really big mouse.
And hit save.
And on source control.
It should now commit for me within a few seconds.
And there it goes. So now if we go ahead
and check on.
GitHub and refresh our screen. It should change from a
big mouse to really big mouse for #2O. There's a
lot more to get dock that you can review and
experiment with like these features mentioned here, But there's also
a host of other extensions that are specifically designed for
document management, like dendron minthi.
Foam and more. So go ahead and check them out
and get a feel for what you prefer. O one
last thing I'd like to show you is how you
can access your project using Visual Studio code online. That's
vscode Dev by opening up a remote repository and specifying
your URL here. Or in my case I was already
just in here so I can just select it from
recently opened and now I can come here and make
whatever changes that I want if I wanted to change
this to.
Very fast.
Laptop. I'll just come here to source control.
Make sure I stage my changes.
And I'll type in second commit.
Click the check to accept and if we come here
to check my changes.
Very Fast laptop is displayed.
Pretty cool huh? Let me know in the comments if
you use VS code for documentation and what kind and
if you got value out of this video, don't forget
to hit that like and subscribe button and I will
see you in the next one.