戯れ言葉

VSCode のスニペットという短文登録

カテゴリ：フリーソフト
タグ：VSCodeHTML・CSS

　Visual Studio Code（以下 VSCode）にスニペットという、前もって登録した短文を呼び出す機能があります。
　エディターでは普通にある機能のようです。
　例えば、VSCodeの場合は、キーになる英単語を入力後、Tabキー（EnterキーでもOK）を押して登録した短文を呼び出します。
　既定ではbrと入力後Tabキーを押すと<br>に書き換わります。（インストールした拡張機能：エクステンション等によるようです。）
　この設定ファイルは
　C:\Users\hige\.vscode\extensions
1.Users はカタカナの事もある。
2.hige はログイン名
3.Windows7 です。
　のフォルダーにあるようですが全貌はよく分かっていません。

　どちらにしろ、私はそんな機能を知らなかったので、そんなんがあれば良いのにと思ってたところ、やっぱ、ググってみました。

　結果
Developers.IO：Visual Studio Codeでユーザー独自のスニペットを定義する 
というサイトが見つかって、ここで解りやすく説明されてます。

　スニペット（snippet）とは切れ端とか断片という意味なんだとか。
　こういうIT関係でなくても、情報が国際化していく今日では、単語がカタカナ化していくのは仕方がないんでしょうねぇ。
　逆に、日本語のすしやカラオケという単語がそのまま国際的な単語になっていくのと同じ事だとは思いますが、でもIT関係は英単語そのままの流入が激しいようで、誰も翻訳なんかする勇気はなさそうだし。
　こんな世界では、まぁ、へたに日本訳すると、世界基準の言いまわしから阻害されるかも。
　閑話休題

　で、そのスニペットを私の個人に合わしてみようと。

　私がブログ記事を書いてて、めんどくせっ、と思うのは

  <a href="http:// ････ " target="_blank">リンク先名 
   <i class="fa fa-external-link" aria-hidden="true">
   </i>
  </a>
と、外部リンクを書く時です。
　この内、<i>タグ内は と云うFont Awesome Icon を表示させる為の記述です。
（注）ver 4 以前の記述です。

　VSCodeでスニペットを記述する場所は

ファイル(F)
　 ｜
　基本設定(P)
　　｜
　 ユーザースニペット(S)
と、プルダウンメニューを辿ると

　言語選択画面になるので、ここで該当の言語（私の場合はHTML）を選びます。

　ユーザースニペット（ html.json ）の初期画面。
　全てコメント化されてますが。

  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
　ここには上記のような例文が書かれてます。
　で、詳細は上記サイトで。

　そこで、冒頭の a href= 以降が挿入されるように、以下を書き込みました。

{
  "a href set": {
    "prefix": "hrefsn",
    "body": [
      "<a href=\"$1\" target=\"_blank\">$2&ensp;",
      "  <i class=\"fa fa-external-link\" aria-hidden=\"true\">",
      "  </i>",
      "</a>"
    ],
    "description": "Log output to console"
  }
}
　JSON というものだそうです。このJSON ではダブルクォーテーション（ " ） で囲まれた中にダブルクォーテーションをそのまま書く事が出来ません。
　iPentaec：JSON でのエスケープ処理 (JSONの値に""", "\" を含める場合の処理) 
　と云うサイトに書かれているように
　\" とするのだそうです。（\は¥ キーで）
　これで hrefsn と入力後すぐにTabキーかEnterキーを押すと、

<a href="" target="_blank">&ensp;
<i class="fa fa-external-link" aria-hidden="true">
</i>
</a>
　と変換され、カーソルがURLの入力位置（ JSONで書いた$1の場所 ）の最初の " " の間に表示され、ここにURL 入力する事ができます。入力後更にTab キーを押すと、カーソルは&ensp;の前（ $2 ）に移動してリンク先名を入力できます。

　めっちゃ便利

　こんなことも
　文字実体参照一覧 
スポンサーサイト



新旧記事

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

 お名前とか
 ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます