VSCodeでよく使う定型文をユーザースニペットに登録しておけば簡単に呼び出すことができる。
まず、左下歯車→ユーザースニペット→使用する言語を選択する。
もしすべての言語に適用したい場合は、global snippets fileを選ぶ。
そうするとJsonファイルが開くので、そこにスニペットを登録していく。
例えば次のようなconsole.logを呼び出すスニペットを登録してみる。
{ "console.log": { "prefix": "cl", "body": [ "console.log(${1});", "${2}", "${0}" ] }}
prefixの文字に書いた文字「cl」と入力するだけで変換候補にconsole.logが出てきて、それを選択すればbodyの内容が書き込まれる。
body内の$1は最初にカーソルが位置する場所で、Tabを押ごとに$2、$3とカーソルが移動していき最後に$0に行きつく。
またVSCodeの設定でSnippet Suggestionsと検索して、
その設定をTopに変更すれば、ユーザースニペットが変換候補の一番上に出てくるようになり、よりいっそう入力が捗る。
登録したユーザースニペットをショートカットキーに割り当てることもできる。
左下歯車→キーボードショートカットを選択し左上のJsonファイルを開くボタン（Open Keyboard Shortcuts）をクリック。
keybindings.jsonが開くのでそこに次のような登録する。
{ { "key": "ctrl+d", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args": { "langId": "javascript", "name": "console.log" } }, ...}
"langId"にはスニペットを書いた言語を指定し、"name"にスニペットのキーを書く。
グローバルファイルにスニペットを登録したら"langId"は不要。
これで「ctrl」と「d」を同時押しすれば上記で登録したconsole.logスニペットが書き込まれる。
これで一発で入力できるようになるためコーディングがだいぶ楽になる。
個人的なJavascript、Typescript、React用のユーザースニペットとして次のようなものを登録している。
{ "console.log": { "prefix": "cl", "body": [ "", "console.log(${1});", "${2}" ] }, "for": { "prefix": "for", "body": [ "" "for (let i = 0; i < ${1}.length; i++) {", "\t${2}", "}", "" ] }, "if": { "prefix": "if", "body": [ "", "if (${1}) {", "\t${2}", "}", "" ] }, "object": { "prefix": "object", "body": [ "", "const ${1} = {", "\t${2}", "};", "" ] }, "function": { "prefix": "function", "body": [ "", "function ${1}(${2}) {", "\t${3}", "};", "" ] }, "arrow function": { "prefix": "arrow", "body": [ "", "const ${1} = (${2}) => {", "\t${3}", "};", "" ] }, "nullfilter": { "prefix": "nullfilter", "body": [ "", "if (${1} ===undefined || ${1} === null ) return null;", "" ] }, // Reactコンポーネント用 "react component": { "prefix": "component", "body": [ "import { PropsWithChildren } from 'react'", "", "export function ${1} (props: PropsWithChildren) {", "\treturn (", "\t\t${2}", "\t);", "};" ] }, "useState": { "prefix": "useState", "body": [ "", "const [${1}, set${1}] = useState(${2});", "" ] }, "tag": { "prefix": "tag", "body": [ "<${1}>${2}</${1}>" ] }, // styled components用 "styled": { "prefix": "styled", "body": [ "", "const ${1} = styled.div({", "\t", "});" ] }, // Recoil用 "useRecoilCallback": { "prefix": "userecoilcallback", "body": [ "", "const onClick = useRecoilCallback(({ snapshot, set }) => async () => {", "\tconst state = await snapshot.getPromise(atom);", "\t${1}", "\tset(state, atom);", "});", "" ] }, "TODO": { "prefix": "todo", "body": [ "", "// TODO ${1}" ] },}