ユーザースニペッド機能

2024.02.29

はじめに

概要

テキストエディタのユーザースニペットとは、プログラミングや文章作成の際に頻繁に使用するコードやテキストの断片を保存し、簡単に再利用できるようにする機能です。ユーザーは特定のキーワードを入力するだけで、あらかじめ定義しておいた長いコードや定型文を挿入できます。これにより、タイピングの手間を省き、作業の効率化を図ることができます。具体例をもとに設定してみましょう。

目的

実装内容
コード
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

動画では以下を実装しています。

– Vscodeの「！マーク」デフォル機能でHTMLのひな型を作成

– ｢！！！」自作のスニペッドでbody内のコードを出力

– ｢__media」自作のスニペッドでメディアクエリを生成

設定箇所

上部のメニューからタイトル(VsCode/Cursor)を選択
↓
基本設定
↓
ユーザースニペットの構成
↓
構成する言語を選択

コード

以下はユーザースニペットの一例です。動画で紹介した内容になります。コピー＆ペーストできるように添付しておきます。

HTML

"!DOCTYPE html2": {
		"prefix": "!!!",
		"body": [
			"<div id=\"global-container\">",
			"  <div id=\"container\">",
			"    <header class=\"header\"></header>",
			"    <main>",
			"      <div id=\"main-container\">",
			"",
			"      </div><!-- /#main-container -->",
			"    </main>",
			"    <div class=\"footer\">",
			"",
			"    </div><!-- /.footer -->",
			"  </div><!-- /#container -->",
			"</div><!-- /#global-container -->"
		],
		"description": "!DOCTYPE html"
	}

SCSS

 "media": {
    "prefix": "___media",
    "body": "@include mq($1){}",
    "description": ""
  },

	"background": {
    "prefix": "_background-image",
    "body": "background-image: url(~@img/$1/$2);",
    "description": "background-image"
  },

  "extend": {
    "prefix": "_extend",
    "body": "@extend .background-set;",
    "description": "background-set"
  },

コードの解説

ユーザースニペットの設定はJSON形式で行います。JSON（JavaScript Object Notation）は、データ交換のフォーマットの一つで、読みやすく、かつ機械が解析しやすい構造を持っています。この形式を使用することで、設定ファイルが人間にもコンピュータにも理解しやすい形になります。

Prefix

役割: ユーザーがスニペットを呼び出す際に使用するキーワードまたはフレーズを指定します。このPrefixは、コーディング中に速やかにコードスニペットを挿入したい場合に入力されるトリガーとなります。

例:"prefix": "log"は、ユーザーがlogと入力した際に、関連するスニペットが提案されることを意味します。

Body

役割: 実際に挿入されるコードスニペットの内容を記述します。ここには、複数行のコードや、変数部分を含むテンプレートリテラルも設定することが可能です。

例:"body": ["console.log(${1:variable});"]では、console.log()関数を呼び出すJavaScriptのコードスニペットを定義しています。${1:variable}は、ユーザーがスニペットを挿入した際に最初にカーソルが置かれる部分で、簡単に変数名を編集できるようになっています。

まとめ