Sublime Text3 で JavaScript を書くために設定したプラグインとキーバインド

公開日: : 最終更新日:2014/05/05 プログラム ,

プロフィール にもあるように、ボクは Java をメインとしたプログラマです。
IDE には Eclipse を使っていて、Java も JavaScript も HTML も Eclipse のエディタでゴリゴリ書いてました。

が、先日 Sublime Text3 をインストールしてからは JavaScript のコーディングは Sublime Text3 に乗り換えました。
Eclipse のエディタでは出来なかった「痒いところに手が届く」的な便利機能から離れられない状態になってしまったからでして、Sublime 熱が上昇しまくりです。

で、その設定ですが、自分への備忘録も兼ねてその設定をメモしておきます。

icatch-back-scratcher_3553512020_mini

photo credit: Travis S. via photopin cc

目次

1. ボクのマシンにインストールしてある Sublime Text3 について

マシンに Sublime Text3 をインストールしてからすぐにインストールしたプラグインについては、次の記事にまとめてあります。
この記事に書かれていることが前提としてますのでご注意ください。

Sublime Text3 のインストール直後に行った設定メモ

2. JavaScript のコーディング効率を上げるプラグイン

では、まずはプラグインから。
これまでこのブログで紹介したものと重複するものもありますが、改めて載せておきます。

2-1. BracketHighlighter

BracketHighlighter は、カーソル行や、対応するカッコなんかを目立たせてくれるプラグインです。

Eclipse でも対応するカッコやブロックを強調表示してくれますが、こちらのほうがより強調してくれるので分かりやすいですね。

オブジェクト定義の範囲を強調表示してくれたり、

20140311_01_01
if やブロックを強調表示してくれます。

20140311_01_02

適切にインデントしてあればそれだけでもいいのかもしれませんが、強調されるってのは思っている以上にコードが書きやすいです。

2-2. jQuery

Eclipse を使って Java を書くことに慣れてしまうと、他の言語でも Tab キーを押してコードの入力補完をしたくなります。
Sublime Text の入力補完系のプラグインは結構充実しているので、一度調べてみるといいかと思いますが、jQuery は jQuery の入力補完に特化したプラグインです。

例えば、セレクタで取得した要素に attr() を使って属性を設定したい場合、”a” と “t” を入力したタイミングで、次の画面のように補完候補がずらっと表示されます。

20140311_01_03

設定したい属性は1つなので、”.attr() – single” を選択して

20140311_01_04

Tab キーを叩くと、こんな風にひな形を入力してくれちゃいます。

20140311_01_05

change() なんかも、”c” と “h” を入力すると次のような補完候補が表示されるので、

20140311_01_06

Tab キーで選ぶと、関数のひな形を入力してくれます。

20140311_01_07

自動補完のおかげでタイプミスが減っていいリズムでコードが書けます。

また、構文を忘れてしまった場合も、適当に2,3字入力して補完ダイアログを表示させて思い出すってこともできるようになります。
調べるためにブラウザに切り替える手間が減るので、エディタだけに集中できていい感じです。

2-3. SublimeLinter-jshint

SublimeLinter-jshint は JavaScript の構文チェックをしてくれるプラグインです。

インストールについては次の記事で取り上げていますので、そちらを参照してください。

2-4. DocBlockr

DocBlockr は、関数のコメントを入力補完してくれるプラグインです。

例えば、こんな関数があったとして、

function hoge() {
    console.log("xxx");
}

