VS Codeをさらに快適に!コーディング効率が上がる必須設定5選

VS Codeは非常に優秀なエディタですが、デフォルト設定の一部は、多くのコーダーにとって必ずしも最適化されているわけではありません。筆者はこれまでさまざまなVS Code設定を試行錯誤し、コーディング中のストレスを減らし、より洗練された使い心地を実現する方法を探ってきました。今回紹介する変更は、セットアップに約10分しかかかりません。しかし一度設定してしまえば、VS Codeはより高速で、落ち着いており、はるかに信頼できるツールに生まれ変わります。

事前準備：settings.jsonの編集方法

この記事の手順に沿うには、VS Codeの設定ファイル「settings.json」を編集します。WindowsではCtrl+Shift+P、MacではCmd+Shift+Pでコマンドパレットを開き、検索バーに「JSON」と入力してください。「Preferences: Open User Settings (JSON)」をクリックします。以降のセクションで紹介するJSONコードは、このファイルの波括弧{ }の中に貼り付けてください。

1. 自動保存

1行書くたびにCtrl+Sを押す必要はもうない

数秒おきにCtrl+Sを連打していませんか?それはもはや筋肉の記憶のようなものですが、実は不要な摩擦でしかありません。自動保存（Auto Save）を使えば、その手間は完全になくなります。設定は以下の通りです。

"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000

これで、短い一時停止の後にファイルが自動的に保存されます。コードを書いて少し止まれば、勝手に保存される仕組みです。地味な変更に思えますが、コーディングの感覚が大きく変わります。

筆者自身、大規模なコードベースでファイルの保存を忘れ、テストで新しく書いたコードが動かず悩んだことがあります。あらゆる手段で問題を修正しようと奮闘した末、原因は未保存のファイルだったと判明。それ以来、自動保存の有用さを痛感しています。

もう少し細かく制御したい場合は、こちらの設定がおすすめです。

"files.autoSave": "onFocusChange"

これはタブを切り替えたときや、エディタからフォーカスが離れたときにファイルを保存します。実行タイミングが重要なスクリプトやタスクを扱っている場合に便利です。

2. 保存時にフォーマット

コードを自動できれいに整える

乱れたフォーマットは、「気にはなるけど毎回直すほどでもない」という厄介な存在です。そこで活躍するのが保存時のフォーマット（Format on Save）です。

"editor.formatOnSave": true

これで、ファイルを保存するたびにVS Codeが自動で整形してくれます。インデント、スペース、配置——すべて自動で整います。HTMLページを書いているときなど、インデントが崩れるとコードが極端に読みづらくなりますが、手動で直すのは時間がかかる上に面倒です。この機能があればその心配はありません。

フロントエンド開発に強くおすすめしたい拡張機能「Prettier」を使っているなら、デフォルトのフォーマッターとして設定できます。

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

自動フォーマットによって手作業でのコード整理が不要になり、常に一貫性のあるスタイルでコーディングできます。もうコードの見た目について考える必要はありません。

3. ワードラップ（折り返し）

横スクロールとは今日でお別れ

横スクロールは、集中の流れを最速で断ち切る要因の一つです。長い行を読んでいる途中で画面の外に消え、スクロールバーを行き来しながら内容をつなぎ合わせる羽目になった経験はありませんか?

ワードラップを有効にしましょう。

"editor.wordWrap": "on"

長い行がエディタウィンドウ内で自然に折り返されるようになり、全体が格段に読みやすくなります。特にJSON、ログ、Markdown、JSXなどを扱うときに効果を実感できます。次に長い行を読むとき、マウスに手を伸ばす必要はもうありません。常時オンにしたくない場合は、Alt+Zでいつでも切り替えられます。

4. 視覚的なノイズを減らす

VS Codeは親切心から、ミニマップ、パンくずリスト（breadcrumbs）、インラインヒントなど、あらゆる情報を表示しようとします。しかし、情報が多いほど良いというものではなく、ときには単なるノイズになり得ます。エディタがごちゃごちゃして集中できないと感じたら、いくつかオフにしてみましょう。

"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.inlayHints.enabled": "off"

これでインターフェースが、本当に重要な要素——エディタとコードだけ——に絞られます。ミニマルな開発環境を好む人にとっては、画期的な変化となるでしょう。

もちろん、これは好みの問題です。ミニマップやパンくずリストが好きな人もいます。ただ、今まで存在を疑問視したことがないなら、一度すっきりとした設定を試してみる価値は十分にあります。意外なほど爽快だと感じるかもしれません。

5. IntelliSenseの調整

自動補完を煩わしくなくする

自動補完は便利ですが、度を越せば邪魔になります。デフォルトのVS Codeはやや積極的すぎて、文字列を入力しているとき、コメントを書いているとき、さらにはコードの構成を考えている最中にも候補がポップアップします。次第に、助けというより妨害のように感じ始めることも。

以下の設定で、補完の挙動を落ち着かせることができます。

"editor.quickSuggestions": {
  "other": true,
  "comments": false,
  "strings": false
},
"editor.suggestOnTriggerCharacters": false

これにより、実際のコードのように候補が役立つ場面では表示され、コメントや文字列のように気が散るだけの場面では非表示になります。結果として、自動補完がより意図的に働くようになり、本当に必要なときにだけ現れるようになります。

VS Codeを「自分専用のエディタ」にしよう

今回紹介したどの設定も革命的なものではありません。すべて最初から存在していた機能です。しかし、組み合わせることで驚くほどの手間とストレスを省けます。興味深いことに、VS Codeには他にもコーディングをより楽しくし、プログラマーとしてのスキル向上をサポートしてくれる隠れた機能が数多くあります。まずは今回の5つの設定から試して、自分好みの開発環境を作り上げてみてください。

著者プロフィール

Zunaid Ali（ズナイド・アリ）は、2006年に初めてコンピュータに触れて以来、テクノロジーに強い関心を持ち続けています。2018年からハウツーコンテンツの制作を開始し、これまでに何千人もの読者に情報を届けてきました。

子ども時代から人気ブログの技術チュートリアルやトラブルシューティングガイドを読みふけっていたことが、執筆キャリアへの憧れにつながりました。コロナ禍を経て、本格的にテックライティングの世界へ飛び込みます。How-To Geekに参加する前は、HecticGeek、Distroid、UbuntuPITなどで執筆経験があります。

2021年にWeb開発を学ぼうとして初めてLinuxに挑戦しましたが、経験不足からUbuntuとWindowsのデュアルブート構築でノートPCを壊してしまいました。腹を括ってWindowsを完全に削除しLinux一本で使い始めたところ、そこから魅力にはまり、以来アクティブにLinuxを探究し続けています。

2022年4月にLinux関連の初の執筆案件を獲得したことを機に、同分野を専門として知識を共有することを決意。2023年9月からHow-To Geekにフリーランスライターとして参加しています。現在は情報・通信技術（ICT）の学士課程に在籍しており、執筆以外の時間は技術ブログの閲覧、個人プロジェクトのコーディング、新技術の学習に充てています。Linuxのほか、Android開発やサイバーセキュリティにも興味があり、C/C++、Java、HTML/CSS/JavaScript、Pythonの実務経験があります。趣味のプロジェクトの一部はGitHubで公開しています。