atomで自作の入力補完候補(スニペット)を登録する方法

プログラミング用エディタのatomで独自のスニペットを登録する方法を紹介します。

スニペットとは

スニペットとは入力補完候補のことです。例えばhtmlと入力したいときに、hと入力したタイミングでhtml,h1,headerなどの入力候補を一覧で表示してくれて、その候補の中から選択するだけで入力することができます。

autocomplete

atomではhtml,h1,headerなどの入力候補を独自に設定することができます。

設定方法

atomのメニューバーのEdit(編集)タブから「snippet」を選択します。すると、snippet.csonというファイルが開きます。

このファイルで独自のスニペットを定義します。

例えばhtmlでmytag1というスニペットを登録したい場合は以下のように定義します。

'.text.html.base':
  'mytag1':
    'prefix': 'mytag1'
    'body': '<mytag1>${1:中身}</mytag1>'

このように定義しておけば、htmlファイルを編集するときにmmyまで入力したタイミングでmytag1の入力候補が表示されます。

.text.html.baseで対象のファイルタイプを指定します。.text.html.baseはhtmlファイルを指します。なので.jsファイルなどを編集するときはこのスニペットは適用されません。

ファイルタイプを調べる

filetype

指定するファイルタイプの文言はインストールされたパッケージから「language-言語」の「Settings」を開き、「Grammar」のscopeで知ることができます。

$1を指定しておくと、スニペットで入力後にその部分にフォーカスが当たります。$2を指定しておくと$1で何か値を入力後にエンターを押すと$2にフォーカスが当たります。

${1:中身}と指定すると、「中身」という文言が初期値としてセットされます。

複数定義する

同一ファイルタイプで複数のスニペットを登録したい場合、ファイルタイプは最初の一回のみ記載します。

'.text.html.base':
  'mytag1':
    'prefix': 'mytag1'
    'body': '<mytag1>${1:中身}</mytag1>'

  'mytag2':
    'prefix': 'mytag2'
    'body': '<mytag2>$1と$2</mytag2>'

  'mytag3':
    'prefix': 'mytag3'
    'body': '<mytag3>\'シングルクォーテーションはエスケープする\'</mytag3>'

複数行定義する

bodyにダブルクォーテーション3つで囲めば複数行で定義することができます。

'.text.html.base':
  'newlinetest':
    'prefix': 'newlinetest'
    'body': """
    あいうえお
    改行もできます
    """

関連記事

  • Atomのlinter-eslintでvuejsのプラグインを導入する

    Atomエディタでjavascriptのリアルタイムの構文チェックをおこなうプラグインlinter-eslintでvuejsのファイルもチェックをおこなうようにしたときの設定メモです。vuejs用のe...


  • atomで自作の入力補完候補(スニペット)を登録する方法

    プログラミング用エディタのatomで独自のスニペットを登録する方法を紹介します。スニペットとは入力補完候補のことです。例えばhtmlと入力したいときに、hと入力したタイミングでhtml,h1,head...


  • atom XDebugでPHP(laravel)をデバッグする

    atomエディタでlaravelのデバッグを行う方法を紹介します。XDebugはインストールされているものとします。php.iniでxdebugの設定がされていることを確認します。apacheをインス...


  • atomでショートカットキーを作成・変更する方法

    atomエディタでショートカットキーを設定・変更する方法を紹介します。最初に、まだ割り当てられていないコマンド、例えば「すべて保存(Save All)」のコマンドにショートカットキーを設定する方法を紹...


  • Atomの便利なおすすめパッケージ

    github製の高性能エディタAtomの便利なパッケージを紹介します。いろいろな便利なパッケージを使用することにより、開発効率は格段に上がりますので、最初に便利そうな機能はいろいろと試して自分にあった...


  • 鼻中隔湾曲症の入院・手術 体験記 -手術から現在まで-

    いざ手術室へ...緊急搬送などとは違い、患者(私)は自分で歩くことができる元気(?)な状態なので、手術室には自分で歩いて入りました。そして、ドラマでよく見るような手術室の手術台に自分で横になりました。...


  • 唐松岳・八方尾根に日帰り登山レビュー

    唐松岳に日帰り登山に行ってきました。登山道は森の中を歩く箇所は少なく、ほとんど開けた場所で、風が下から吹いてきてとても気持ちが良いです。途中までリフトが使えることや、道がとても歩きやすいことから、唐松...


  • 鼻中隔湾曲症の入院・手術 体験記 -検査から入院まで-

    以前、鼻中隔湾曲症の手術を受けました。鼻中隔湾曲症の手術をこれから受ける方や、手術をためらっている方に少しでも参考になれば幸いです。手術を受ける前は、睡眠時に鼻孔(左側)がふさがってしまい、鼻呼吸がで...


  • LaravelのElixirでbrowserSyncを導入する

    LaravelのElixirでビルド後にブラウザを自動で再表示するために、browserSyncを導入しました。browserSyncをするためには「laravel-elixir-browsersyn...


  • 冠着山に登山・トレッキングに行ってきました

    冠着駅から歩いて行ったのですが、途中の道はサイクリングをしたくなるようなとても気持ちのいい道でした。かなりの長距離で大変でしたが、姨捨のあぜ道は景色がとても絶景で、風も心地良かったです。夏には最高の避...