スニペットで超効率的にコードを書く方法【VSCode】

タイピングが面倒ならスニペット

スニペットとは、自分でカスタマイズ できるショートカットのようなもの。

例えば、cと打ったら console.log(); が表示される、ということができる。

ファイルの種類ごとに管理できるので、上の例だと c と打ったときにPythonだと cv2 と表示させたいということもできる。

普段使っているスニペットを紹介

僕がVSCodeで使っているスニペットを紹介します。

ちなみにスニペットのjsonファイルを呼び出すには、以下のようにすればよい。

• command + ^control + p でEnter
• 呼び出したい言語 (pythonなど) を選択するか入力する

JavaScript

"Print to console": {
	"prefix": "c",
	"body": [
		"console.log($1);",
	],
	"description": "Log output to console"
}

JavaScriptの基本言語サポートにlogって打ったら候補としてconsole.logが出てくるのですが、logと３文字打って、候補を選ぶために下矢印押して、Enterって5回作業あります。
しかも、下矢印は難易度高くてすぐ打てない。

だから、上の方法で c 打ってEnterで2回の作業で出るようにしています。

HTML

	"<link rel=\"stylesheet\" href=\"css/reset.css\">": {
		"prefix": "css",
		"body": [
			"<link rel=\"stylesheet\" href=\"css/reset.css\">",
    		"<link rel=\"stylesheet\" href=\"css/style.css\">"
		],
		"description": "link css"
	}

これは、HTMLの< head >タグの中に毎回CSSを組み込むリンクを書くのが面倒だと思ったので作りました。

全体のフォーマットはデフォルトのEmmet (スニペットみたいな楽できるやつ) で ! を打ってEnterで表示できます。

HTMLでテンプレが決まっている人は全体をスニペットにして一発でテンプレが出せるようにするのもいいかもしれません。

Python

業務ではありませんが、競プロの時短のために、入力でint型の input() と map() がすぐ出るようにしています。

	"n = int(input())": {
		"prefix": "n=i",
		"body": [
			"n = int(input())",
			"$2"
		],
		"description": "n=int"
	}

	"map(int, input().split())": {
		"prefix": "map(",
		"body": [
			"map(int, input().split())",
			"$2"
		],
		"description": "map int"
	}

スニペット生成に便利なサイト

スニペットを作るときは大体これを使ってる。このサイトはとても便利です。

最後に

誰かの役に立ったら嬉しいです。
もっと便利になる方法あったらぜひ教えてください。