VSCode の設定のすゝめ

はじめに

みなさんこんにちは、GENEROSITY の西村です。
ご存知の通り、VSCode（Visual Studio Code）は、Microsoft が開発したフリーでオープンソースのコードエディタです。
非常に出来ることが多く、設定は自分好みにカスタマイズ可能で拡張機能も豊富です。
しかし、その力を最大限に引き出すためには、適切な設定が必要です。
設定を見直し、DX(Developer Experience)を向上しましょう！

おことわり

今回は、Mac の環境での設定について記載をします。
ショートカットキーは⌘(Cmd), ⌥(Option), ⇧(Shift), ^(Ctrl)を使用します。
適宜 Windows ユーザーの方は置換していただければと思います。
最後に本記事の私の考えや発言は個人の見解として捉えていただければと思います。

キーボードの設定

まずは、VSCode の設定にはいる前に、キーボードの設定から見てみましょう。

US 配列キーボードの使用

普段コーディングを仕事にしている方は US 配列を使うことをオススメします。これは、特殊文字へのアクセスがしやすく、プログラミングによく使用されるキーが集まっているためです。
例えば、日本語配列だとシングルクォートはShift+7を押さなければいけないとか。。
慣れは必要ですが開発効率を上げるために、US キーボードを買いましょう。
最近私は業務で Keychron のキーボードを使用しています。Apple 純正の Magic Keyboard もいいと思います。
詳しくメリットを記載している記事はこちら: エンジニアに英字配列(US 配列)を勧める理由

全角スペースを半角にする

全角スペースは日本語を入力するときに、たまに使う程度で開発ではほとんど使いません。
私は普段Google 日本語入力を使用しています。
日本語入力になったまま、気づきにくいのが全角スペースです。
Google 日本語入力ではスペースを常に半角とする設定が出来ますので、ぜひ設定のおすすめをします。
Google 日本語入力の設定を開き、スペースを入力するの項目を半角にすると、全角スペースが入力出来ないようになります 💪
ちなみにこの設定をしていても⇧Spaceで全角スペースを入力することが出来ます。

キーボードナビゲーションの有効化

VSCode で、エディター内を移動するためのキーボードナビゲーションを有効にすることができます。
保存せずに閉じる際や、VSCode 自体がソースを変更する際に表示されるポップアップの操作をキーボードで出来るようになります。
Tab で移動して、Return キーで確定です。困ったら Esc しましょう。

Mac→ システム設定 → キーボード → キーボードナビゲーションから変更が出来ます。

Caps Lock を Ctrl に変更

Caps Lock は Shift を押しながら入力すれば何も問題ないですし、普段大文字を連続で入力し続けることは少ないです。
かなり押しやすい位置にあるのにも関わらず、その使用頻度はかなり低いので、Caps Lock は Ctrl キーに割り当てちゃいましょう。
Ctrl + C などは Mac だと少し押しにくい人もいると思いますので、Caps Lock を Ctrl に割り当てることで、ショートカットキーが押しにくいストレスから開放されます。

🌐 キーを押さずにファンクションキーが使用出来るようにする

VSCode は色々と便利なファンクションキーがありますので、使わない手はないです。
ただ、デフォルトの設定だと、🌐キーとファンクションキーを同時に押さなければ行けないので、非常にしんどいです。
手が小さい人は地獄です。

ファンクションキーを標準のファンクションキーとして利用出来るよう設定します。
Mac→ システム設定 → キーボード → ファンクションキーからF1、F2などのキーを標準のファンクションキーとして使用 をオンにしましょう。

入力言語の切り替え

これは好みによりますが、Mac のデフォルトは Ctrl + Space なので、そのまま Ctrl + Space を使用します。

キーボードショートカットキー

デフォルトのショートカットキーですが、色々な方がショートカットキーの記事を掲載しておりますので、
私自身がよく使うショートカットのみ・Chrome などでも共通しているようなショートカットは割愛させていただきます。

