Now before we write more code and learn about more good
features, you should be aware of.
Let's have a look at the code.
We already got both here in the code editor,
as well as the result we got in the browser.
And if we have a look at this result in the code editor,
we see that it's becoming a bit harder to read our code
because it's very long.
We have a very long lines of code here.
Now,
therefore we might want to split our code across multiple
lines, and you can do that.
You should typically not add a line break in the middle of
a HTML tag, because whilst if you saved, is it still works.
This can quickly lead to errors where you start adding new
HTML elements in between,
because you don't realize that you added a line break inside
of a tag.
And hence you should not do that, but you can absolutely.
For example,
add a line break after the opening tag and then after the
content.
And if we do that,
then this code already gets a bit more readable.
You might also notice that the IDE visual studio code here
automatically indents that content,
which is now moved to a new line.
So that's text content between the H one and paragraph
text.
And this indentation is added automatically by visuals to do
code. Since it also helps with readability,
it makes it easy to spot that this text is inside of that
H one or paragraph and not on the same level so that it's
not a sibling,
but instead inside of that element regarding the output on
the website, it will be ignored.
So this indentation here is only here for us during
development to have an easier time identifying the values,
the content inside of an element.
It's not output on the screen.
The users of our websites will not see this indentation,
but doing this manually can be annoying.
And I'm reverting this year.
So did I can show you an alternative because there is a very
useful alternative,
a very useful feature built into visual studio code,
which helps you with code formatting.
If you have a look at your keyboard shortcuts and you search
for format document here,
you will find a format document shortcut.
If it's not bound yet, you can bind it.
Now, if you do bind it,
you can press the shortcut to format.
This code automatically simply by pressing a shortcut.
If this does not work correctly, or even if it does,
you might want to have a look at a special extension,
which you can install,
which helps with formatting and which is one of the most
popular formatting extensions under view extensions.
You can go to the extensions menu and you can install a
third party extension into visual studio code.
The extensibility of visual studio code has,
is one of its many advantages.
And here you can search for prettier and you should find the
prettier extension.
I already have it installed here. You can install it now.
And prettier is an extension that helps with code
formatting.
Once you did install it,
you can go back to the Explorer with view Explorer or the
shortcut, which you see next to that item.
And then you can go to preferences settings in visuals to do
code and here all the search for format and make sure that
under default format or you do a select prettier vs code.
And if that selected pressing that format,
document shortcut should format your document with prettier.
And it simply saves you the hassle of manually splitting
your code and formatting your code and prettier will
automatically format your code following common best
practices so that it doesn't add a line break in the middle
of a tag, for example.
So that's something to be aware of.