Visual Studio Code - 拡張機能 - フォーマット（整形） - Prettier（整形）

1.　概要

2.　インストール

3.　使い方

1.　概要

　改行やら、インデントがわちゃわちゃになっているソースを、ルールに従って整形してくれる拡張機能です。

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

「VSCode の拡張機能 Prettier でソースコードを整形する」


2.　インストール

　「Prettier」で検索すると、わらわら表示されます。
　今回は、参考サイトで紹介されている、「Pretter - Code formatter」ってのが、最上位にあったので、これをインストールします。

3.　使い方

　なんか、保存時に、自動的に整形する設定とかも参考サイトで紹介されているのですが、わたしは、知らないところで勝手に整形されるのは好きではないので、その設定は行いません。

　こんななってる


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


　「javascript」を「Minify」したコードでやってみます。

　フォーマットするときは（画像のソースは「Minify」したものではありません）
　ソース上で右クリックして「ドキュメントのフォーマット」「選択範囲のフォーマット」のいずれかで整形します。

　各々、２行ずつ出ているのは何故なんだろう？

　実行したら、画像とりそこないましたけど、どのような書式にするかを決める選択肢が表示されました。
　どうも２行出ているのは、上が、規定で決めた書式で整形し、下が実行時に書式を選べるようです。
　「Pretter」というこの拡張機能の書式を選択したら、前掲のソースコードが、下記のようになりました。


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


　書式をカスタマイズしたいところでは、ありますが、今回はここまでとします。