キー: ⌘(Cmd), ⌥(Option), ⇧(Shift), ^(Ctrl)

基本的な操作系

⌘P: ファイル検索に使用します。(特定のファイルを開くときに使います。)
⌘⇧P: コマンドパレットを表示します。(拡張機能のコマンドを使用する際に使います。)
⌘J: エディタの下部パネルを開閉します。(ターミナルの開閉に使います。)
⌘O: ファイルを開くためのダイアログボックスを開きます。(フォルダを選択するとワークスペースごと更新されるので注意)
⌘⇧N: 新しいウィンドウを開きます。
⌘⌥← / ⌘⌥→: アクティブなファイルの移動
⌘U: 最後に操作したカーソル操作を元に戻します。(誤って ⌘↓ を押してしまったときや間違ってクリックしてしまったときに使えます。)
⌘B: サイドバーの表示切り替え
⌘⇧E: エクスプローラーの表示
⌘⇧F: 検索

編集・選択系

⌘D: 選択した項目を次の一致項目に追加する(選択したワードを複数選択したいときに使います。)
⌘⇧L: 一致する全ての出現箇所を選択します(⌘Dの全選択バージョンです。)
⌥↑ / ⌥↓: 行を上/下へ移動します。(範囲選択すれば複数行の移動も可能です。)
⌘K ⌘0(zero) / ⌘K ⌘J: 全てを折りたたみ/展開
⌘/: コメントアウト

便利な拡張機能

VSCode の強みの一つは、数多くの便利な拡張機能が存在することです。
開発効率を上げるために適宜インストールしていきましょう。

Intellisense

Intellisense とは、メンバーの一覧、パラメーターヒント、クイックヒント、入力候補など多数の機能を含むコード補完機能です。
公式ドキュメント
まず、開発言語の Intellisense の導入しましょう。

見た目を整える

テーマ

VScode は表示されている項目や見た目に関して細かくカラーコードを指定して色を変えられます。
とはいえ、一つ一つ設定するのは大変なので、テーマを使用しましょう。
テーマは一括でカラーコードの設定をしている拡張機能だと思ってください。
⌘⇧P→Color Themeと入力すると変更適用出来ます。

拡張機能を開いて(⌘⇧X)、検索フォームにThemeと入力すると有志の方々が作成したテーマ一覧が出てきます。
どのテーマが良いかは好みによるので、私が使用しているテーマと一般的に人気のテーマをいくつか記載します。

Theme: その名の通り、Theme という名のテーマです。シンプルで見やすいです。
Dracula Official: 根強い人気があるテーマです。配色がキレイで見やすいです。
One Dark Pro: Atom の配色テーマを VSCode 用にしており、見やすいです。
Andromeda: 私が愛用しているテーマです。 Dracula よりも少し色味が抑えられていて見やすいです。Andromeda Colorizer を使用しています。

また、少々特殊ですが、
Peacockという拡張機能はワークスペースごとにサイドバーやステータスバーの配色を変更できます。
普段から色々なワークスペースを横断する方におすすめです。
SSH 先の環境の色を変えたりすると間違えにくくなっていいですね。

アイコン

エクスプローラーを開いた際に、ファイルやフォルダの先頭にアイコンを設定できます。
⌘⇧P→File Icon Themeと入力すると変更適用出来ます。

拡張機能を開いて(⌘⇧X)、検索フォームにIconと入力すると有志の方々が作成したアイコンテーマ一覧が出てきます。

こちらもどのアイコンテーマを使用するかは好みによりますが、メジャーどころはそこまで多くはないので、2 つだけ紹介します。

Material Icon Theme: Material Design をベースとしたアイコンテーマです。
vscode-icons: 私が使用しているアイコンテーマです。開発元がスポンサーなので安心して利用出来ます。

他にもたくさんあるので、インストールしてみて自分の好みのアイコンテーマを見つけてみてください。

コードの見た目

