Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>MinifyAllNew to Visual Studio Code? Get it now.

MinifyAll

Jose Gracia Berenguer

|
27,797 installs
| (10) | Free
Minifier for JSON, CSS, HTML, TWIG, LESS, SASS, SCSS, JavaScript, JSONC, and JavaScriptReact(testing). You will love its simplicity!
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

MinifyAll an extension for VSCode

Simple VSCode minifier for CSS, HTML ,JSON, JavaScript, JavaScriptReact(beta), LESS, SASS, SCSS, and JSONC. you will love its simplicity!

You can minify the file and replace all the content with the new minified text, or you can preserve the original document and get the minified text in another document! Also you can simply minify your selected text.

Go to the extension settings and make it as you want, enable or disable: minify on save, languages, hexadecimal shortener, messages, and much more.

For more information check our: GitHub repository, VisualStudio Marketplace or OpenVSX registry.

Also check the brand new MinifyAll online webpage 😎 or the MinifyAll cli/package.

Do you want to help us improve the extension or did you found a bug? Let us know.

Check our changelog.

Currently looking for active contributors to maintain and keep the project alive.

We support up to 11 languages!


Version Downloads Rating GitHub commit activity Node.js CI


Installation 🔩⚙

  • Open the Command Palette of VSCode with Ctrl+P or ⌘P
  • And type:➡️ ext install josee9988.minifyall

Commands 📐🛡

  • Minify this document ⚡ Or CTRL+ALT+M
  • Minify this document and preserve the original ⛏ Or CTRL+ALT+N
  • Minify the selected text 🎯 Or CTRL+ALT+. CTRL+ALT+M

How does it look with real code? 📸 😁

  • The two commands available. First directly minifies the actual document and replaces the original code with the modified one, the second keeps the original document and creates a file with the modified text:
command
  • The first and default command that replaces the actual code with the minified one:
Preview
  • The second command that saves the minified text to other file and preserves the original text:
Preview2nd
  • Minify only your selected text!
rightclick
  • Also, minify when right-clicking on the code!
selectedText
  • Minify when right-clicking on a file of the menu without opening it!
rightclickMenu

Languages available 🧪🔥

  • CSS
  • HTML
  • TWIG
  • HTML in a PHP file
  • JSON
  • JavaScript With: Terser
  • JavaScriptReact With: Terser
  • JSONC
  • LESS
  • SASS
  • SCSS

Configuration settings ⚙️⛓

Click to see more info about the configuration settings

(Remember to restart VSCode after modifying any configuration)

  • If you want MinifyAll to stop shortening colours, such as RGB to 3 digit hex, or RGBA to hex, or 6 digit hex to 3 digit hex. If you enable it you might see some loss in colour accuracy
"MinifyAll.disableHexadecimalShortener": true|false //default 'true' (by default it is disabled)
  • Disables warning and information messages
"MinifyAll.disableMessages": true|false //default 'false' (by default it is allowed)
  • Minify on save (Default command, which will minify your actual code)
"MinifyAll.minifyOnSave": true|false //default 'false' (by default it is disabled)
  • Minify on save (Second command, which will minify your actual code into a new file)
"MinifyAll.minifyOnSaveToNewFile": true|false //default 'false' (by default it is disabled)
  • Prefix of the new minified file from the command that minifies to other doc.
"MinifyAll.PrefixOfNewMinifiedFiles": '-min'|'.min'|'-minified'|'.minified' //default '-min'
  • If you want MinifyAll to open the new minified document after you minify. (False for not opening it every time you create a minified file).
"MinifyAll.openMinifiedDocument": true|false //default 'true'
  • Terser minify options, this setting will allow you to fully customice your Terser behaviour. For more info please check terser's minify options.
"MinifyAll.terserMinifyOptions": { mangle: true, compress: { drop_console: true, dead_code: false, keep_fnames: false, keep_classnames: false } } // for more information please visit https://github.com/terser/terser#minify-options

Disabling languages configuration

  • Disables html minimization
"MinifyAll.disableHtml": true|false //default 'false' (by default it is enabled)
  • Disables twig minimization
"MinifyAll.disableTwig": true|false //default 'false' (by default it is enabled)
  • Disables php minimization
"MinifyAll.disablePhp": true|false //default 'false' (by default it is enabled)
  • Disables css minimization
"MinifyAll.disableCss": true|false //default 'false' (by default it is enabled)
  • Disables scss minimization
"MinifyAll.disableScss": true|false //default 'false' (by default it is enabled)
  • Disables less minimization
"MinifyAll.disableLess": true|false //default 'false' (by default it is enabled)
  • Disables sass minimization
"MinifyAll.disableSass": true|false //default 'false' (by default it is enabled)
  • Disables json minimization
"MinifyAll.disableJson": true|false //default 'false' (by default it is enabled)
  • Disables jsonc minimization
"MinifyAll.disableJsonc": true|false //default 'false' (by default it is enabled)
  • Disables JavaScript minimization //default 'true' (by default it is disabled because it is not on a stable version yet)
