女性エンジニアがおすすめする！Visual Studio Codeの推奨設定と拡張機能7選

こんにちは、女性ソフトウェアエンジニアのアリーです。

Visual Studio Codeは、私がこれまで使ってきた AtomやSpyder、Sublime Text、Emacs、そしてIdle（Pythonのビルドインエディタ）のいずれよりも優れたコードエディタです。

本記事では、Visual Studio Codeで私がここ1年半くらい使っているおすすめの設定と拡張機能についてご紹介します。

1. テーマ設定

女性エンジニアの私は、以下のふたつの条件を満たすテーマを好みます。

• 可読性の高いテーマであること
• 私はかわいらしく女の子らしいテーマであること

これらふたつの条件を満たすものとして、Fairy FlossとDraculaのテーマがありました。

Fairy Floss

Dracula

2. フォント設定

私は長年、FiraCodeのフォントを愛用しています（Visual Studio Codeの前から！）。

一目でわかりやすいデザインの合字（複数の文字を合成して一文字にしたもの）がナイス。設定がとても簡単なのもおすすめポイントです！

3. 保存設定

保存設定もまた、私にとって大切な設定ポイントです。

ひとつは自動保存機能。これはメニューバーの「file」をドロップダウンすることでオンにできます。これで、コードを書いているときにいつ止めても自動保存されるようになります。ライブコーディングをするときや、初心者にとっては本当に助かる機能です。

私は自動保存機能の中でも、After Delayをおすすめします。

// in settings.json
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 100,

同様に、私はcommand (ctrl) + s 時にコードを整形するためのPrettierも設定しています。これも自動でできたら理想的なのですが、この設定によりそれに近いことはできています。

また、セミコロン推進派になる前は、しばらくの間StandardJSを使っていました。

// in settings.json
"editor.formatOnSave": true,

くわえて、私は多くの言語を書く時にインデントをスペース2つにしていますが、Pythonだけは例外でスペース4つにしています。

// in settings.json
"[python]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

4. Emmet設定

EmmetはWebデベロッパーのためのツールキットです。

便利で普段からよく使っているのですが、Visual Studio Codeには標準で搭載されています。また、私はhtmlファイルだけではなく他の形式のファイルにも使えるように設定しています。

// in settings.json
"emmet.includeLanguages": {
  "html": "html",
  "erb": "erb",
  "javascript": "javascriptreact",
  "vue": "html",
  "ejs": "html"
},

5. 統合ターミナル設定

ターミナルの設定についてはまた別の機会にきちんと投稿するつもりですが、私のMacではZshellとITermを使っています。

そのため、Visual Studio Codeの統合ターミナルもそれに合う設定にしています。

// in settings.json
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",

6. 拡張機能

私は言語やフレームワークに特化したたくさんの拡張機能を使っていますが、それらをひとつずつ説明していたら日が暮れてしまいますし、エンジニアによって必要なものは大きく異なるでしょう。

今回はどのような目的にも対応できる、私のお気に入りの拡張機能を紹介したいと思います。

1. VS Live Share – この拡張機能は本当に魔法のような機能で、近い将来のコーディング教育やペアプログラミングを変えると強く信じています。この拡張機能を使えば、異なるコンピューター上で同じファイルをGoogle Documentのスタイルで共同編集できます。さらには、ローカルホストのポートへ相互アクセスすることもできますし、ターミナルのセッションの共有も可能です。いくつかの細かなバグはありますが（とりわけWindowsでは）、便利すぎて気にならないほどです！
2. Code Spell Checker – 私はたくさんのマークダウンやページコンテンツを直接テキストエディタで書いていますが、たびたびスペルを間違えてしまうことがあります。この拡張機能は、スペルミスにアンダーラインを引いて正しい言葉を提案してくれます。オフラインでも動作してくれるため便利です。
3. Import Cost – これは必須というよりは「あると便利」程度の機能です。プロジェクトにインポートしているnpmパッケージのサイズを表示してくれます。
4. HTMLHint – これは、エディタの中でHTMLのバリデーションをするための拡張機能です。これを導入すれば、変更のたびにW3Cのバリデータを使う必要はありません！
5. GitLens – GitLensはGit blameでつけた注釈や作成者のハイライトを表示します。複数の開発者がいるプロジェクトではとても役立ちます！
6. CodeRunner – この拡張機能を使えば、Visual Studio Codeの中で直接実行ボタンを押すことができ、ターミナルでの操作が必要なくなります！コーディングをはじめたばかりのプログラマーには特におすすめです。
7. EmojiSense – 私はSlackの絵文字自動入力機能である「:」が大好きなのですが、この拡張機能を使えばそれと同じことをVisual Studio Codeでもできるようになります！

さいごに

私は自分のVisual Studio Codeの設定にとても満足しています。なんの不満もありません！

Visual Studio Codeの設定についての質問や、あなたのお気に入りのコツや秘訣があれば、Twitterで気軽に送ってください！

（原文：Ali Spittel　翻訳：Yui Shimizu）