ソースコードの見た目は可読性を上げるために重要だと思います。
いくつかの拡張機能を紹介します。

かつては、Bracket Pair Colorizer 2 というブラケットの色をネスト単位で変更してくれる拡張機能がありましたが、VSCode の標準機能として取り込まれました。

indent-rainbow: インデントの色が設定しているスペースやタブの数ごとに変わります。インデントのズレを早期で見つけることが出来ます。
zenkaku: 全角スペースをハイライトしてくれます。前述していた、全角スペースを入力出来ないようにする設定をしていればほとんど不要です。(チーム開発の際に役に立つかもしれません。)
Trailing Spaces: 行末にある不要なスペースにハイライトをしてくれます。Formatter が適切に設定されていれば、気にすることはないです。
Color Highlight: カラーコードの記述部分に実際の色を付けてくれます。なくてもいいです。

GitHub Copilot

個人的にここ最近で一番熱いツールはGithub Copilotです。
AI によるペアプログラマーと謳っている通り、様々な補完をしてくれます。
Intellisense 以上のコード補完の機能はもちろんですが、コメントで書きたいコードの説明を記載すると、そのコードをサジェストしてくれます。
痒いところに手が届かないですが、例えばある JSON 形式のデータの型定義ファイルを作成したい場合に、コメントで型定義を作成などと書くと、型定義をサジェストを承諾するだけで作れてしまいます。
一度使うともう戻れないぐらい便利なのでオススメします。(OSS コミッターは無料らしいです。 $10/月です。)

その他の便利拡張機能

こちらは Qiita 記事に色々とあるので、少しだけ紹介します。

Diff: 現在開いているファイルと他のファイルの差分を確認できます。⌘⇧P→Diffと入力してファイルを選択します。
Auto Import: 自動的にファイルをインポートしてくれます。
Auto Rename Tag: HTML のタグを変更すると閉じタグも一緒に変更できます。
Markdown All in One: マークダウンのプレビューを表示したり、目次を自動生成できます。
Browse Lite: ブラウザを VSCode 内で表示できます。
Svg Preview: マークダウンで書かれた SVG のプレビューを表示出来ます。
Live Share: 他の開発者にワークスペースを共有して、一緒に開発が出来ます。(詳しくはこちらからVisual Studio Live Share とは)
Git Lens: ファイル内の変更履歴や証跡を追うのに使えます。
Remote SSH: SSH した環境をターミナル上ではなく、VSCode 上で使用することが出来ます。非常に強力で便利です。オススメです。(詳しくはこちらからRemote Development using SSH)

フォルダの操作

デフォルトで⌘Nを入力すると Untitled のファイルが新規作成されますが、設定次第で⌘Nをフォルダを指定して作成出来ます。
⌘⇧P→ キーボードショートカットの設定を開き、入力欄にファイル:新しいファイル...と入力し、キーバインドを⌘Nにします。そうすると、現在いるフォルダ内に新規ファイルを作成することが出来ます。
また、フォルダを新規作成したい場合はファイル:新しいフォルダー...と入力し、キーバインドをお好みで設定してください(私は⌘^Nに割り当てています。)

ターミナルの操作

VSCode は統合ターミナルを提供しています。これにより、エディタ内でシェルコマンドを直接実行することができます。
便利な操作として、

⌘|: ターミナルの分割
⌘K: ターミナルの内容をクリア
^⌘J: ターミナルのパネルを最大化(切り替え)→ これはショートカットを設定してください(表示:最大化されるパネルの切り替えで検索)
などがあります。

あと、Figのようなコマンドラインの入力補助ツールを導入すると入力が楽になると思います。

さいごに

簡単にVSCodeの設定とショートカットキーの紹介をいたしました。
自分でショートカットキーの一覧を見てみたり、拡張機能を探してみたり、なかったら作ってみたりするといいかもしれないですね

【DX向上】VSCodeの設定のススメ【Mac】