🧰

VSCode素人を卒業しよう

2021/12/20に公開

VS Code

初心者

tech

概要

多機能で軽量、見た目もかっこ良くて最高なVSCodeですが、結構デフォルト設定のまま使っている方多いですよね？

そんな人の刺激になればと、ぼくが普段から利用しているVSCodeカスタマイズやキーボードショートカットの中からオススメを紹介します。対象読者は以下のような方々で、特に初心者向けの記事です。

プログラミング初心者の方
VSCodeをデフォルト設定のまま使っている方
他人のカスタマイズを覗くのが大好きな方

見た目のカスタム

カラーテーマ

デフォルトのテーマも十分かっこいいですが、もっとタイプの色合いを見つけませんか？

カラーテーマは簡単に変更できます。⌘ + K & ⌘ + T（⌘Kに続けて⌘Tを押す）と入力し、表示される選択肢を選んでみてください。最初からいくつかのテーマが用意されており、拡張機能で選択肢を増やすことができます。画像は後述するRainglowという拡張テーマを入れた後の選択肢です。

テーマを選ぶ際の観点ですが、初心者の方は直感的に好きな色の組み合わせで選んでもらえばOKです。慣れてきたら、予約語や型情報の色・フォントなどに着目して、よく使う言語・書き方に合ったテーマを選んでみることをおすすめします。

自分はよくReact+TypeScriptの開発をするのですが、「ベースの文字が白で全体的に色・フォントが少なめ」「コンポーネント呼び出しの際の色が一色（Componentとpropsの色が違うテーマがあるのでそれを避けている）」「型情報が周りと比べて薄い色」などの観点でRainglowのAllureを選択しています。

アイコン

エクスプローラー（サイドバーに表示されるファイルツリー）に表示されるファイルやディレクトリなどのアイコンも、実は変更できるんです。

ぼくのお気に入りはMaterial Icon Themeです。拡張機能から簡単に利用でき、デフォルトより俄然読みやすくなるので、こだわりが無ければとりあえず入れておきましょう。

文字の大きさ

デフォルトだと小さすぎるので大きくします。ここは好みの問題ですが、画面共有するときには文字が大きいほうが好ましいのでデフォルトより2段階大きくすることを推奨しています^[1]。

⌘ + Shift + Pを押して”zoom”と入力し、View: Zoom Inコマンドを叩きましょう。戻したいときはView: Zoom Outです。

ブラケットに色を付ける

ペアとなる括弧と閉じ括弧に同色の色をつけ、閉じ括弧までのガイドを表示させることでコードを読みやすくします。

以前は拡張機能で行っていたのですが、パフォーマンスの問題などから修正が加えられ、VSCodeの設定に追加されました^[2]。Editor › Bracket Pair Colorization: EnabledとEditor › Guides: Bracket Pairsの設定を画像のようにしてください。

タブの非表示

デフォルトでは上部に複数のタブが並んで表示されるのですが、タブをクリックしてファイルを移動するより後述する⌘ + Pでファイルを移動するほうが簡単なので、現在表示していないタブについては非表示にして見た目をスッキリさせます。

Before

After

アクティビティバーの非表示

一番左の細いバー、一度も使ったこと無いので非表示でいいです。
⌘ + Shift + Pを押して"activity"と入力し、View: Toggle Activity Bar Visiblityコマンドを叩きましょう。同じコマンドでいつでも戻せます。

Before

After

ターミナルのプロンプトをすっきりさせる

これはVSCodeを直接いじるわけではないので発展編です。余裕のある人だけやってもらえばOKだと思います。

ターミナルのプロンプトはデフォルトだと文字が詰まっていて見づらいので、OSSを利用してサクッと見た目を整えます。自分はpureというツールを使っています。インストール方法はGitHubを参照してください。
https://github.com/sindresorhus/pure

出力とプロンプトの間が1行空きになっていたり、余計な情報が表示されていなかったりと見やすい

ターミナルのカスタマイズについてはこちらの記事が詳しいです。

操作のカスタム

快適な操作のためにショートカットのキーバインディングを若干いじります。今回の説明はUSキーボードで自分のやりやすいように設定してあるので、各自やりやすいようキーに割り当ててもらって大丈夫です。

キーバインディング変更のために、⌘ + K & ⌘ + S（⌘Kに続けて⌘Sを押す）でキーボードショートカットの設定ページを開きます。

エディタの分割

