半年間使って便利だったVSCodeの機能紹介

はじめに

こんにちは、今年の6月にエニグモに入社したサーバーサイドエンジニアの橋本です。この記事は Enigmo Advent Calendar 2020 の6日目の記事です。

みなさんはテキストエディタは何を使っていますか？会社を見渡すとVimが一番多いような気がしますが、私はVSCodeを使ってます。正直、エニグモに入社するまではツールを入れる程度でそこまでカスタマイズしていなかったのですが、入社してからは諸先輩方の開発スピードに圧倒され、これはツールやショートカットキーを駆使して速く開発できるようにならなければ、、、という必要性に駆られ、少しずつカスタマイズを加えてきました。この記事では初期設定でも使える便利機能やカスタマイズを加えてよかったショートカットキーやツールをピックアップして紹介していきたいと思います。

ショートカットキー

まずは使ってよかったショートカットキーについて紹介します。VSCodeではデフォルトでショートカットキーが予め設定されていますが、下記の手順でショートカットキーを追加できたり、コマンドを変更できたりします。
①下記画像のようにcmd + p でコマンドパレットを開き、>keyboardで検索し、Keyboard Shortcutsを開きます。 f:id:enigmo7:20201202100517p:plain ②下記画像のようにショートカットキー一覧が表示されます。画面上部のバーでショートカットキーが検索でき、編集したい項目をクリックすればショートカットキーを変更することができます。またwhenカラムではショートカットキーを実行するタイミングを設定することもできます。 f:id:enigmo7:20201202100753p:plain

デフォルトの設定でよく使うショートカットキー

それではデフォルトの設定でよく使ったショートカットキーを紹介していきます。（※ショートカットキーはmacOSのキー配置に基づいて書いてます）

操作	コマンド
フォルダを開く	⌘+O
ファイル検索	⌘+⇧+F
ファイルに移動	⌘+P
ファイルを閉じる	⌘+W
一行選択	⌘ + L
単語ごとに移動	⌥+`矢印キー`
単語ごとに選択	⇧+⌥+`矢印キー`
画面移動	⇧+⌘＋ `矢印キー`
windowを右へ移動(windowが無い場合は分割)	⌃+⌘＋→
windowを左へ移動(windowが無い場合は分割)	⌃+⌘＋←
指定の行数まで移動	^+G+ `行数`
一番上まで移動	⌘+↑
一番下まで移動	⌘+↓
一番右に移動	⌘+→
一番左に移動	⌘+←
window1にフォーカス	⌘+1
window2にフォーカス	⌘+2
windowの切り替え	^+W

カスタマイズしたショートカットキー

次によく使うのに配置が使いにくかったり、元々割り当てられていなかったりしてカスタマイズを加えたショートカットキーの紹介です。デフォルトの設定で既に入力しやすいショートカットキーはほとんど割り当てられているので探すのが大変ですが、自分で使いやすいようにカスタマイズを加えると一気に使いやすくなりました。

操作	コマンド
ターミナルへフォーカス	^+E
ターミナルの分割	^+V
エディタへフォーカス	^+E
相対パスのコピー	⌘+⇧+C
絶対パスのコピー	⌘+⇧+A
windowを拡張	^+⌘+`矢印キー`

相対パス/絶対パスのコピーはデフォルトの設定だと使いにくいので是非変えてみてください。私はターミナルにフォーカスしても使えるようにwhenカラムは空で設定しています。

導入してよかったツール

導入してよかったツールについて紹介します。

Ruby

Rubyを始めた人ならみんな入れると思いますが、一応。 Rubyのコードをハイライトしてくれます。

Ruby Solargraph

こちらもRubyを始めた人なら知っているとおもいますが、メソッドを予測して補完してくれます。 gemのinstallが必要です。

$ gem install solargraph

Endwise

このツールはendを自動補完してくれるツールでendの書き漏れを防いでくれると同時にコードを書くスピードを上げてくれます。

GitLens

GitLensはVSCodeでGitをより扱いやすくするツールです。色々な機能があるのですが、このツールで一番便利なのは過去のコミットが追いやすくなることだと感じました。例えばGitで管理しているファイルで特定の行にフォーカスすることでその行の過去のコミットが表示されます。 f:id:enigmo7:20201202100841p:plain

またVSCodeの左側のBarのGitのマークをクリックすることで現在開いているファイルの過去のコミットを表示させることもできます。 f:id:enigmo7:20201202100854p:plain

上記のことはgit blameでも確認することはできますが個人的にはこっちの方が使いやすかなと思いました。

REST Client

PostmanのようにAPIにリクエストできるツールです。使い方は簡単で拡張子がrestとなるようなファイルを作ります。そして今回は例としてhttp://localhost:7700/user_authentication/にjsonをpostするリクエストを書いていきます。

POST http://localhost:7700/user_authentication/
Content-Type: application/json

{
  "user": "user_hoge",
  "pass": "test_hoge"
}

ツールを導入している場合、下記画像のように2~3行目の間にSend Requestボタンが表示されます。 f:id:enigmo7:20201202100953p:plain

このボタンを押すことでリクエストすることができ、下記画像のようにリクエスト結果が表示されます。 f:id:enigmo7:20201202101018p:plain

導入してみて面白かったツール

VSCodeでこんなこともできるんだーと面白かったので紹介です。

Browser Preview

このツールを導入するには事前にChromeを入れる必要がありますが、なんとVSCode上でブラウザを開くことができます。 f:id:enigmo7:20201202101035p:plain

ブラウザと行き来しなくてよくなるのでフロントの開発がしやすくなるかもしれませんが、Chromeにあるような開発者ツールが無いのが残念。。。

その他やってよかったこと

フォルダを統合してワークスペースを作る

通常、VSCodeでは1windowにつき１つのフォルダしか開くことができませんが、ワークスペースを作成することで複数のフォルダを1windowで開くことができます。今回は/配下に存在するadventとcalendarの2つのフォルダでワークスペースを作成し、1つのwindowで開けるようにしていきたいと思います。