Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
61
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
61
Help us understand the problem. What are the problem?