Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>MinifyNew to Visual Studio Code? Get it now.

Minify

HookyQR

|
390,954 installs
| (46) | Free
Minify for VS Code. Minify with command, and (optionally) re-minify on save.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

minify for VS Code

Build Status

Minify your js, css and html files to save transmit bandwidth. Calls each of the minifiers directly, allowing settings to be passed:

  • JS: uglify-js v2.7.4
  • CSS: clean-css v3.4.21
  • HTML: html-minifier v3.2.2

Run the file minifier with F1 Minify.

Folders containing Javascript and CSS file can be minified to a single file (to {dirname}.min.[css|js]) with F1 Minify Directory. It is acceptable to have a single directory minified for both Javascript and CSS.

Optionally runs minify on save when a matching minified file (and/or directory) already exists. Enalbe in your user or workspace settings. The setting defaults are shown below:

"minify.minifyExistingOnSave": false,

"minify.js": {
	"mangle": true,
	"compress": {
		"sequences": true,
		"properties": true,
		"dead_code": true,
		"drop_debugger": true,
		"unsafe": false,
		"unsafe_comps": false,
		"conditionals": true,
		"comparisons": true,
		"evaluate": true,
		"booleans": true,
		"loops": true,
		"unused": true,
		"hoist_funs": true,
		"keep_fargs": true,
		"keep_fnames": false,
		"hoist_vars": false,
		"if_return": true,
		"join_vars": true,
		"collapse_vars": false,
		"reduce_vars": false,
		"side_effects": true,
		"pure_getters": false,
		"pure_funcs": null,
		"negate_iife": false,
		"drop_console": false,
		"passes": 1,
		"global_defs": {}
	},
	"output": {
		"ascii_only": false,
		"inline_script": false,
		"max_line_len": 32000,
		"braces": false,
		"semicolons": true,
		"comments": false,
		"shebang": true,
		"preamble": null,
		"quote_style": "best"
	}
},
"minify.css": {
	"advanced": true,
	"aggressiveMerging": true,
	"compatibility": "*",
	"inliner": {},
	"keepBreaks": false,
	"keepSpecialComments": "*",
	"mediaMerging": true,
	"processImport": true,
	"processImportFrom": ["all"],
	"rebase": true,
	"restructuring": true,
	"root": "${workspaceRoot}",
	"roundingPrecision": 2,
	"semanticMerging": false,
	"shorthandCompacting": true
},
"minify.html": {
	"caseSensitive": false,
	"collapseBooleanAttributes": true,
	"collapseWhitespace": true,
	"conservativeCollapse": false,
	"customAttrAssign": [],
	"customAttrCollapse": "",
	"customAttrSurround": [],
	"customEventAttributes": [ "^on[a-z]{3,}$" ],
	"decodeEntities": false,
	"html5": true,
	"ignoreCustomComments": [ "^!" ],
	"ignoreCustomFragments": ["<%[\\s\\S]*?%>", "<\\?[\\s\\S]*?\\?>"],
	"includeAutoGeneratedTags": true,
	"keepClosingSlash": false,
	"maxLineLength": false,
	"minifyCSS": true, //uses minify.css settings if true
	"minifyJS": true, //uses minify.js settings if true
	"minifyURLs": false,
	"preserveLineBreaks": false,
	"preventAttributesEscaping": false,
	"processConditionalComments": false,
	"processScripts": [],
	"quoteCharacter": "\"",
	"removeAttributeQuotes": false,
	"removeComments": false,
	"removeEmptyAttributes": false,
	"removeEmptyElements": false,
	"removeOptionalTags": false,
	"removeRedundantAttributes": false,
	"removeScriptTypeAttributes": false,
	"removeStyleLinkTypeAttributes": false,
	"sortAttributes": false,
	"sortClassName": false,
	"useShortDoctype": false
}

minifiy.css.root accepts "${workspaceRoot}/some/path" to define the internal @import absolute root.

Since html-minifier also uses clean-css and uglify-js, setting minifyJS or minifyCSS to true will embed the settings you have supplied for those minifiers automatically. You can provide your own settings as an object if you want some different methods to be used.

Like beautify for VS Code, minify accepts an array for file extension that you will accept minification of under minify.JSfiles, minify.CSSfiles, and minify.HTMLfiles.

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