MinifyAll an extension for VS Code

Simple VS Code minifier and compressor for most common file types (See full list below). 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, and you can preserve your license comments with the tags @preserve and @endpreserve.

MinifyAll is also able to compress files and folders simply by right-clicking them on the menu.

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 MinifyAllCli/package.

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

Check our CHANGELOG.

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

We support up to 14 languages/file extensions!

Installation 🔩⚙

Open the Command Palette of VS Code 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

We recommend using them with: "left click" on the document and then select the option you want, either the file in the menu or the opened file. ;)

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:

Preserve your licence comments with the tags @preserve (at the very top) and @endpreserve

The first and default command that replaces the actual code with the minified one:

The second command that saves the minified text to another file and preserves the original text:

Minify only your selected text!

Also, minify when right-clicking on the code!

Minify when right-clicking on a file of the menu without opening it!

Compress when right-clicking on a file or folder of the menu.

Languages available 🧪🔥

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

Configuration settings ⚙️⛓

<details> <summary>Click to see more info about the configuration settings</summary>

(Remember to restart VS Code after modifying any configuration)

If you want MinifyAll to stop shortening colours, such as RGB to 3-digit hex, 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)

Disables context menu when right-clicking in your code.

"MinifyAll.disableCodeContextMenu": true|false //default 'false' (by default, it is shown)

Disables context menu when right-clicking in the file explorer.

"MinifyAll.disableFileExplorerContextMenu": true|false //default 'false' (by default, it is shown)

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 the new minified file from the command that minifies to another 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 whenever you create a minified file).

"MinifyAll.openMinifiedDocument": true|false //default 'true'

Terser minify options, this setting will allow you to fully customize 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)

Disables XML minimization //default 'false'

"MinifyAll.disableXml": true|false //default 'false'

</details>

Examples

CSS LESS SASS SCSS

<details> <summary>Click to see an example of how the extension minifies CSS</summary>

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 a 3-digit hexadecimal value.
6-digit hexadecimal values are formatted to 3-digit hexadecimal values.
There are no spaces.
There is only one line.
M

MinifyAll

Install / Use

README