vscode snippet

나만의 단축키 만들기

• react function component의 줄임말인 rfc만 입력하면 자동으로 코드가 완성되도록 만들어보자

절차

1. cmd + shift + p

2. Snippets: Configure User Snippets

3. New Global Snippet을 선택 후 원하는 이름으로 만든다

• e.g. global-snippet-vscode.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "export default function ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}($2) {",
      "  $3",
      "  return (",
      "    <div>",
      "      $4",
      "    </div>",
      "  );",
      "}"
    ],
    "description": "React Function Component"
  }
}

참고

• https://youtu.be/umeqCopb96w