Sublime Text 3でスニペットを登録・編集する 💻

f:id:kimizuka:20201019165706p:plain

Sublime Textにはスニペットを登録する機能があります。

Tool > Developer > New Snippet...

を選択すると、

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

とスニペットのテンプレートが表示されるので、

<snippet>
  <content><![CDATA[<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  <meta charset="UTF-8" />
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />
  <meta name="generator" content="Sublime Text 3" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta property="fb:app_id" content="" />
  <meta property="og:title" content="" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="" />
  <meta property="og:image" content="" />
  <meta property="og:image:width" content="" />
  <meta property="og:image:height" content="" />
  <meta property="og:site_name" content="" />
  <meta property="og:description" content="" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:creator" content="" />
  <meta name="twitter:title" content="" />
  <meta name="twitter:description" content="" />
  <meta name="twitter:image:src" content="" />
  <meta name="format-detection" content="telephone=no" />
  <link rel="canonical" href="" />
  <link rel="stylesheet" href="" />
  <link rel="shortcut icon" href="" />
  <link rel="apple-touch-icon-precomposed" href="" />
</head>
<body>
  <div id="fb-root"></div>
</body>
</html>]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>html5</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope></scope>
</snippet>