javascriptvisual-studio-codeminifyterser

Minify JS with VS code extension


I need: minify JS file with extension from the store, but I can't find an option to remove whitespace between html tags in variables

I use: JS & CSS Minifier (Minify) - https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify (because I'm lazy to set up a Webpack)

So if input is:

html = `<li class="item">
      <div class="text">
        <p>${array[i]}</p>
      </div>
    </li>`;

Output is only:

s=`<li class="item">\n      <div class="text">\n        <p>${o[r]}</p>\n      </div>\n    </li>`;

The extension uses Terser to minify the code, but I couldn't find any option to remove the whitespace. Thanks for help.


Solution

  • I can't suggest any plugins for you. There may be a limited selection, since this isn't really the proper way to do things, but you seem to realize this.

    If you insist on doing this, and can't find a plugin which fits your needs, you can always use CTRL+F with the regular expression (?: |\n):

    Ctrl + F, regular expression mode, with regex (?:  |\n)

    If you use tabs instead of spaces, then you should be able to replace them with \t.

    The catch is that this will obviously replace spaces within your document, but since browsers automatically remove extra spaces, this hopefully shouldn't be an issue.

    I would suggest looking into vite. It's a newer and faster alternative to webpack, and I personally find it a lot easier to use and understand.