t4traw's blog

スニペット(コードのネタ帳)管理をDashからVSCode&Masscodeに移行しました

ちょっと前に Mac のスニペットコード管理ツールで有名な Dash に UI のアップデートがありました。今まではスニペット一覧がサっと出ていたのですが、それが無くなって非常に使い辛くなってしまいました。

で、エディタはしばらくVSCodeで落ち着きそうだし、エディタ組み込みの方が色々便利なのでは?と思ったので、VSCodeのスニペット管理機能にeasy-snippetという拡張を追加し、エディタで使わない部分をMasscodeというスニペット管理ツールを使う方法に移行しました。

easy-snippetを使った簡単スニペット作成・管理

easy-snippetがあれば、VSCodeのスニペット登録・編集がめちゃくちゃ簡単になります。

スニペット登録したいコードを選択した状態でコマンドパレットを開き、create snippetという感じで打てば、Create snippet by selectが表示されるので、Returnを押します。

そしたら、呼び出し時のショートカットコマンドを登録します。

そしたら、サイドバーのスニペット管理アイコン(easy-snippetのアイコン)が表示されているので、そちらをクリックして先程作ったスニペットを編集します。

お好みでdescriptionなどを書いておきます。スニペットを呼び出した後にカーソルを移動して欲しい場合は${foo}${foo}といった具合に書けばOKです。Tabキーで次に移動する事もできます。順番などを指定したい時は${1:foo}``${2:bar}と指定する感じですね。

他にも${TM_SELECTED_TEXT}${CLIPBOARD}などの便利な呼び出しがあります。詳しくはドキュメントをご覧ください。

Snippets in Visual Studio Code

今知ったんですが、CURRENT_YEARとかCURRENT_MONTHっていうの便利だな。

そしたら、こんな感じでサクっと呼び出して使えます。

キーボードショートカットにも便利なスニペットを登録

もっと頻繁に使うスニペットはキーボードショートカットに登録する事もできます。

コマンドパレットでkeyboard jsonみたいな感じで入力すると、Open keyboard shortcuts (JSON)が出てくるので、それを選択するとキーボードショートカットのjsonが表示されます。

上記にあった呼び出しが全部使えるので、例えば![選択した文字列](クリップボード)みたいなマークダウン用画像をサクっと挿入したい場合は、

{
  "key": "cmd+k cmd+i",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "![${TM_SELECTED_TEXT}](/images/${CLIPBOARD})"
  }
}

こんな感じで登録すればcmd+kcmd+iでサクっと![選択した文字列](クリップボード)ができるようになります👏

VSCode以外で使うスニペットやコードのネタ帳はMasscodeに

VSCode外で使いたいスニペットやネタ帳は、Masscodeというツールを使う事にしました。

massCode - A free and open source code snippets manager for developers

本当はこの子だけで行きたかったのですが、スニペット呼び出し後のカーソルの自動移動が無いのが辛かったですね。逆に言えばそれさえあればこの子だけでもいけたかもしれません。が、やっぱエディタ内蔵の親和性が高いからなぁ。VSCodeから切り替えない限りは無いかも。


というわけで、スニペットツールの移行をしました。あとはこれをストレスなく同期するだけです。

それでは。

  • この記事を書いたひと: @t4traw
  • 投稿日: 2020年7月6日
  • カテゴリー: 便利
  • タグ:

カテゴリー

キーワード