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

VScode大全

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

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

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

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

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

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

本記事の対象読者

  • VScodeをこれから導入しようと思っている方、もしくは最近導入し始めた方
  • VScodeを使ってWebコーディング、プログラミングを勉強している方
  • VScodeを使っているんだけどトラックパッド(マウス)を使用しないでキーボードだけでできたら良いのにと思っている方

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

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

VScodeのショートカット一覧

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

VScodeショートカット一覧 | Notion

Built with Notion, the all-in-one connected workspace with publishing capabilities.

https://www.notion.so/webanalyst/49975bf48bff440b8f085403a26d0786?v=9deb4287119a46fbb566e1bd170cd512

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

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

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

Notionの使い方について

\Notionの使い方を知りたい!という方はこちら/

そろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリ

Amazonで近藤 容司郎, 藤川 千種, 佐々木 歩惟, 松橋 龍貴のそろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリ。アマゾンならポイント還元本が多数。近藤 容司郎, 藤川 千種, 佐々木 歩惟, 松橋 龍貴作品ほか、お急ぎ便対象商品は当日お届けも可能。またそろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリもアマゾン配送商品なら通常配送無料。

Notion日本語版がリリースされてからすぐ、こちらの書籍が発売されました。

Notionの細かい使い方であったり、活用事例なんかも掲載されていますので、これからNotionを使ってみようという方や企業さんにはぜひおすすめの書籍となっております。

以下のサイトでは株式会社ノースサンドさんがすべて日本語でNotionについての

  • 料金プラン
  • 事例
  • Notionの入門書

上記をわかりやすく解説されています。

特にNotion入門書についても日本語で解説されていて、基本的なNotionの使い方から具体的な活用方法まで、解説されています。

チュートリアル的にも進めて構築していけるかと思いますので、ぜひご活用いただくと良いかと思います。

わかる、Notion徹底入門【使い方・活用方法】 – ノースサンド

Notionの使い方の入門編をまとめた本「わかる、Notion徹底入門」を特別に公開しています。このコンテンツを読めば、Notionがどんなツールなのか分かります。オールインワン情報管理ツールのNotionの基本機能や使い方、活用編まで含めたノウハウを集結させました。

僕はこちらのコンテンツを参考にしながら、データベース構築を行い、情報管理をするようにしています。

会社では日程管理について主に構築中で、個人では、本記事でもお伝えしている

VScodeのショートカットなどをまとめたり、

その他にも気になるYoutbube動画のお気に入りとして登録、

エンジニアとしての学習のメモとしても活用させていただいてます。

使い方については多種多様なので、個人の使い方次第で、いかようにもこのNotionは活用できるかと思います。

Notionちょっと気になる、という方は、

こちら

そろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリ

Amazonで近藤 容司郎, 藤川 千種, 佐々木 歩惟, 松橋 龍貴のそろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリ。アマゾンならポイント還元本が多数。近藤 容司郎, 藤川 千種, 佐々木 歩惟, 松橋 龍貴作品ほか、お急ぎ便対象商品は当日お届けも可能。またそろそろ Notion あらゆるデジタルデータをあつめて、まとめて、管理するオールインワンの神アプリもアマゾン配送商品なら通常配送無料。

もしくは、こちらをご参照ください。

わかる、Notion徹底入門【使い方・活用方法】 – ノースサンド

Notionの使い方の入門編をまとめた本「わかる、Notion徹底入門」を特別に公開しています。このコンテンツを読めば、Notionがどんなツールなのか分かります。オールインワン情報管理ツールのNotionの基本機能や使い方、活用編まで含めたノウハウを集結させました。

VScodeの便利機能

自動保存

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

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

VScodeのemmet

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

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

VScode よく使うであろうEmmet一覧 | Notion

Built with Notion, the all-in-one connected workspace with publishing capabilities.

https://www.notion.so/webanalyst/ef6165af1ee5488f9464af3c54f864f0?v=fa9911fb560e4d7994fa60161440c003

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

Cheat Sheet

No Description

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

スニペットって?

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

あれがVScodeでもできます。

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

Windowsユーザーの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さんが自作されたスニペット生成ツールを使用することで簡単にスニペット生成してさらに効率化を図れます。

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

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

ユーザースニペット生成サイトの使い方|あきぞー

はじめまして。あきぞーと申します。 noteは初投稿になります。 1.はじめに この note は、僕が作成したVSCode用の 「ユーザースニペット生成サイト 使い方 note 」になります。 サイトのURLはこちら。 GitHub Pagesを使っています。 https://akizo110.github.io/user-snippet-generator/ 画面はこんな感じ。 MilligramというCSS FWを使用しています。 デザインセンスがなさすぎて辛いですね(涙) 2.スニペット登録の重要性と面倒な点 VSCodeのユーザースニペットは便利です。

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

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

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

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

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

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

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

\無料コンテンツを配布しております/

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

  • コードが読めるようにならない
  • コードを書くなんてもってのほか
  • 環境構築ができない(そもそも何をやっているのかわからない)
  • >毎日できない自分に嫌気が差す

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

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

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

コンテンツ無料ダウンロードページ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です