Up next in 10
How to Format Source Code on Save Using Prettier Formatter Extension in VSCode IDE
Jul 2, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I will show you how to
0:04
format your code on safe using the
0:07
prettier
0:08
extension inside VS code. So let me show
0:12
you example what we will do. So if you
0:15
have this uh formatting issues that
0:18
suppose you have unfor unforatted HTML
0:23
as I just save this document I will
0:25
simply type the shortcut key control S
0:28
and automatically your document will be
0:31
formatted using the prettier VS code
0:34
extension
0:35
and uh you can even do this by right
0:38
clicking it and you will get this option
0:40
format document and you can format
0:42
document right here itself itself. So
0:44
now to do this it's very easy. First of
0:46
all you need to install the prettier
0:49
code extension which is a number one
0:51
format extension for VS code. It
0:54
supports various languages such as
0:56
JavaScript, TypeScript, HTML, CSS all
0:59
these languages. So if you just type
1:03
prettier the number one extension which
1:06
comes this is the extension here. It's
1:08
59 million developers use it. So you
1:11
simply install it
1:14
and just it will like like this you just
1:18
need to enable this. So once the
1:19
extension is enabled, you actually
1:23
one more step you need to do. You need
1:24
to make sure that you go to settings and
1:27
right here inside your text editor. Uh
1:31
you need to go to formatted formatting
1:34
section and right here you need to
1:36
toggle this option on which is format on
1:39
save. This means that whenever you save
1:42
your file, it will automatically format
1:45
your file using the prettier code
1:49
formatter. So if the if this is not
1:51
checked, simply take mark this option
1:54
format on save. And after that 99% of
1:59
the time the prettier code extension
2:01
will definitely work. So this is a let
2:06
me unformat this HTML file. So if this
2:10
option format document is not working
2:13
then you simply need to do this format
2:16
document with and then a series of
2:20
formatterers will come right here which
2:22
formatter you need to choose here. So
2:24
you need to choose the prettier code
2:26
formatter simply enter it and your now
2:28
your file has been successfully
2:30
formatted. And if for some reason this
2:32
step is not working for you, you need to
2:35
simply type the shortcut key control
2:37
shift P and then you need to go to the
2:40
user setting file right here. And you
2:42
just need to add this one snippet of
2:44
code. Simply type here editor
2:48
default formatter.
2:55
So this is I
3:01
default formatter. Yeah. So there is a
3:03
property here that you can set here.
3:07
Default
3:11
formatter.
3:14
So this is the line you need to add
3:17
right here. If the previous steps is not
3:19
work, just add this line in the user
3:21
setting file. ESBN.p prettier. VS Code.
3:26
This is the name of the formatter, the
3:28
prettier code formatter. And if you now
3:30
do this,
3:34
you can do this with any file. If
3:37
your code is unforatted, simply control
3:40
S to format to save the document and
3:43
automatically your file will be
3:44
formatted. You can even do this with
3:47
JavaScript as well. So let's suppose
3:49
your file is for unforatted
3:56
and if I simply say control S you will
3:58
see automatically all your files should
4:00
be formatted. So this is the way by
4:03
which you can do this uh how format your
4:07
documents using prettier code extension.
4:10
Please hit that like button and
4:11
subscribe the channel and also check out
4:14
my website freemediatools.com
4:16
uh which contains thousands of tools. Uh
4:20
I will be seeing you in the next
#Programming
#Software