ST3:「getElementsByClassName」と打つのが鬱なので楽したい

この記事は約3分で読めます。

操作画面

こんにちは、さち です。

普段、JavaScript を書くときは Sublime Text 3 を使っています。

かの有名な「Emmet」は導入済みなんですが
HTML, CSS にしか対応しておらず、JavaScript は未対応です。

Emmet のように JavaScript でも楽に入力するには
それ用の「スニペット」パッケージが別途必要です。

ということで、スニペットパッケージを導入して
何度も「getElementsByClassName」と打つ鬱とお別れしてみます。

スポンサーリンク

JavaScript は記述が面倒くさい

  1. 例えば、「getElementsByClassName」。
    やたら長くてキーボードで打つのが面倒です。
    操作画面
  2. 「console.log」は短いですが
    デバッグ(テスト)でよく使うものなので、何度も書くのが面倒です。
    操作画面

JavaScript を書くときに楽をしたいのはもちろんですが
記述が長いと、タイプミスをしやすいという現実的な問題もあります。

JavaScript のスニペットを導入する

JavaScript 用の「スニペット」パッケージを利用することで
短い記述で必要な記述を呼び出せるようになります。
(下記手順は、Sublime Text 3 に Package Control が導入済みの状態)

  1. 「Ctrl + Shift + P」キーを押して、コマンドパレットを開き、「install」と入力。
    「Package Control: Install Package」を選択して、「Enter」キーを押します。
    操作画面
  2. 「JavaScript snippets」と入力。
    操作画面
  3. 「JavaScript & NodeJS Snippets」を選択します。
    (どのスニペットパッケージを選ぶかは好みなので、別のものでもOK)
    操作画面
  4. インストールが完了すると、JavaScript のスニペットが使えるようになります。
    例えば、「gc」と打って「Tab」キー(「Enter」キーでも可)を押せば……
    操作画面
  5. 「getElementsByClassName」が入力されます。楽ですね。
    「document」が自動選択されるので、別の要素を使う時は上書きできます。
    「Tab」キーを押すと、クラス名(「class」の部分)にジャンプします。
    操作画面
  6. さらに、「cl」と打って「Tab」キー(「Enter」キーでも可)を押せば……
    操作画面
  7. 「console.log」が入力できます。
    引数部分が自動選択されるので、目的のもので上書きしましょう。
    操作画面

短縮した記述が分からないとき

スニペットの短縮記述はメソッド名の頭文字がほとんどですが
分からないときは検索することもできます。
(下記手順は、パッケージ「Japanize」で日本語化した状態)

  1. JavaScript ファイルを開いてるタブをアクティブにした状態で
    メニューの「ツール」→「スニペット」と進みます。
    操作画面
  2. 「Snippet:」と入力済みなので、目的のメソッド名を追記。
    一致するメソッド名の右端に短縮記述が表示されています。
    例えば、「addEventListener」なら「ae」と打って「Tab」キーを押せば良いわけです。
    操作画面

表示中のファイル形式(JavaScript, HTML, CSS 等)に対応した
スニペットのみが検索される仕様です。
注意しましょう。

スニペットを入れずに使っていたのが馬鹿らしくなるくらい
JavaScript の記述が楽になりました。

スニペットを導入する一瞬の手間を惜しんで
面倒くさい記述に手間をかけ続けるのは、あまりに愚かでした……。

手間から開放されたいのなら、楽をする努力が必要ですね。

【参考ページ】

   → JavaScript & NodeJS Snippets - Package Control

コメント

タイトルとURLをコピーしました