Minify されたコードをキレイにする

どっかの誰かに聞かれて調べた内容メモ
Minify されたコードを Prettier する方法

GeneXusで自動生成されたコードは基本全てMinify（ミニファイ）されてます。

JSとかCSSの改行や無駄なインデントを削除すること[/alert]

たまに動作がおかしい時とかは
自動生成されたコードの内容を確認することもあります。
そういう時は1個2個のファイルの場合はVSCodeのプラグインを使います。

VS Code

VSCodeのプラグイン「Prettier – Code formatter」
使い方は外部サイトで
https://ma-vericks.com/vscode-prettier/

でも複数ファイルの場合はコマンドで一気にキレイにしたい場合は
node.js から prettierモジュールをインストールして実行します。

node.js

node.js の prettierモジュール
参考 GitHub - prettier/prettiergithub.com

1.node.js のインストール

省略。適当にインストールして。
https://nodejs.org/ja/

2.バージョンの確認

以下のコマンドが使えれば、問題なく動くと思います。

node -v
v12.18.2

npm -v
6.14.5

npx -v
10.2.2

3.prettierモジュールのインストール

キレイにしたいJSがあるフォルダに移動して、以下のコマンドを実行。

npm install -D prettier

4.prettierコマンド

以下のコマンドでPrettierされているかどうか確認できます。

npx prettier --check "*.js"

以下のコマンドでjsファイルを一気にキレイにできます。

npx prettier --write "*.js"

結果はこんな感じ

gx.evt.autoSkip=!1;gx.define("webpanel1",!1,function(){this.ServerClass="webpanel1";this.PackageName="GeneXus.Programs";this.setObjectType("web");this.hasEnterEvent=!1;this.skipOnEnter=!1;this.autoRefresh=!0;this.fullAjax=!0;this.supportAjaxEvents=!0;this.ajaxSecurityToken=!0;this.SetStandaloneVars=function(){};this.e11071_client=function(){return this.clearMessages(),this.addMessage("TEST"),this.refreshOutputs([]),gx.$.Deferred().resolve()};this.e13072_client=function(){return this.executeServerEvent("ENTER",!0,null,!1,!1)};this.e14072_client=function(){return this.executeServerEvent("CANCEL",!0,null,!1,!1)};this.GXValidFnc=[];var n=this.GXValidFnc;this.GXCtrlIds=[2,3,4,5,6];this.GXLastCtrlId=6;n[2]={id:2,fld:"",grid:0};n[3]={id:3,fld:"MAINTABLE",grid:0};n[4]={id:4,fld:"",grid:0};n[5]={id:5,fld:"",grid:0};n[6]={id:6,fld:"TEST",grid:0,evt:"e11071_client"};this.Events={e13072_client:["ENTER",!0],e14072_client:["CANCEL",!0],e11071_client:["'TEST'",!1]};this.EvtParms.REFRESH=[[],[]];this.EvtParms["'TEST'"]=[[],[]];this.Initialize()});gx.wi(function(){gx.createParentObj(webpanel1)})

↓

gx.evt.autoSkip = !1;
gx.define("webpanel1", !1, function () {
  this.ServerClass = "webpanel1";
  this.PackageName = "GeneXus.Programs";
  this.setObjectType("web");
  this.hasEnterEvent = !1;
  this.skipOnEnter = !1;
  this.autoRefresh = !0;
  this.fullAjax = !0;
  this.supportAjaxEvents = !0;
  this.ajaxSecurityToken = !0;
  this.SetStandaloneVars = function () {};
  this.e11071_client = function () {
    return (
      this.clearMessages(),
      this.addMessage("TEST"),
      this.refreshOutputs([]),
      gx.$.Deferred().resolve()
    );
  };
  this.e13072_client = function () {
    return this.executeServerEvent("ENTER", !0, null, !1, !1);
  };
  this.e14072_client = function () {
    return this.executeServerEvent("CANCEL", !0, null, !1, !1);
  };
  this.GXValidFnc = [];
  var n = this.GXValidFnc;
  this.GXCtrlIds = [2, 3, 4, 5, 6];
  this.GXLastCtrlId = 6;
  n[2] = { id: 2, fld: "", grid: 0 };
  n[3] = { id: 3, fld: "MAINTABLE", grid: 0 };
  n[4] = { id: 4, fld: "", grid: 0 };
  n[5] = { id: 5, fld: "", grid: 0 };
  n[6] = { id: 6, fld: "TEST", grid: 0, evt: "e11071_client" };
  this.Events = {
    e13072_client: ["ENTER", !0],
    e14072_client: ["CANCEL", !0],
    e11071_client: ["'TEST'", !1],
  };
  this.EvtParms.REFRESH = [[], []];
  this.EvtParms["'TEST'"] = [[], []];
  this.Initialize();
});
gx.wi(function () {
  gx.createParentObj(webpanel1);
});

オプションファイル

↑だとインデントがスペース2個ですが、4個に設定を変えて、再実行。
設定ファイルはnode_modulesディレクトリと同じ階層に配置。

オプションの項目は以下を参考に指定
https://prettier.io/docs/en/options.html

.prettierrc

{
    tabWidth : 4,
    semi : true
}

gx.evt.autoSkip = !1;
gx.define("webpanel1", !1, function () {
    this.ServerClass = "webpanel1";
    this.PackageName = "GeneXus.Programs";
    this.setObjectType("web");
    this.hasEnterEvent = !1;
    this.skipOnEnter = !1;
    this.autoRefresh = !0;
    this.fullAjax = !0;
    this.supportAjaxEvents = !0;
    this.ajaxSecurityToken = !0;
    this.SetStandaloneVars = function () {};
    this.e11071_client = function () {
        return (
            this.clearMessages(),
            this.addMessage("TEST"),
            this.refreshOutputs([]),
            gx.$.Deferred().resolve()
        );
    };
    this.e13072_client = function () {
        return this.executeServerEvent("ENTER", !0, null, !1, !1);
    };
    this.e14072_client = function () {
        return this.executeServerEvent("CANCEL", !0, null, !1, !1);
    };
    this.GXValidFnc = [];
    var n = this.GXValidFnc;
    this.GXCtrlIds = [2, 3, 4, 5, 6];
    this.GXLastCtrlId = 6;
    n[2] = { id: 2, fld: "", grid: 0 };
    n[3] = { id: 3, fld: "MAINTABLE", grid: 0 };
    n[4] = { id: 4, fld: "", grid: 0 };
    n[5] = { id: 5, fld: "", grid: 0 };
    n[6] = { id: 6, fld: "TEST", grid: 0, evt: "e11071_client" };
    this.Events = {
        e13072_client: ["ENTER", !0],
        e14072_client: ["CANCEL", !0],
        e11071_client: ["'TEST'", !1],
    };
    this.EvtParms.REFRESH = [[], []];
    this.EvtParms["'TEST'"] = [[], []];
    this.Initialize();
});
gx.wi(function () {
    gx.createParentObj(webpanel1);
});

以上です。

スポンサー広告