"MinifyAll.disableJavascript": true|false //default 'false' (by default it is enabled)
  • Disables JavaScriptReact minimization //default 'true' (by default it is disabled because it is not on a stable version yet)
"MinifyAll.disableJavascriptReact": true|false //default 'true' (by default it is enabled)

Examples

Css less sass scss

Click to see an example of how the extension minifies CSS

From:

.myClass {
    background-color: rgba(12, 12, 12, 0.8);
    background-color: rgb(12, 12, 12);
    background-color: #FAFAFA;
    /*other comment*/
    content: url("https://github.com/Josee9988/MinifyAll");
    margin-right: 0px;
}/* my comment
    */

To:

.myClass{background-color:#0C0C0CCC;background-color:#111;background-color:#FFF;content:url("https://github.com/Josee9988/MinifyAll");margin-right:0}
  • RGBA is formatted to hexadecimal.
  • RGB is formatted to 3 digit value hexadecimal.
  • 6 digit hexadecimal values are formatted to 3 digit value hexadecimal.
  • There are no spaces.
  • There is only one line.
  • Multiline comments removed.
  • Url '//' is not detected as a comment and can be perfectly placed.
  • From 0px to 0

Json jsonc

Click to see an example of how the extension minifies JSON

From:

{
"contributes": {
"commands": [{
"title": "Minify this document ⚡",
},
{
"color": "#FAFAFA", // comments
}/* multiline comment
*/
]
}
}

To:

{"contributes":{"commands":[{"title":"Minify this document ⚡"},{"color":"#FFF"}]}}
  • Only one line.
  • No unnecessary spaces.
  • 6 Digit hex to 3 digit hex.
  • No single-line comments.
  • No multiline comments.
  • Removed trailing comma before '}'.

JavaScript

Click to see an example of how the extension minifies JavaScript

From:

"use strict";
const {
    commands,
    window
} = require('vscode');
const FileSaver = require('fs')
const StringWithComments = "// not a comment /*" //this is my comment
if ((window.activeTextEditor.document.languageId == "css" && disableCss == false) || //myComment
    (window.activeTextEditor.document.languageId == "scss" && disableScss == false)) {
    const {
        document
    } = window.activeTextEditor;
    switch (window.activeTextEditor.document.languageId) {
        case "css":
            /*
            multi-line comments
            */
            console.log("Love this minifier !!!")
            break;
        default:
            break;
    }
}

To:

"use strict";const{commands,window}=require('vscode');const FileSaver=require('fs')
const StringWithComments="// not a comment /*"
if((window.activeTextEditor.document.languageId=="css"&&disableCss==false)||(window.activeTextEditor.document.languageId=="scss"&&disableScss==false)){const{document}=window.activeTextEditor;switch(window.activeTextEditor.document.languageId){case"css":console.log("Love this minifier !!!")
break;default:break;}}let myString="hello//";myString.replace(/\/\//g,'');
  • Only changes line if, at the end of a declaration or an import, that line does not end in ';' (So adding more ';' at the end of every line will help you minimize more your code).
  • All irrelevant spaces removed.
  • Spaces left are only within quotes (Strings) and variable declarations.
  • If 'OR' and 'AND' are without spaces, the same as if condition or switch cases.
  • All single line and multiline comments removed.
  • Single line comments inside of a String will not be removed. (hello//) (// not a comment).
  • Multi-line comments inside of a String will not be removed. (// not a comment /*).
  • Regex expression with single-line comments will not be removed.
  • No tabs.

Html

Click to see an example of how the extension minifies HTML

From:

<!DOCTYPE html>
<html lang="es">

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
    <script type="text/javascript' src=""></script>
    <!-- test -->
</head>

<!-- ~~~~~✦✦✦✦✦ B O
 D Y ✦✦✦✦✦~~~~~ -->
<body>

</body>

</html>

To:

<!DOCTYPE html><html lang="es"><head><title></title><meta charset="utf-8"><link rel="stylesheet"href=""><script type="text/javascript"src=""></script></head><body></body></html>
  • Only one line.
  • Only the necessary spaces.
  • No tabs.
  • No single-line comments.
  • No multiline comments.


Known bugs: 🛑🗑

  • ⚠️ The command "Minify the selected document and preserve the original will not work on Windows.
  • ⚠️ If the file you are trying to minify is not saved or is an Untitled default VSCode file might cause errors.
  • ⚠️ If you are doing a regex without scaping the '//' it might be deleted as it must be scaped (//).

Built with 🛠️🔧

  • Virtual Studio Code
  • Yo code
  • vsce

Did you enjoyed the minifier? Help us raise these numbers up 🥰 🎉

Github followers Github stars Github watchers Github forks

Check my VSCode theme 🧲

Check my VSCode Markdown and Changelog snippets 🌟

Check my MinifyAll online webpage 😎

Check my MinifyAll cli/package


⚠️Remember that this extension does not guarantee a 100% effectiveness and may have some issue at some point. Use it at your own risk and always do backups of your code.⚠️

Made with a lot of ❤️❤️ by @Josee9988

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2019 Microsoft