こんにちは。カイリーーです。
今回はみんな大好きVScodeの活用法をお伝えします。
VScodeは機能が多種多様で、なかなか使いこなすにも難しい、この機能は知らなかったなどが多くあります。
そこでVScodeを使う上で使えると便利な機能についてまとめました。
この記事を読むことで得られる効果
- これは知らなかった、使ったことなかった、な目から鱗の情報を得られます。
- VScodeの操作が爆速化します。
本記事の対象読者
- VScodeをこれから導入しようと思っている方、もしくは最近導入し始めた方
- VScodeを使ってWebコーディング、プログラミングを勉強している方
- VScodeを使っているんだけどトラックパッド(マウス)を使用しないでキーボードだけでできたら良いのにと思っている方
公開以降ありがたいお声もいただきました!!
参考にしてくださっている方、本当にありがとうございます!!
ご無沙汰してます。
— hiromi@今日のはっぴー🐾 (@HiromiE19) May 7, 2021
凄いです〜早速ブクマさせて頂きました🙌
ほかの記事も参考にさせていただきま✨
これは、便利そうですね。あとで、ゆっくりみよう!
— SecondLife! (@VBA31125434) May 7, 2021
凄い✨ブックマークしました!
— オカヘイ@コーディング (@okaheiyou39) May 6, 2021
winのコマンドものせて頂いてて嬉しいです😊
Table of Contents
VScodeのショートカット一覧
よく使うVScodeのショートカットについてNotionにまとめました。

画面右Serachからもしたいことの検索で引っ掛けることも可能です。
こちらを作成した理由は、VScodeのショートカット一覧って記事は腐るほどあって、まとめられているのは非常にありがたいのですが、まとめられた中から探すのも時間がかかるので、いっそのことNotionでまとめて、必要なものをすぐに検索して探し出せるようにできたらもっといいな、と思いこのNotionを作成しました。
これであの操作どうやってやるんだっけ?をNotionから検索してヒットさせることが可能です。
Notionの使い方について
\Notionの使い方を知りたい!という方はこちら/
そろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリ
Amazonで近藤 容司郎, 藤川 千種, 佐々木 歩惟, 松橋 龍貴のそろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリ。アマゾンならポイント還元本が多数。近藤 容司郎, 藤川 千種, 佐々木 歩惟, 松橋 龍貴作品ほか、お急ぎ便対象商品は当日お届けも可能。またそろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリもアマゾン配送商品なら通常配送無料。
Notion日本語版がリリースされてからすぐ、こちらの書籍が発売されました。
Notionの細かい使い方であったり、活用事例なんかも掲載されていますので、これからNotionを使ってみようという方や企業さんにはぜひおすすめの書籍となっております。
以下のサイトでは株式会社ノースサンドさんがすべて日本語でNotionについての
- 料金プラン
- 事例
- Notionの入門書
上記をわかりやすく解説されています。
特にNotion入門書についても日本語で解説されていて、基本的なNotionの使い方から具体的な活用方法まで、解説されています。
チュートリアル的にも進めて構築していけるかと思いますので、ぜひご活用いただくと良いかと思います。
僕はこちらのコンテンツを参考にしながら、データベース構築を行い、情報管理をするようにしています。
会社では日程管理について主に構築中で、個人では、本記事でもお伝えしている
VScodeのショートカットなどをまとめたり、
その他にも気になるYoutbube動画のお気に入りとして登録、
エンジニアとしての学習のメモとしても活用させていただいてます。
使い方については多種多様なので、個人の使い方次第で、いかようにもこのNotionは活用できるかと思います。
Notionちょっと気になる、という方は、
こちら
そろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリ
Amazonで近藤 容司郎, 藤川 千種, 佐々木 歩惟, 松橋 龍貴のそろそろ 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は機能が多すぎるため、今回の記事で示したものはほんの一部となりますが、今後も必要な情報については随時更新していきたいと思います。
\無料コンテンツを配布しております/
毎日エンジニアとして勉強をしているのに
- コードが読めるようにならない
- コードを書くなんてもってのほか
- 環境構築ができない(そもそも何をやっているのかわからない)
- >毎日できない自分に嫌気が差す
そんな毎日に悩みを抱えている方
もしかしたら間違った勉強方法をしているかもしれません。
エンジニアとして生きていくための正しい勉強とは
一体何でしょうか?
以下からご確認ください