Up next in 10
How to Highlight TypeScript TS Errors With Pretty Popup Overlay Messages in VSCode IDE
0 views
Jul 2, 2025
Get the full source code of application here:
View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I will show you a
0:04
TypeScript VS code extension which
0:06
allows you to uh significantly remove uh
0:11
sorry improve the highlighting of error
0:14
messages which occurs inside your
0:15
TypeScript files. So as I hover onto
0:18
this it will show you the entire error
0:20
in detail that type number is not
0:22
assignable to type string and in detail
0:25
you can actually see what sort of error
0:27
is there. So there is this extension
0:30
that you can install here. So go to the
0:31
extension and simply type for this
0:34
extension which is pretty ts errors
0:37
pretty typescript errors. So this is
0:40
actually the extension here. It's almost
0:42
used by 1 million developers. So simply
0:45
click the install button and enable this
0:47
extension. So what does it do? It
0:49
actually makes your TypeScript errors
0:52
more prettier and more human readable
0:54
form. Now if you make any sort of error
0:57
inside your TypeScript file, it will
0:59
highlight with this red swig error
1:02
message. Apart from that, if you hover
1:04
onto that, it will also show you this
1:07
nice little pop-up message which will
1:09
explain you what this error message is
1:12
all about and it will tell you more
1:14
information why this error message is
1:17
taking place. So the expected types
1:18
comes from property name which is
1:20
declared here on type user. So type
1:24
number is not assignable to type string.
1:26
So it simply tells you that name is of
1:29
type string here. So that's why you
1:31
provided a number value. So here we need
1:33
to change it to string. So in this way
1:36
you can fix your error messages again on
1:39
age as well. It will tell you that
1:40
entire thing.
1:44
So because if you don't have this
1:45
extension the default behavior of error
1:50
highlighting is very bad. So if you do
1:53
the highlighting for error, if you don't
1:55
have this extension then it's
2:00
comes with a default which doesn't
2:03
provide you with much information.
2:07
So I found this extension to be very
2:09
useful. So you can install this if you
2:11
want to critify or make your human
2:15
TypeScript errors more in human readable
2:17
form. So
2:19
also check out my website
2:21
freemediatools.com
2:23
uh which contains thousands of tools.