Visual Studio CodeでUser Snippetsを使う

那須毅康(Takayasu Nasu - Tack)
2023-04-17

今後、新しいPCでVisual Studio Codeを使う際に、すぐにSnippetsを登録できるよう、自分に対するメモとしてUser Snippetsについて短い記事を書いてみました。使い方、登録方法、そして私が実際に登録しているSnippetsを残しておきます。

What is User Snippets?

コードを予めスニペットに登録することで、短いキーワードでコードを素早く呼び出す機能のことです。この機能を利用することで、コードの一部を覚えておくだけで、一瞬で同じようなパターンのコードを生成することができます。

How can we add our Snippets?

Visual Studio Codeのメニューから

と進み、登録したいSnippetsのプログラミング言語を選択すれば、jsonファイルが開き、そこから登録できます。

My Snippets

css.json

{
	"Media-query": {
        "prefix": "mmm",
        "body": [
            "\\${media.greaterThan('medium')`",
            "  width: min(85%, 1620px);",
            "`}",
        ],
        "description": "set media query"
    },

	"Call theme propaty": {
        "prefix": "ttt",
        "body": [
            "\\${({ theme }) => theme$1}",
        ],
        "description": ""
    },

}

typescript.json

{
	"import styled component": {
        "prefix": "iiis",
        "body": [
            "import styled from 'styled-components'",
            "import media from '@/styles/custom-styled-media-query'",
        ],
        "description": ""
    },

}

typescriptreact.json

{
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log($1)",
		],
		"description": "Log output to console"
	},
	"Import": {
		"prefix": "ii",
		"body": [
			"import $1",
		],
		"description": "Import sentense."
	},
	"Make React Component": {
        "prefix": "rrr",
        "body": [
            "import React from 'react'",
            "import type { FC } from 'react'",
            "",
            "const XXX: FC = (): JSX.Element => {",
            "  return (",
            "    <section>",
            "      <span></span>",
            "    </section>",
            "  )",
            "}",
            "",
            "export default XXX",
            "",
        ],
        "description": ""
    },

}

まとめ

なるべく覚えやすいキーワードで登録することで、より簡単にSnippetsを呼び出せます。
よかったらみなさまの今後のコーディングライフにお役に立てれば光栄です。

Other Insights