🧑‍🎓

vscodeを使いこなす(学内コミュニティーの勉強会資料)

2024/06/19に公開

VS Code

始めに

本記事は、学内コミュニティーでの勉強会の資料です。
後数日で資料を作らないといけない！
パワポとか作るの無理！！！
せや、記事テイストなら後で見返してもらうのも便利だろうし割と使ってて勝手がわかるから Zenn でいいか！
ということで作成しました。

お品書き

目次を見てください

そもそも vscode を開くまでの設定

よく使うアプリはタスクバーにピン留めする

皆さんタスクバーにピン留めしてますか？
何も触ってなくて、開いたこともない Teams だのストアだのが鎮座してないですか？
どーせ開きっぱなしだからいいだろうとか思ってませんか？
全然よくないですよ！！！

設定方法

タスクバーにいる使わないアプリを右クリック
ピン留め解除をクリック
タスクバーにピン留めしたいアプリを開く
タスクバーにアプリのアイコンが表示されるので、右クリック
ピン留めする

メリット

ピン留めとあるだけあり、位置が変わらないので手癖でクリックできる
間違って閉じてしまってもタスクバーにいるからすぐに開ける
win + 1 とかで開けるので、手を伸ばさなくても開ける
数字キーとアプリの対応を覚えておけば見なくても開ける

window をきれいに開く

皆さん、ウィンドウの上の方をもって適当にドラッグして配置してませんか？
2 つのウィンドウにまたがったアプリとかがあると後ろのアプリを表示するのだるくないですか？
資料と vscode を並べて表示するとき、並んだアプリの境界を一気に変更したくないですか？
できます！！！

設定方法

ウィンドウを選択
win + arrow でウィンドウの配置を変更
１つ配置すると、もう片方のウィンドウが表示されるので、そちらも arrow キーやクリックで配置
win + arrow で配置を変更及び最大化、最小化

メリット

きれいに配置できて気分がいい
3 で配置配置したウィンドウのグループは境界を変更できる

不要なスタートアップアプリの無効化

しっかり説明できるほど自信ないのでさっさと設定方法に移ります

設定方法

ctrl + shift + esc でタスクマネージャーを開く
スタートアップアプリタブをクリック
アプリを右クリックして不要なアプリを無効化

メリット

起動時の負荷が減る
起動時の時間が短縮される
使用時の負荷が減る
PC のスペックを十分に発揮できる

クリップボードの有効化

コピーした後には張り付ける前に手癖で何かをコピーしてしまうことはありませんか？
何個も一気に、かつ別々にコピーしたいことはないですか？
もう何回もコピー元と先を行き来する必要はありません！！！

設定方法

win + vでクリップボードを開く
有効化するを押す

メリット

間違ってコピーしてしまっても履歴から張り付けられる
何個もコピーしたものを履歴をたどって別々の場所に張り付けられる

キーボードの設定

全角半角をを切り替えるのに全角半角キーを使っていませんか？
今全角な気がして全角半角キーを押したらまた全角になってしまった、間違って 2 回押してしまったみたいで切り替わっていなかった、なんてことはありませんか？
トグル切り替えやめましょう！！！

設定方法

タスクバーの右下にある言語バーを右クリック
プロパティをクリック
詳細設定をクリック
キー設定をユーザー定義に変更
無変換に IME オフ、変換に IME オンを設定(その他ご自由にどうぞ)

メリット

今どっちかいちいち確認しないでとりあえず入力したい方式のキーを押せばいい
間違って何回も押してしまっても問題ない
距離が物理的に近い

そろそろ vscode での設定

フォーマッタを設定する

皆さんコードを書いているときに、インデントがずれていたり、スペースの数が違ったり、改行の位置が違ったりすると気になりませんか？
でもいちいち手で直すのは面倒ですよね？
自動で直してくれる機能があります！！！

設定方法

