81
73

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VSCodeのスニペット機能をより便利にする方法

Last updated at Posted at 2019-12-03

Visual Studio Codeのスニペット機能の中で、デフォルト設定のままだと不便だと感じる点の解消方法をまとめてみました。

1. 不要なスニペットを無効化する

何かの拡張機能を入れたら自分にとっては必要のないスニペットまで大量登録されて、入力補完候補がノイズだらけになって鬱陶しいみたいなことはありませんか?
そんな場合は以下の拡張機能を入れることで、拡張機能ごとにスニペットの有効・無効を切替可能になります。

Control Snippets - Visual Studio Marketplace

Control Snippets

2. ファイル名のパターン別にスニペットを登録する

Visual Studio Codeのスニペット機能はデフォルトで言語ごとにスニペットを作成することが出来ます。
ただしこれだと同じ言語でも、複数の種類のファイルが存在する場合にノイズだらけになって困ります。(例えば、Railsプロジェクトでマイグレーション用のスニペット登録をしたら、全ての.rbファイルで入力補完として表示されてしまう等…)
本体にも要望としては出ているのですが、当分対応されそうな気配はありません。
Snippets: Scope by specific file or pattern · Issue #75955 · microsoft/vscode

そこで上記の問題を解消する為の拡張機能を作りました。

Snippets by pattern - Visual Studio Marketplace

現状ではsettings.jsonに対して、パターン毎にスニペットを記述していく形式になります。

設定例

settings.json
{
  "snippetsByPattern.snippets": {
    "**/db/migrate/*.rb": {
      "add_column": {
        "prefix": "add_column",
        "body": [
          "add_column :${1:table_name}, :${2:column_name}, :${3|boolean,date,datetime,decimal,float,integer,primary_key,references,string,text,time,timestamp|}, null: false, default: ${4:value}"
        ],
      },
      "remove_column": {
        "prefix": "remove_column",
        "body": [
          "remove_column :${1:table_name}, :${2:column_name}"
        ],
      },
    },
    "**/*_spec.rb": {
      "it": {
        "prefix": "it",
        "body": "it '$1' do\n  $2\nend"
      },
      "describe": {
        "prefix": "describe",
        "body": "describe '$1' do\n  $2\nend"
      },
      "context": {
        "prefix": "context",
        "body": "context '$1' do\n  $2\nend"
      }
    }
  }
}

Image from Gyazo

3. 入力補完時にスニペットを優先して表示する

1と2をやることで入力補完時のスニペットによるノイズはほぼ無くなるので、そうすると入力補完時にはスニペットを優先して表示したくなります。
settings.jsonに"editor.snippetSuggestions": "top"と設定することで優先して表示されるようになります。

4. タブストップ中にも入力補完を有効にする

デフォルト設定のままだと、例えばadd_column :${1:table_name}, :${2:column_name}というスニペットを選択して、タブで${1:table_name}まで移動した場合に入力補完が効きません。
settings.jsonに"editor.suggest.snippetsPreventQuickSuggestions": falseと設定することで、タブストップ中にも入力補完が有効になります。

[Image from Gyazo

81
73
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
81
73

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?