Visual Studio Code - 拡張機能 - フォーマット（整形） - Javascript・CSS Minify

1.　概要

2.　インストール

3.　使い方

1.　概要

　「Javascript」や「CSS」のコードは、ウェブサーバとクライアント・ブラウザの間で通信するものなので、なるべく軽量化したいものです。
　文保的にエラーにならない範囲で、改行やインデントを削除する、「Minify」という機能が、開発環境には用意されていたりします。

　「Visual Studio Code」にも用意されているようです。

　本ページは、下記のサイトを参考にさせていただきました。

「VSCode で JavaScript, CSS を圧縮・軽量化(Minify)する」


2.　インストール

　ここでは、「JS & CSS Minifier（Minify）」という拡張機能を使ってみます。

　「Minifier」もしくは「Minify」で検索すると上位に表示されます。
　（「PHP」や「Lua」のものもあるようです）

3.　使い方

　全体で


/**
 * 	2017-12-25	全面入れ替え
 */

$(function(){
$('.accordion > dl > dt').on('click',function(){
        var Dopenclass = $(this).attr('class');
        $(this).next('dd').slideToggle();
        if(!Dopenclass){
            $(this).addClass('dopen');
        }else{
            $(this).removeClass('dopen');
        }
    });
});


　となっているソースでやってみます。
　（確か、目次のアコーディオンを行うようなソースだったような・・・）

　ソースを開いて、左下の「Minify」と書かれているものをクリックします。

　途中、圧縮率のようなものが、クリックした箇所へ表示されます。
　今回は、小さいソースなので、すぐに終わりました。

　ソースファイル名が、「script.js」だったのですが「script.min.js」というファイルが作成されました。
　「*.js」が「*.min.js」になるって寸法ですね。

　元のファイルが残っているのは嬉しいです。
　逆に戻すのが大変なので。

　ちなみに、ソースの中身は


$((function(){$(".accordion > dl > dt").on("click",(function(){var Dopenclass=$(this).attr("class");$(this).next("dd").slideToggle(),Dopenclass?$(this).removeClass("dopen"):$(this).addClass("dopen")}))}));


　となっていました（1行です）。
　コメント行もなくなっています。

　後で気づきましたが、ソースを右クリックして
　「Minify: Document」でも実行できるようです。

　また、画像でお分かりかと思いますが、ソース内の選択部分があれば、「Minify: Selection」で、選択部分のみ「Minify」を実行できるようです。

　これが、うまく動作するかは、まだやってみていません（2022年1月22日）。
　以前、別の開発環境で、「Minify」した「Javascript」が機能しなくなったことがあったので、気になるところです。