ctrl + shift + x で拡張機能タブを開く
拡張機能を検索する
今回は
- HTML、CSS などのファイル向けに、Prettier
- python 向けに、ruff
を使用します
ctrl + shift + p でコマンドパレットを開く
Open User Settings (JSON) などと入力して選択

settings.json に以下の設定を追加

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff"
  }
}

保存

メリット

保存するだけで自動で整形してくれるのでいちいち手で直す手間が省ける
保存したかどうかをコードがきれいになったかで判別できてわかりやすい
みんなが同じフォーマットで書くことができるので読みやすい

見た目の設定

フォーマッタを設定したことで、対応するタグの関係性がインデントでわかりやすくなりましたね
しかし、そもそもインデントの高さがどこでそろっているのかわかりにくくないですか？
これではフォーマッタの効果が半減してしまいます！！！
見た目を改良しましょう！！！

設定方法

拡張機能をインストールする場合

ctrl + shift + x で拡張機能タブを開く
indent-rainbow を検索
インストール

settings.json に設定を追加する場合

ctrl + shift + p でコマンドパレットを開く
Open User Settings (JSON) などと入力して選択

settings.json に以下の設定を追加

"workbench.colorCustomizations": {
   "editorIndentGuide.background1": "#ff0000",
   "editorIndentGuide.background2": "#ffff00",
   "editorIndentGuide.background3": "#00ff00",
   "editorIndentGuide.background4": "#00ffff",
   "editorIndentGuide.background5": "#0000ff",
   "editorIndentGuide.background6": "#ff00ff",
   "editorIndentGuide.activeBackground1": "#ff8888",
   "editorIndentGuide.activeBackground2": "#ffff88",
   "editorIndentGuide.activeBackground3": "#88ff88",
   "editorIndentGuide.activeBackground4": "#88ffff",
   "editorIndentGuide.activeBackground5": "#8888ff",
   "editorIndentGuide.activeBackground6": "#ff88ff"
 }

保存

メリット

インデントの高さがわかりやすくなる
インデントの高さがわかることで、どこでそろっているのかがわかりやすくなる
(settings.json に設定を追加する場合)設定を変更することで好みの色に変更できる
(settings.json に設定を追加する場合)フォーカスしているインデントの色が変わるので、自分が今いる場所のスコープがわかりやすくなる

HTML タグ編集の設定

HTML を書いているときに、タグを変更したい時に開始タグと終了タグを別々に変更するのって面倒くさくないですか？
タグを一気に選択して大きなタグで囲いたい時に、一旦囲いたい部分を切り取ったり、開始タグだけ書いて、囲い終えたいところでまた終了タグを書いたりするのって面倒くさくないですか？
もっと楽にタグを編集しましょう！！！

設定方法

ctrl + shift + x で拡張機能タブを開く
Auto Complete Tagを検索
インストールする
ctrl + k ctrl + sでキーボードショートカット設定を開く
emmet を検索
editor.emmet.action.wrapWithAbbreviation にキーボードショートカットを設定

メリット

その他にも emmet には便利な機能がたくさんあるので、使いこなせばコーディングが楽になりますよ

誤字脱字の検出

コードを書いているときに、なぜか動かないことはありませんか？
CSS を書いたのに適用されないことはありませんか？
小一時間悩んだ挙句よく見たらスペルミスだった、なんてことはありませんか？
スペルミスってなかなか自力では気づけないですよね？
自動で検出しましょう

設定方法

ctrl + shift + x で拡張機能タブを開く
Code Spell Checkerを検索
インストールする

メリット

誤字と思われる箇所を青い波線で表示してくれるので、見逃しにくくなる
ctrl + .で修正候補を表示してくれるので、修正が楽になる

ショートカットキー編

上の方から覚える優先度が高そうなやつを並べています

chrome にも似たのあるやつら

chrome にも似たのあるキーボードショートカットと、それに付随するような vscode にしかないやつらを紹介します

	キーバインド	vscode	chrome
