「Brackets Tools」をカスタマイズして見やすくする方法

最終更新日:

「Brackets Tools」は、ちょっとした小道具的な機能がたくさんつまった便利な拡張機能(エクステンション)です。

ですが、20以上ある全部の機能を使う人はほとんどいないでしょう。

右クリックした時に、ポップアップメニューとして20個以上も表示されると選ぶのに手間取ってしまいますよね。

そこで、「Brackets Tools」をカスタマイズしてメニューをスッキリさせる方法を紹介します。

この作業はJavaScriptファイルを編集しますので、人によって難易度が大きく違ってきます。

難易度
・プログラミング経験者 ⇒ 楽勝レベル
・プログラミング未経験者 ⇒ 人によっては難しいと思います。下の説明を読んで難しいと思う人はやめておいてください。

まずはファイルの場所からです。「Brackets Tools」のファイルはWindows環境だと次の場所にあります。

C:\Users\(ユーザー名)\AppData\Roaming\Brackets\extensions\user\insya.tools

「ヘルプ」メニュー ⇒ 「拡張機能のフォルダを開く」からフォルダを開けばすぐにわかります。

フォルダ

メニューの表示数・表示順序をカスタマイズする

まずはメニューの表示数・表示順序をカスタマイズします。

先ほど表示したフォルダ・ファイル一覧の中から「lib」フォルダを開いてください。

ファイル一覧の中から「stringConvert.js」(JavaScriptファイル)を開きます。

391行目から422行目の「createNavigation関数」でメニューの表示をコントロールしています。

function createNavigation(menu) {
    menu.addMenuItem(STRING_REMOVE_EMPTY_LINES);
    menu.addMenuItem(STRING_REMOVE_BREAK_LINES);
    menu.addMenuDivider();        
    menu.addMenuItem(STRING_REMOVE_LINE_NUMBERS);
    menu.addMenuItem(STRING_REMOVE_DUPLICATE_LINES);        
    menu.addMenuDivider();        
    menu.addMenuItem(STRING_WORD_TO_ARRAY);
    menu.addMenuItem(STRING_WORD_TO_LIST);
    menu.addMenuItem(STRING_LINE_TO_LIST);
    menu.addMenuDivider();
    menu.addMenuItem(STRING_HTML_TAG_STRIP);
    menu.addMenuDivider();        
    menu.addMenuItem(STRING_TRIM);
    menu.addMenuItem(STRING_LTRIM);
    menu.addMenuItem(STRING_RTRIM);
    menu.addMenuDivider();        
    menu.addMenuItem(STRING_FxCHAR_REMOVE);
    menu.addMenuItem(STRING_LxCHAR_REMOVE);
    menu.addMenuDivider();    
    menu.addMenuItem(STRING_SEO_URL);
    menu.addMenuDivider();
    menu.addMenuItem(STRING_UPPERCASE);
    menu.addMenuItem(STRING_LOWERCASE);
    menu.addMenuItem(STRING_TITLECASE);
    menu.addMenuDivider();
    menu.addMenuItem(STRING_HTML_ENCODE);
    menu.addMenuItem(STRING_HTML_DECODE);
    menu.addMenuDivider();
    menu.addMenuItem(STRING_ENCODE_URI);
    menu.addMenuItem(STRING_DECODE_URI);
}

コメントアウトで非表示にする

必要ない機能をコメントアウトすることでメニューに表示されなくなります。

JavaScriptでコメントアウトするには2つの方法があります。好きな方法で行ってください。

行単位のコメントアウト --> // スラッシュ2つ


//menu.addMenuItem(STRING_UPPERCASE);
//menu.addMenuItem(STRING_LOWERCASE);
//menu.addMenuItem(STRING_TITLECASE);

複数行のコメントアウト --> /* */ で囲む


/*
menu.addMenuItem(STRING_UPPERCASE);
menu.addMenuItem(STRING_LOWERCASE);
menu.addMenuItem(STRING_TITLECASE);
*/

表示順序を入れ替える

順序を入れ替えたい場合は、行単位で表示順序を入れ替えればいいだけです。

「menu.addMenuDivider();」は区切り線です。

メニューを日本語表示にする

英語で表示されているメニューを日本語表示にします。 (省略)\insya.tools\nls\root フォルダ内にある「string.js」ファイルを編集します。 このファイルの21行目から49行目までがメニュー表示文字を設定している場所です。

define({
    "MENU_LABEL"                       : "Tools",
    "MENU_NEW_DOC"                     : "New Html5...",
    "VIEW_HIGHLIGHT"                   : "Highlight Selected Word",
    "STRING_REMOVE_EMPTY_LINES"        : "Remove empty/blank lines",
    "STRING_REMOVE_BREAK_LINES"        : "Remove break lines",
    "STRING_REMOVE_LINE_NUMBERS"       : "Remove line numbers",
    "STRING_REMOVE_DUPLICATE_LINES"    : "Remove duplicate lines",
    "STRING_UPPERCASE"                 : "To Upper Case",
    "STRING_LOWERCASE"                 : "To Lower Case",
    "STRING_TITLECASE"                 : "To Title Case",
    "STRING_HTML_ENCODE"               : "HTML Encode",
    "STRING_HTML_DECODE"               : "HTML Decode", 
    "STRING_ENCODE_URI"                : "URL Encode", 
    "STRING_DECODE_URI"                : "URL Decode",
    "STRING_HTML_TAG_STRIP"            : "HTML Tag Remove/Strip",
    "STRING_TRIM"                      : "Trim",
    "STRING_LTRIM"                     : "Left Trim",
    "STRING_RTRIM"                     : "Right Trim",
    "STRING_FxCHAR_REMOVE"             : "First x Char Remove",
    "STRING_LxCHAR_REMOVE"             : "Last x Char Remove",
    "STRING_SEO_URL"                   : "To SEO URL",
    "STRING_WORD_TO_ARRAY"             : "Word to array",
    "STRING_WORD_TO_LIST"              : "Word to list",
    "STRING_LINE_TO_LIST"              : "Line to list",
    "INPUT_TITLE"                      : "Remove Char",
    "INPUT_TEXT"                       : "Enter the number of characters you want to remove.",
    "SETTINGS"                         : "Settings"
});

右側の文字列を編集します。例えば、

"STRING_HTML_ENCODE"               : "HTML Encode",
"STRING_HTML_DECODE"               : "HTML Decode", 
これを次のように編集します。

"STRING_HTML_ENCODE"               : "HTML エンコード",
"STRING_HTML_DECODE"               : "HTML デコード", 
これでメニューにはそれぞれ「HTML エンコード」「HTML デコード」と表示されます。