エディタのペインを分割したいときがよくあります。自分は基本的に2つのエディタペインを並べて作業しています。

View: Split Editorという項目がこの操作にあたります。デフォルトでは難しめの割り当てになっているので、自分は⌘ + \に割り当て直しています。

隣のエディタにフォーカスを移動

エディタのペインが複数あると、そのペインの間を移動するという操作がよく発生します。これをキーボードから手を離さずに行いたいです。

キーボード操作だけでペインの間を移動しています
View: Focus Next Editor Groupという項目がこの操作にあたります。デフォルトでは割り当てがあないので、自分は⌘ + Hに割り当てています。

デフォルトのキーボードショートカットでよく使うもの

お手元で実際の動作を確認しつつ読み進めていただければと思います。

ファイル間移動

⌘ + P：指定先のファイルに移動
⌘ + S：現在のファイルを保存
⌘ + W：現在のファイルを閉じる

慣れないうちはエクスプローラーからファイルを開けば良いと思いますが、基本的には⌘ + Pでファイルを移動します。ファイル名を入力すればすぐに飛べます。

この状態で⌘を押しつつPを連打すると選択肢の下の方へとフォーカスが進みます

「直前に開いてたファイルをもう一度開きたい」ときに⌘ + Wを使うこともあります。ファイルは移動する前に保存が基本ですので、オートセーブの設定をしていない限りは⌘ + Sを毎秒やるくらいの勢いでやりましょう。個人的には予期せぬ変更が勝手に保存されない手動セーブの方がおすすめです。

ペインのトグル

⌘ + B：サイドバーの表示をトグル
⌘ + J：ターミナルペインの表示をトグル

コーディング画面はなるべく広く取りたいので、サイドバーとターミナルペインは基本的に非表示にしておきます。とはいえどちらも結構な頻度で利用するので、素早く出し入れできるようにしておきましょう。

コーディング系

⌘ + Shift + K：一行消し
⌘ + D：同一文字列の複数選択
option + Shift + ↑ or ↓：選択したコードを矢印の方向に複製
⌘ + option + Shift + ↑ or ↓：カーソルを矢印の方向に複製

ここらへんは威力が高いので抑えておきたいところです。他にも色々あるのでYouTubeなどでざっと確認するのが良いと思います。「シンボル選択中にF2でシンボル名一括変更」など、「え、こんなこともできんの！？」ってやつがいっぱいあります。

困ったときに押すやつ

⌘ + Shift + P：コマンドの検索
⌘ + Z：やりなおし

VSCodeの操作でなにか困ったことがあれば⌘ + Shift + Pを、コーディングで予期せぬ変更をしてしまったなと思ったら⌘ + Zを押す。これさえ覚えとけばとりあえずなんとかなります。

便利な拡張機能、設定

VSCodeには豊富な拡張機能があり、OSSでの開発も盛んです。「以前は拡張機能だったがVSCodeの設定の方に昇格した」という機能を含め、便利なものを3つだけ紹介します。

なお、拡張機能のインストールは⌘ + Shift + Xから行います。

Prettier

ファイル保存時に自動でコードを整形してくれます。エラーに気づきやすくなるので、HTML/CSS・JavaScriptあたりを触る人は必ず入れましょう。

拡張機能を入れただけでは動作せず、設定ファイルをちょっといじる必要があります。画像のように設定のJSONファイル（setting.json）を開き、下のコードを加えてください。重複があれば警告してくれるので、片方消せばOKです。

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

Auto Rename Tag

タグの名前を変えたとき、閉じタグも勝手に修正してくれるやつです。

以前は拡張機能でしたが、本体設定の方にも追加されました。拡張機能から追加するか、設定でEditor: Linked Editingをtrueにしてください。

Path Intellisense

ファイルの名前を入力するときに補完してくれる機能です。最初のうちはミスの8割がタイポなので、それを防ぐためにも補完を積極的に利用しましょう。

その他

起動時の読み込みファイルを制限してメモリの余裕を保つこともできます。やりかたはこちらの記事を参照してください。

高頻度でファイルを自動で保存しているせいでVSCodeが重くなるなんてこともあるそうです。

さいごに

初心者向けの設定ばかりで玄人の皆さんにはつまらない内容だったかもしれません。みなさんの自慢のカスタマイズ待ってます！

脚注

というか、画面共有されたときに非常に見づらいのでSlackでもなんでも文字は絶対でっかくしてください ↩︎
参考：https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization ↩︎