◎	ctrl + s	保存 ( + フォーマット)	ファイルを選択して保存
◎	ctrl + z	戻る	戻る
◎	ctrl + y	進む	進む
○	ctrl + shift + z	進む	-
◎	選択 + ctrl + x	切り取り	切り取り
◎	選択 + ctrl + c	コピー	コピー
◎	ctrl + v	貼り付け	貼り付け
○	ctrl + x	1 行切り取り	-
○	ctrl + c	1 行コピー	-
◎	ctrl + a	全選択	全選択
◎	ctrl + w	閉じる	閉じる
○	ctrl + t	割愛	新しいタブを開く
◎	ctrl + shift + t	さっき閉じたタブを開く	さっき閉じたタブを開く
◎	alt + left/right	前に戻る/進む	前のページにに戻る/進む
◎	ctrl + left/right	単語の先頭/末尾へ移動	単語の先頭/末尾へ移動
◎	esc	ポップアップ系を閉じる	ポップアップ系を閉じる
○	ctrl + f	検索	検索
○	ctrl + h	置換	置換
○	ctrl + shift + f	ファイル内検索	-
○	ctrl + shift + h	ファイル内置換	-
△	ctrl + tab/shitf+tab	前後のタブに移動(タブグループ内)	前後のタブに移動
△	ctrl + pageup/pagedown	前後のタブに移動	前後のタブに移動
△	ctrl + shift + pageup/pagedown	タブの位置を移動(タブグループ内)	タブの位置を移動

こっちは chrome でも基本使えるので基本覚えたほうがいいです

vscode にしかないやつら

	キーバインド	説明
◎	f2	(変数名とか)リネーム
◎	(選択 + )ctrl + /	コメントアウト/解除
○	alt + up/down	(選択範囲を)上下に移動
△	alt + shift + up/down	(選択範囲を)上下に複製
△	ctrl + alt + up/down	カーソルを上下に追加
○	選択 + tab/shift+tab	インデントを増減
○	home/end	行頭/行末に移動
△	ctrl + home/end	ファイルの先頭/末尾
○	ctrl + b	サイドバーの表示/非表示
○	ctrl + j	ターミナルの表示/非表示
○	ctrl + d	選択中の単語を選択
○	alt + shift + left	選択範囲を狭める
○	alt + shift + right	選択範囲を広げる
△	ctrl + [/]	インデントを増減
△	ctrl + alt + left/right	タブを移動
△	ctrl + shift + k	行を削除
△	ctrl + enter	下に行を挿入
△	ctrl + shift + enter	上に行を挿入
△	ctrl + +/-	フォントサイズ変更

その他

それっぽい入力すれば候補に出てくるからそれを up/down で選べばいいからしっかり覚えなくていい
shift を押すと選択できる
ctrl を押すと何となく強くなるイメージ
選択した状態で left/right を押すと選択範囲の押した側の端にカーソルが移動する
行数の右の色
- 緑: 追加
- 赤: 削除
- 青: 変更
ファイルの名前の色
- 緑: 新規作成ファイル
- 黄: 変更あり
- 灰: git から除外されている
- 赤: 削除されたファイル
ミニマップ、スクロールバーに表示される色
- 赤: エラー
- 黄: 警告
- 青: 情報(スペルミスなど)
- 灰: カーソル位置

まとめ

vscode 最高！！！

始めに

お品書き

そもそも vscode を開くまでの設定

よく使うアプリはタスクバーにピン留めする

設定方法

メリット

window をきれいに開く

設定方法

メリット

不要なスタートアップアプリの無効化

設定方法

メリット

クリップボードの有効化

設定方法

メリット

キーボードの設定

設定方法

メリット

そろそろ vscode での設定

フォーマッタを設定する

設定方法

メリット

見た目の設定

設定方法

拡張機能をインストールする場合

settings.json に設定を追加する場合

メリット

HTML タグ編集の設定

設定方法

メリット

誤字脱字の検出

設定方法

メリット

ショートカットキー編

chrome にも似たのあるやつら

vscode にしかないやつら

その他

まとめ

Discussion