“function” の1行上の行で “/**” と入力して、、、

20140311_01_08

Enter キーを叩くと、次のようにコメントのひな形を入力してくれます。

20140311_01_09

もちろん引数を取る関数にも対応しています。
引数がある場合のひな形はこの通りです。

20140311_01_10

“type” が入っているのが地味に効いてます。
ついつい端折りたくなる type ですけど、「そうだよね。書いたほうがいいんだよね。」って気持ちにさせてくれます。

3. JavaScript のコーディング効率を上げるキーバインド

3-1. Eclipse のキーボードショートカットを Sublime Text3 でも再現する

この記事の冒頭でも書きましたが、Eclipse をメインに使っているので、Eclipse のキーボードショートカットが手に馴染んでまして。
Sublime Text3 でも同じキーボードショートカットが使えないかなと探したところ、次の記事を見つけました!

この中からボクが適用させていただいたのが次の5つ(文言はリンク先からの引用です)。

  • F3で関数の宣言元にジャンプ
  • alt+左で戻る
  • alt+右で戻ったのをまた進める
  • 上の行と入れ替える
  • 下の行と入れ替える

1つ目の「F3で関数の宣言元にジャンプ」は Eclipse でもよく使っていたショートカットだったので、これだけでも Sublime Text2 から 3 にバージョンアップした甲斐があったというものです。

これまではインクリメンタルサーチを使って定義元に移動したり、行番号を覚えておいて定義元から戻ってきたりしていたのですが、これがちょっと面倒くさくて「なんだかなぁ~」と思っていたのですが、一気に解決しました。
これはおすすめです!

3-2. ctrl+r で関数検索パレットを開く

「関数検索パレット」とは、ctrl+p で表示されるパレットに “@” を入力した状態のパレットです。
関数検索パレットって言葉が一般的なのかは分かりませんが、次の記事で使われていたのでマネさせてもらいました。

で、上の記事にもあるように ctrl+r で関数検索パレットが開くのはデフォルトの設定なのですが、インストールしたプラグインのどれかと設定が重複したらしく関数検索パレットが開かなくなってしまいました。

この関数検索パレットはかなり使えるヤツで、Markdown で何かを書いているときには見出しにジャンプできたり、プログラムを書いてるときなら関数の定義元にジャンプできます。
コイツが使えなくなるのは困る、、、ということで、デフォルトのキーバインドからユーザ個別の設定ファイルにコピペしました。

  1. Preferences → Key Binding – User を選択
  2. 開いた keymap ファイルに次を追加して保存
//関数検索パレット呼び出し
{
    "keys": ["ctrl+r"], "command": "show_overlay", "args": {"overlay": "goto", "text": "@"}
},

どのプラグインと重複したのかは調べてませんが、とりあえずこれで ctrl+r で関数検索パレットが開くようになります。

4. まとめ

以上、ボクが JavaScript 用に Sublime Text3 に設定した内容についてでした。

これに加えて、エディタを保存したらブラウザがリロードされるプラグインについても試しています。
エディタからブラウザにフォーカスは移るのですが、どうも画面がリロードされず試行錯誤中です。。。

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

no image

no space left と表示されたときの対処法

タイトルの "no space left" とは「書き込みたいけど、ディスクの飽

記事を読む

icatch_8626992930-resized

シェルスクリプトでcdしたいパスにスペースが入っている場合の対処法

cd したいパスにスペースが入っていると、パスの先頭からスペースまでを「移動したいパス」と解釈されて

記事を読む

icatch_2385618390-resized

Linuxでmp3をお手軽に結合する

このブログを運用している Linux サーバで radiko.jp から番組を mp3 に録音して個

記事を読む

icatch-vacuum_9060011568_mini-thumbnail

GitHub にアップされているブランチをローカルに取り込む

GitHub に限らず、会社や自分で Git のサーバを使った場合にも当てはまりますが、毎回同じこと

記事を読む

icatch-2015-003-1

Vagrantで起動したCentOS上のMySQLにホストOSからログインする設定

マシンを新しくしたこともあり、検証と称してソフトウェアをやみくもにインストールすることに抵抗が出てき

記事を読む

icatch-9214710040_822a4c3456_z-resized

ロードアベレージを監視するシェルスクリプトを作成してみた

このブログを運用している Linux サーバの負荷が高い状態になってました。 何か被害にあったとかで

記事を読む

icatch-markdown_14bd207bd7_mini-thumbnail

Markdown記法のテキストに書いたソースコードをシンタックスハイライトするプラグイン

SublimeText3 で拡張子が md のファイルを開いたときに、文章中に書かれたプログラムのソ

記事を読む

icatch-medium_4301351732-resized

mp3splt を実行して “undefined symbol: mp3splt_u_check_if_directory” と出力されたときの対処法

mp3 ファイルを分割してくれる mp3splt というライブラリがあります。 mp3 ファイルを

記事を読む

icatch-vagrant_box_customize

VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を構築することが多くなってきた。

記事を読む

icatch-jersey_multi_pathparams

Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format} のような URL も以下のよう

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


8 − 八 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