こんにちは、さち です。
普段、JavaScript を書くときは Sublime Text 3 を使っています。
かの有名な「Emmet」は導入済みなんですが
HTML, CSS にしか対応しておらず、JavaScript は未対応です。
Emmet のように JavaScript でも楽に入力するには
それ用の「スニペット」パッケージが別途必要です。
ということで、スニペットパッケージを導入して
何度も「getElementsByClassName」と打つ鬱とお別れしてみます。
JavaScript は記述が面倒くさい
- 例えば、「getElementsByClassName」。
やたら長くてキーボードで打つのが面倒です。
- 「console.log」は短いですが
デバッグ（テスト）でよく使うものなので、何度も書くのが面倒です。
JavaScript を書くときに楽をしたいのはもちろんですが
記述が長いと、タイプミスをしやすいという現実的な問題もあります。
JavaScript のスニペットを導入する
JavaScript 用の「スニペット」パッケージを利用することで
短い記述で必要な記述を呼び出せるようになります。
（下記手順は、Sublime Text 3 に Package Control が導入済みの状態）
- 「Ctrl + Shift + P」キーを押して、コマンドパレットを開き、「install」と入力。
「Package Control: Install Package」を選択して、「Enter」キーを押します。
- 「JavaScript snippets」と入力。
- 「JavaScript & NodeJS Snippets」を選択します。
（どのスニペットパッケージを選ぶかは好みなので、別のものでもOK）
- インストールが完了すると、JavaScript のスニペットが使えるようになります。
例えば、「gc」と打って「Tab」キー（「Enter」キーでも可）を押せば……
- 「getElementsByClassName」が入力されます。楽ですね。
「document」が自動選択されるので、別の要素を使う時は上書きできます。
「Tab」キーを押すと、クラス名（「class」の部分）にジャンプします。
- さらに、「cl」と打って「Tab」キー（「Enter」キーでも可）を押せば……
- 「console.log」が入力できます。
引数部分が自動選択されるので、目的のもので上書きしましょう。
短縮した記述が分からないとき
スニペットの短縮記述はメソッド名の頭文字がほとんどですが
分からないときは検索することもできます。
（下記手順は、パッケージ「Japanize」で日本語化した状態）
- JavaScript ファイルを開いてるタブをアクティブにした状態で
メニューの「ツール」→「スニペット」と進みます。
- 「Snippet:」と入力済みなので、目的のメソッド名を追記。
一致するメソッド名の右端に短縮記述が表示されています。
例えば、「addEventListener」なら「ae」と打って「Tab」キーを押せば良いわけです。
表示中のファイル形式（JavaScript, HTML, CSS 等）に対応した
スニペットのみが検索される仕様です。
注意しましょう。
スニペットを入れずに使っていたのが馬鹿らしくなるくらい
JavaScript の記述が楽になりました。
スニペットを導入する一瞬の手間を惜しんで
面倒くさい記述に手間をかけ続けるのは、あまりに愚かでした……。
手間から開放されたいのなら、楽をする努力が必要ですね。
【参考ページ】
コメント