[VScode] 리액트에 수니 펫 사용.

매번 아래의aro 함수를 쓰는 것은 매우 번거롭다...

const sum = (a:number, b:number) => {
  return a + b;
}

이럴 땐 대단해!
사용 방법은 매우 간단하다...
다음 캡처 선택 사용자를 참조하십시오.

그래서 검색창이 나왔어요.
React의 경우 [typescript.json] typescript 파일을 선택하고 [typescript.json]을 선택합니다.

처음 열면 사용법의 예를 댓글창에 올립니다.
다 필요 없으니까 끄고 업데이트할게요.

{
  "() => {}": {
    "prefix": "afn",
    "body": "const $1 = ($2) => {$3}",
    "description": "アロー関数"
  }
}

각자의 내용은 다음과 같다.

prefix는 입력

입니다.

출력 "body"

'description'은 자신이 사용한 설명서(스니 애완동물과 직접적인 관계가 없음)

"또한 바디의""$1""은 초기 커서 위치를 나타냅니다."탭은 $2, $3 순서로 이동할 수 있습니다.위의 예에서 먼저 함수 이름을 입력한 다음에 탭 문자를 누르고 매개 변수 이름으로 이동한 다음에 함수 안으로 이동할 수 있다.
실제로 입력하면 다음과 같이 표시됩니다.

그리고 초기 위치 커서는 예상한 대로 $1에 있습니다!

응용편

다행운동

여러 줄을 간단하게 출력할 수 있다.

  "Component initialization": {
    "prefix": "cinit",
    "body": [
      "import React from 'react';",
      "",
      "export const $TM_FILENAME_BASE = () => {",
      "  return (",
      "    <>",
      "      <div>hello world</div>",
      "    </>",
      "  );",
      "};"
    ],
    "description": "コンポーネントの初期化"
  },

바디의 값만 배열합니다.공행으로 [""]을 사용하면 됩니다.
App.tsx에서 "cinit"를 입력할 때의 출력은 이런 느낌입니다.

sni 펫 변수

sncode에 sni 애완동물용 변수가 준비되어 있습니다.
복수행의 스니 펫은 실제로 $TM FILENAME BASE의 물건을 이용한다.
이것은 출력할 때 '현재 문서에 확장자가 없는 파일 이름' 으로 바꿉니다.
다른 것도 많이 준비돼 있어 다음 링크에서 자세한 내용을 확인할 수 있다.
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax

덤

스니 펫이 변수로 출력되는 것을 확인하기 위해 스니 펫을 제작했습니다.
복사 후 출력되는 것을 확인하는 데 사용하세요.

  "sample": {
    "prefix": "snivar",
    "body": [
      "$TM_SELECTED_TEXT ",
      "$TM_CURRENT_LINE ",
      "$TM_CURRENT_WORD ",
      "$TM_LINE_INDEX ",
      "$TM_LINE_NUMBER",
      "$TM_FILENAME ",
      "$TM_FILENAME_BASE ",
      "$TM_DIRECTORY ",
      "$TM_FILEPATH ",
      "$RELATIVE_FILEPATH",
      "$CLIPBOARD",
      "$WORKSPACE_NAME",
      "$WORKSPACE_FOLDER",
      "$CURRENT_YEAR",
      "$CURRENT_YEAR_SHORT",
      "$CURRENT_MONTH ",
      "$CURRENT_MONTH_NAME",
      "$CURRENT_MONTH_NAME_SHORT",
      "$CURRENT_DATE",
      "$CURRENT_DAY_NAME",
      "$CURRENT_DAY_NAME_SHORT",
      "$CURRENT_HOUR",
      "$CURRENT_MINUTE ",
      "$CURRENT_SECOND ",
      "$CURRENT_SECONDS_UNIX ",
      "$RANDOM ",
      "$RANDOM_HEX",
      "$UUID",
      "$BLOCK_COMMENT_START",
      "$BLOCK_COMMENT_END",
      "$LINE_COMMENT"
    ],
    "description": [
      "スニペット用変数一覧",
      "公式リンク",
      "https://code.visualstudio.com/docs/editor/userdefinedsnippets",
      [
        "$TM_SELECTED_TEXT 現在選択されているテキストまたは空の文字列",
        "$TM_CURRENT_LINE 現在の行の内容",
        "$TM_CURRENT_WORD カーソルの下の単語または空の文字列の内容",
        "$TM_LINE_INDEX ゼロインデックスベースの行番号",
        "$TM_LINE_NUMBER 1インデックスベースの行番号",
        "$TM_FILENAME 現在のドキュメントのファイル名",
        "$TM_FILENAME_BASE 拡張子のない現在のドキュメントのファイル名",
        "$TM_DIRECTORY 現在のドキュメントのディレクトリ",
        "$TM_FILEPATH 現在のドキュメントの完全なファイルパス",
        "$RELATIVE_FILEPATH 現在のドキュメントの（開いているワークスペースまたはフォルダーに対する）相対ファイルパス",
        "$CLIPBOARD クリップボードの内容",
        "$WORKSPACE_NAME 開いたワークスペースまたはフォルダーの名前",
        "$WORKSPACE_FOLDER 開いたワークスペースまたはフォルダーのパス",
        "$CURRENT_YEAR 今年",
        "$CURRENT_YEAR_SHORT 今年の下2桁",
        "$CURRENT_MONTH 2桁の月（例 '02'）",
        "$CURRENT_MONTH_NAME 月のフルネーム（例「7月」）",
        "$CURRENT_MONTH_NAME_SHORT 月の短縮名（例「7月」）",
        "$CURRENT_DATE 2桁の日（例 '08'）",
        "$CURRENT_DAY_NAME 日の名前（例「月曜日」）",
        "$CURRENT_DAY_NAME_SHORT その日の短い名前（例 'Mon'）",
        "$CURRENT_HOUR 24時間形式の現在の時刻",
        "$CURRENT_MINUTE 2桁の現在の分",
        "$CURRENT_SECOND 2桁の現在の秒",
        "$CURRENT_SECONDS_UNIX Unixエポックからの秒数",
        "$RANDOM 6つのランダムな基数-10桁",
        "$RANDOM_HEX 6つのランダムな基数-16桁",
        "$UUID バージョン4のUUID",
        "$BLOCK_COMMENT_START 出力例：PHP/*またはHTML<!--",
        "$BLOCK_COMMENT_END 出力例：PHP*/またはHTML-->",
        "$LINE_COMMENT 出力例：PHPの場合 //"
      ]
    ]
  }