videocam_off
This livestream is currently offline
Check back later when the stream goes live
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