VScodeのショートカットそれNotionで

こんにちは。カイリーーです。

今回はみんな大好きVScodeの活用法をお伝えします。

VScodeは機能が多種多様で、なかなか使いこなすにも難しい、この機能は知らなかったなどが多くあります。

そこでVScodeを使う上で使えると便利な機能についてまとめました。

この記事を読むことで得られる効果

• これは知らなかった、使ったことなかった、な目から鱗の情報を得られます。
• VScodeの操作が爆速化します。

本記事の対象読者

公開以降ありがたいお声もいただきました！！

参考にしてくださっている方、本当にありがとうございます！！

ご無沙汰してます。
凄いです〜早速ブクマさせて頂きました🙌
ほかの記事も参考にさせていただきま✨

— hiromi@今日のはっぴー🐾 (@HiromiE19) May 7, 2021

これは、便利そうですね。あとで、ゆっくりみよう！

— SecondLife! (@VBA31125434) May 7, 2021

凄い✨ブックマークしました！
winのコマンドものせて頂いてて嬉しいです😊

— オカヘイ＠コーディング (@okaheiyou39) May 6, 2021

VScodeのショートカット一覧

よく使うVScodeのショートカットについてNotionにまとめました。

画面右Serachからもしたいことの検索で引っ掛けることも可能です。

こちらを作成した理由は、VScodeのショートカット一覧って記事は腐るほどあって、まとめられているのは非常にありがたいのですが、まとめられた中から探すのも時間がかかるので、いっそのことNotionでまとめて、必要なものをすぐに検索して探し出せるようにできたらもっといいな、と思いこのNotionを作成しました。

これであの操作どうやってやるんだっけ？をNotionから検索してヒットさせることが可能です。

Notionの使い方について

VScodeの便利機能

自動保存

ファイル→自動保存でいちいち保存しなくても自動で保存がされます。

保存忘れて、ぁ！保存忘れた！がなくなります。

VScodeのemmet

emmetとはHTMLのタグを簡略化して書くことができる機能です。

こちらもNotionに一覧をまとめました。

またチートシートも存在しますので、こちらも併せて添付しておきます。

VScodeの自作のスニペット登録

スニペットって？

WindowsとかMacでも「お疲れさまです」とか「ありがとうございます」とかいちいち打つのが面倒なときに、「お」「あ」で変換して、登録できるようにする、あれです。

あれがVScodeでもできます。

Macの基本的な操作方法をまとめた記事は以下から

VScodeの操作Macの場合

Code→基本設定→ユーザースニペット

HTMLでスニペットを登録したい場合は、検索窓にhtmlと入力します。

jsonファイルが保存されますので、ここに登録したい単語等を登録していきます。

使用するのは”Print to console”以下から

//スニペットの名前
"Print to console": {
    //入力する単語
		"prefix": "log",
    //単語を入力すると展開されるコード
		"body": [
			"console.log('$1');",
			"$2"
		],
    //スニペットの説明
		"description": "Log output to console"
	}

実際に上記に沿って登録した内容が以下の様な感じ

"list":{
	"prefix": ["ul", "list"],
	"body": [
		"<ul>",
		"\t<li>トップ</li>",
		"\t<li>概要</li>",
		"\t<li>内容</li>",
		"\t<li>お問い合わせ</li>",
		"</ul>"
	],
	"description": "liust_tag"
	}

ただ、スニペット登録するにも面倒だな、と思う方は以下@akizo110さんが自作されたスニペット生成ツールを使用することで簡単にスニペット生成してさらに効率化を図れます。

いちいち、あの面倒なスニペットの名前などを入れなくてもスニペットツールで簡単に登録ができます。

詳しくは以下サイトから詳細をご確認ください。

VScodeでNotionが開けるようになりました

拡張機能で「Notion」で検索→VScode Notionが表示されますので、インストールします。

インストールが完了すると左サイドバーにNotionアイコンが追加されます。

Open A Pageを選択後、下図のようにVScode Notionで検索しNotionのAccess Tokenを入力します。

Notionをブラウザで表示し、デベロッパーツールでCookies→token_v2を選択肢、アクセストークンを取得します。

アクセストークンをVScodeのAccess Tokenにペーストし、初期設定は完了です。

VScodeは機能が多すぎるため、今回の記事で示したものはほんの一部となりますが、今後も必要な情報については随時更新していきたいと思います。

＼無料コンテンツを配布しております／

毎日エンジニアとして勉強をしているのに

そんな毎日に悩みを抱えている方

もしかしたら間違った勉強方法をしているかもしれません。

エンジニアとして生きていくための正しい勉強とは
一体何でしょうか？
以下からご確認ください