This content originally appeared on DEV Community and was authored by Karl Esi
One thing you need to know about browsers is that they ignore white spaces in the HTML and CSS code.
For example, I can put all these elements on a single line, and everything still works.
Let me show you.
<!DOCTYPE html><html><head><title>My First Web Page</title><style>img{width: 100px;border-radius: 50px;float: left;margin-right: 10px;}.username{font-weight: bold;}</style></head><body><img src="Images/altumcode.jpg"><p class="username">@KarlgustaAnnoh</p><p>I love to teach you HTML!</p></body></html>
Now, save the changes.
Back in the browser, we have the same results as before:
Because browsers don't care how we format our code. But, formatting is very important when it comes to reading and maintaining code. We want our code to be beautiful and perfectly formatted just like an article.
This is where we can use the Prettier plugin to help us out.
With Prettier, we can format our code in a consistent fashion. This is super important when you are part of a team, because different people have different ways of formatting their code. But if everyone on the team uses the Prettier plugin, the code will be consistently formatted.
So, let me show you how to use Prettier.
At the top, you go to the view menu, and click on the shortcut for the command palette. On a Mac, it is Shift + Command + P On Windows, it is Shift + Control + P.
Let's bring up the command palette. There we search for format document. Press ENTER.
OK. Now, Prettier has formatted my code, so none of those elements are on the same line.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg"/>
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
This is a lot better. But, let me show you a trick!
We don't want to format our code every time we make a change. So, we can configure VS Code to automatically format the code the moment we save the changes.
So, at the top, let's go to the code menu, then Preferences, then Settings.
Here, search for format on save.
Here is the setting:
Let's enable this setting.
Now, every time we save the changes, VS Code automatically formats our code, using Prettier.
See you on the next one!
P.S. 🚀 Ready to kickstart your career in web development? Join our free starter course to master HTML, CSS, JavaScript, React, and more! Build real-world projects, learn from industry experts, and connect with a supportive community. Enroll now!
This content originally appeared on DEV Community and was authored by Karl Esi
Karl Esi | Sciencx (2024-08-16T11:03:00+00:00) How to Format Your Code. Retrieved from https://www.scien.cx/2024/08/16/how-to-format-your-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.