Up next in 10
How to Compress & Minify CSS & Javascript Files in VSCode IDE
1 views
Jul 5, 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'll show you a
0:04
JavaScript and CSS code minifier and
0:07
compressor extension directly inside VS
0:09
code. With the help of this extension,
0:11
you can directly compress your
0:13
JavaScript and CSS code without leaving
0:15
your VS code. So simply go to the
0:17
extensions tab and just search for this
0:21
extension which is called as mini. And
0:24
the very first extension which comes
0:26
right here, you'll see this is the
0:28
extension. It's developed by this person
0:30
and it's having almost 600,000
0:34
installs. So the very first thing you
0:36
need to do is simply click the install
0:38
button. After installing it, just go to
0:41
your JavaScript file.
0:44
So as you can see this is the JavaScript
0:46
file here. If I want to compress it, I
0:49
basically open the command pallet
0:52
control shiftp
0:55
or you can also go to the view menu and
0:58
then say command pallet and simply type
1:01
here minify and it actually have two
1:04
options either you can minify the whole
1:06
directory or it can minify the current
1:09
file. So if I click the minify current
1:12
file you will see it will create a
1:14
min.js JS file which will contain the
1:17
minified code here. So as you can see
1:19
all your code has been successfully
1:21
minified. All the white spaces have been
1:23
removed. Similarly the same thing for
1:26
CSS file as well. If you have a large
1:29
CSS file simply again open command pilot
1:32
engine. Simply type here mini file and
1:35
then it will also create or compress
1:37
your mini uh CSS file directly in the VS
1:41
code itself using this extension. So
1:44
this will save you a lot of time because
1:46
in front-end projects while you are uh
1:50
deploying your code you do need to
1:52
minify your code to save space. So you
1:55
can use this extension pretty easily by
1:58
going to extensions just installing it
2:00
and it works with CSS and HTML files.
2:05
So or you can also
2:09
minify the whole directory at once. You
2:12
don't need to repeat this for each and
2:14
every file. You actually select your
2:17
directory
2:18
and then open command pallet and select
2:21
this option minify directory. So what it
2:24
will do? It will minify the whole files.
2:27
I think this option doesn't work. So
2:30
just select minify only. So if I select
2:33
minify the file will be minified.
2:37
So, thank you very much for watching
2:38
this video and also check out my website
2:41
freemediatetools.com
2:43
uh which contains thousands of tools.
#Software Utilities