KateでJavaScriptやJSONをフォーマット

テキストエディタKateでJavaScriptやJSONのコードを綺麗に整形（フォーマット）するには、Kate用Scriptを自作する必要があります。自作といってもとても簡単ですので、もしあなたがKateユーザなら、Kate用Scriptの作成の練習も兼ねて作っておくことをおすすめします。

まずは、JavaScriptを整形するライブラリ beautify.js を jsbeautifier.org からダウンロードさせてもらい、Kate用Scriptのライブラリ置き場
/usr/share/kde4/apps/katepart/script/libraries
に設置しておきます。これは次に作るKate用Script本体から読み込みます。

それでは、Kate用Script本体を作りましょう。

beautifyJS.js

/* kate-script
 * author: akirattii, <tanaka.akira.2006@gmail.com>
 * license: BSD
 * revision: 1
 * kate-version: 3.11.2
 * type: commands
 * functions: beautifyJS
 */
require("range.js");
require("beautify.js"); // for js_beautify

function help(cmd) {
  if (cmd == "beautifyJS") {
    return i18n("beautify javascript code");
  }
}

function action(cmd) {
  var a = new Object();
  if (cmd == "beautifyJS") {
    a.text = i18n("beautify JavaScript");
    a.icon = "";
    a.category = "";
    a.interactive = false;
    a.shortcut = "Ctrl+Alt+f";
  }
  return a;
}

function beautifyJS() {
  var selectionRange = view.selection();
  if (view.hasSelection()) {
    if (selectionRange.isValid()) {
      var fromLine = selectionRange.start.line;
      var toLine = selectionRange.end.line;
      var fromColumn = selectionRange.start.column;
      var toColumn = selectionRange.end.column;

      var newCode = _beautify(view.selectedText());

      document.editBegin();
      document.removeText(fromLine, fromColumn, toLine, toColumn);
      document.insertText(fromLine, fromColumn, newCode);
      document.editEnd();
    }
  } else {
    var line = view.cursorPosition().line;
    var endColumn = document.lineLength(line);

    var newCode = _beautify(view.selectedText());

    document.editBegin();
    document.removeText(line, 0, line, endColumn);
    document.insertText(line, 0, newCode);
    view.setCursorPosition(line + 1, 0);
    document.editEnd();
  }
}

function _beautify(jsSrcTxt) {
  return js_beautify(jsSrcTxt, {
    indent_size: 2,
    indent_char: ' '
  });
}

上記のJSをKate用Script置き場
/usr/share/kde4/apps/katepart/script/commands
に保存します。

これだけです。

使い方
Kateエディタを再起動し、JSソースコードを開いてフォーマット箇所を選択、メニューバーの Tools > Scripts > beautify JavaScript を実行します。
なお、action()内で指定したショートカットキー(Ctrl+Alt+F)でも実行可能です。

参考にさせていただいたサイト
Kateの機能拡張(KDE4.10):kore1server