VSCode スニペット作成完全ガイド：ユーザー定義からプロジェクト共有まで

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "スニペット名": {
    "prefix": "トリガーワード",
    "body": [
      "展開されるコード1行目",
      "展開されるコード2行目"
    ],
    "description": "スニペットの説明"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": [
      "for (const ${2:element} of ${1:array}) {",
      "\t$0",
      "}"
    ],
    "description": "for...ofループを挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "React Functional Component": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "rfc",
    "body": [
      "import type { FC } from 'react';",
      "",
      "interface ${1:${TM_FILENAME_BASE}}Props {",
      "  $2",
      "}",
      "",
      "export const ${1:${TM_FILENAME_BASE}}: FC<${1:${TM_FILENAME_BASE}}Props> = ({ $3 }) => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      ""
    ],
    "description": "React関数コンポーネントを作成"
  }
}

1
2
3
4
5
6
7

{
  "Console Log": {
    "prefix": "cl",
    "body": "console.log($1);$0",
    "description": "console.logを挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "Try Catch": {
    "prefix": "try",
    "body": [
      "try {",
      "\t${1:// code}",
      "} catch (${2:error}) {",
      "\t${3:console.error($2);}",
      "}$0"
    ],
    "description": "try-catchブロックを挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "For Index Loop": {
    "prefix": "fori",
    "body": [
      "for (let ${1:i} = 0; ${1:i} < ${2:length}; ${1:i}++) {",
      "\t$0",
      "}"
    ],
    "description": "インデックス付きforループ"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "Async Function": {
    "prefix": "afn",
    "body": [
      "async function ${1:name}(${2:params}): Promise<${3:void}> {",
      "\t${4:${5:const result = }await ${6:expression};}",
      "\t$0",
      "}"
    ],
    "description": "async関数を作成"
  }
}

1
2
3
4
5
6
7

{
  "Console Method": {
    "prefix": "cons",
    "body": "console.${1|log,warn,error,info,debug|}($2);$0",
    "description": "consoleメソッドを選択して挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "Type Definition": {
    "prefix": "typedef",
    "body": [
      "${1|type,interface|} ${2:Name} ${1/(type)/${1:+=}/}${1/(interface)/${1:?extends ${3:Base} }/}{",
      "\t${4:property}: ${5|string,number,boolean,unknown|};",
      "\t$0",
      "}"
    ],
    "description": "型定義を作成"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "File Header": {
    "prefix": "header",
    "body": [
      "$BLOCK_COMMENT_START",
      " * @file ${TM_FILENAME}",
      " * @description $1",
      " * @author ${2:Your Name}",
      " * @created ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
      " $BLOCK_COMMENT_END",
      "$0"
    ],
    "description": "ファイルヘッダーコメントを挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "Class from Filename": {
    "prefix": "class",
    "body": [
      "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} {",
      "\tconstructor() {",
      "\t\t$0",
      "\t}",
      "}"
    ],
    "description": "ファイル名からクラスを作成"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  "React Component from Filename": {
    "prefix": "rcf",
    "body": [
      "import React from 'react';",
      "",
      "export const ${TM_FILENAME_BASE/([a-z]*)(-)?/${1:/capitalize}/g} = () => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      ""
    ],
    "description": "ファイル名からReactコンポーネントを作成"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
  "Property with Getter/Setter": {
    "prefix": "propgs",
    "body": [
      "private _${1:name}: ${2:string};",
      "",
      "get ${1:name}(): ${2:string} {",
      "  return this._${1:name};",
      "}",
      "",
      "set ${1:name}(value: ${2:string}) {",
      "  this._${1:name} = value;",
      "}$0"
    ],
    "description": "プロパティとgetter/setterを生成"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

{
  "Interface Definition": {
    "prefix": "intf",
    "body": [
      "interface ${1:Name} {",
      "  ${2:property}: ${3:type};",
      "  $0",
      "}"
    ],
    "description": "インターフェースを定義"
  },
  "Type Guard": {
    "prefix": "guard",
    "body": [
      "function is${1:Type}(value: unknown): value is ${1:Type} {",
      "  return ${2:condition};",
      "}$0"
    ],
    "description": "型ガード関数を作成"
  },
  "Generic Function": {
    "prefix": "gfn",
    "body": [
      "function ${1:name}<${2:T}>(${3:arg}: ${2:T}): ${4:${2:T}} {",
      "  $0",
      "}"
    ],
    "description": "ジェネリック関数を作成"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

{
  "Promise Function": {
    "prefix": "prom",
    "body": [
      "const ${1:name} = () => {",
      "  return new Promise((resolve, reject) => {",
      "    $0",
      "  });",
      "};"
    ],
    "description": "Promise関数を作成"
  },
  "Fetch API": {
    "prefix": "fetch",
    "body": [
      "const response = await fetch('${1:url}', {",
      "  method: '${2|GET,POST,PUT,DELETE,PATCH|}',",
      "  headers: {",
      "    'Content-Type': 'application/json',",
      "  },",
      "  ${3:body: JSON.stringify($4),}",
      "});",
      "const data = await response.json();$0"
    ],
    "description": "Fetch APIリクエストを作成"
  },
  "Destructuring Assignment": {
    "prefix": "dest",
    "body": "const { ${1:prop} } = ${2:object};$0",
    "description": "分割代入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

{
  "useState Hook": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "us",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:string}>(${3:initialValue});$0"
    ],
    "description": "useStateフックを挿入"
  },
  "useEffect Hook": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  ${1:// effect}",
      "  ${2:return () => {",
      "    // cleanup",
      "  };}",
      "}, [${3:dependencies}]);$0"
    ],
    "description": "useEffectフックを挿入"
  },
  "Custom Hook": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "hook",
    "body": [
      "import { useState, useEffect } from 'react';",
      "",
      "export const use${1:Name} = (${2:params}) => {",
      "  const [${3:state}, set${3/(.*)/${1:/capitalize}/}] = useState(${4:null});",
      "",
      "  useEffect(() => {",
      "    $0",
      "  }, []);",
      "",
      "  return { ${3:state} };",
      "};"
    ],
    "description": "カスタムフックを作成"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  "Class Definition": {
    "prefix": "class",
    "body": [
      "class ${1:ClassName}:",
      "    \"\"\"${2:Class description.}\"\"\"",
      "",
      "    def __init__(self${3:, args}):",
      "        ${4:pass}$0"
    ],
    "description": "クラスを定義"
  },
  "Dataclass": {
    "prefix": "dataclass",
    "body": [
      "from dataclasses import dataclass",
      "",
      "@dataclass",
      "class ${1:ClassName}:",
      "    \"\"\"${2:Class description.}\"\"\"",
      "    ${3:field}: ${4:str}$0"
    ],
    "description": "データクラスを定義"
  },
  "Context Manager": {
    "prefix": "with",
    "body": [
      "with ${1:open('${2:file}')} as ${3:f}:",
      "    $0"
    ],
    "description": "withステートメントを挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  "HTML5 Template": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"${1:ja}\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>${2:Document}</title>",
      "</head>",
      "<body>",
      "  $0",
      "</body>",
      "</html>"
    ],
    "description": "HTML5テンプレートを挿入"
  },
  "Link Tag": {
    "prefix": "link",
    "body": "<link rel=\"${1|stylesheet,icon,preconnect,preload|}\" href=\"$2\">$0",
    "description": "linkタグを挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{
  "Flexbox Container": {
    "prefix": "flex",
    "body": [
      "display: flex;",
      "justify-content: ${1|flex-start,flex-end,center,space-between,space-around,space-evenly|};",
      "align-items: ${2|stretch,flex-start,flex-end,center,baseline|};$0"
    ],
    "description": "Flexboxコンテナを設定"
  },
  "Grid Container": {
    "prefix": "grid",
    "body": [
      "display: grid;",
      "grid-template-columns: ${1:repeat(${2:3}, ${3:1fr})};",
      "gap: ${4:1rem};$0"
    ],
    "description": "Gridコンテナを設定"
  },
  "Media Query": {
    "prefix": "mq",
    "body": [
      "@media (${1|min-width,max-width|}: ${2:768px}) {",
      "  $0",
      "}"
    ],
    "description": "メディアクエリを挿入"
  }
}

1
2
3
4
5
6
7
8

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$0"
  }
}

1
2
3
4
5
6
7
8
9

{
  "key": "ctrl+shift+c",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus && editorLangId == typescript",
  "args": {
    "langId": "typescript",
    "name": "Class Definition"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
  "React Component File": {
    "scope": "typescriptreact",
    "prefix": "rcfile",
    "isFileTemplate": true,
    "body": [
      "import type { FC } from 'react';",
      "import styles from './${TM_FILENAME_BASE}.module.css';",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div className={styles.container}>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      ""
    ],
    "description": "Reactコンポーネントファイルテンプレート"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
  "JSDoc Function": {
    "prefix": "jsdoc",
    "body": [
      "/**",
      " * ${1:description}",
      " * @param {${2:type}} ${3:param} - ${4:param description}",
      " * @returns {${5:type}} ${6:return description}",
      " */",
      "$0"
    ],
    "description": "JSDocコメントを挿入"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

{
  "Jest Describe Block": {
    "prefix": "desc",
    "body": [
      "describe('${1:description}', () => {",
      "  $0",
      "});"
    ],
    "description": "Jestのdescribeブロック"
  },
  "Jest Test Case": {
    "prefix": "it",
    "body": [
      "it('${1:should}', ${2:async }() => {",
      "  ${3:// Arrange}",
      "  ",
      "  ${4:// Act}",
      "  ",
      "  ${5:// Assert}",
      "  expect($6).${7:toBe}($8);$0",
      "});"
    ],
    "description": "Jestのテストケース"
  },
  "Jest Mock": {
    "prefix": "mock",
    "body": [
      "jest.mock('${1:module}', () => ({",
      "  ${2:method}: jest.fn()${3:.mockReturnValue($4)},",
      "}));$0"
    ],
    "description": "Jestのモック"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "Express Route Handler": {
    "prefix": "route",
    "body": [
      "router.${1|get,post,put,delete,patch|}('${2:/path}', async (req: Request, res: Response) => {",
      "  try {",
      "    $0",
      "    res.json({ ${3:data} });",
      "  } catch (error) {",
      "    res.status(500).json({ error: 'Internal Server Error' });",
      "  }",
      "});"
    ],
    "description": "Expressルートハンドラー"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "Debug Log with Context": {
    "prefix": "dlog",
    "body": [
      "console.log('[${TM_FILENAME_BASE}:${TM_LINE_NUMBER}]', '${1:message}', ${2:value});$0"
    ],
    "description": "ファイル名と行番号付きログ"
  },
  "Debug Object": {
    "prefix": "dobj",
    "body": [
      "console.log('${1:${TM_SELECTED_TEXT:object}}:', JSON.stringify(${1:${TM_SELECTED_TEXT:object}}, null, 2));$0"
    ],
    "description": "オブジェクトをJSON形式でログ出力"
  }
}

1
2
3

{
  "editor.snippetSuggestions": "inline"
}

1
2
3

{
  "editor.tabCompletion": "on"
}

1
2
3
4
5
6
7

{
  "PHP Variable": {
    "prefix": "phpvar",
    "body": "\\$${1:variable} = ${2:value};$0",
    "description": "PHP変数を定義"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// プロジェクトスニペットファイルのコメント例
{
  // =====================================
  // API関連スニペット
  // =====================================
  "API Handler": {
    "prefix": "api",
    "body": ["..."],
    "description": "APIハンドラーテンプレート"
  }
}