VS Code活用術 - 開発効率を上げる設定と拡張機能

毎日触る道具だからこそ、設定の差が積み重なる

料理人が自分の包丁を研ぎ、まな板の位置を決めているのを見たことがあるかもしれません。同じ包丁でも、手入れと配置ひとつで作業の速さと正確さが変わります。エンジニアにとってのエディタも同じです。新卒で配属された最初の数週間、多くの人はエディタを「文字が打てればいい箱」として使い、初期設定のまま何百時間も過ごします。ところが先輩の画面を横で見ると、同じ操作が半分の手数で終わっている。その差の大半は、才能ではなく設定と習慣にあります。

この記事では、開発で最も広く使われているエディタである VS Code(Visual Studio Code、マイクロソフトが無料配布しているコード編集ソフト)を題材に、道具としての仕組みから整えていきます。

エディタは「文章を書く場所」ではなく「開発の作業台」

まず押さえたいのは、VS Code がワープロソフトとは役割が違うということです。ワープロは「見た目のきれいな文書」を作るための道具ですが、エディタは コードを書き、動かし、直す ための作業台です。

なぜこの区別が大事かというと、作業台には「後から道具を並べる」という発想があるからです。VS Code は、素の状態では最小限の機能しか持ちません。そこにプログラミング言語ごとの支援機能や、コードを自動で整える機能を、自分で選んで載せていきます。最初から全部入りではないのは、人によって使う言語も作業も違うからです。必要なものだけを載せるほうが、動作が軽く、画面もすっきりします。

つまり VS Code をうまく使うとは、「自分の仕事に合わせて作業台を組み立てること」だと考えてください。以降で、その組み立て方を順に見ていきます。

設定は画面ではなくファイルで管理する — settings.json

VS Code の設定は、歯車アイコンから開くグラフィカルな設定画面でも変えられます。ですが実は、その設定はすべて settings.json という 1つのテキストファイル に記録されています。JSON(ジェイソン)とは、項目名と値を対にして書く、コンピュータが読み書きしやすいデータ形式のことです。

なぜファイルの存在を知っておくべきなのか。理由は2つあります。1つは、設定画面では項目を探すのに時間がかかりますが、ファイルなら一覧で見渡せること。もう1つは、後で述べる「チーム全員で同じ設定を共有する」ことができるからです。ファイルなら、そのまま同僚に渡せます。

設定ファイルを開くには、次の手順を使います(VS Code 本体があれば追加の準備は不要です)。

1. Ctrl+Shift+P (macOS は Cmd+Shift+P) を押す
2. 現れた入力欄に「settings json」と打つ
3. 「基本設定: 設定 (JSON) を開く」を選ぶ

開いたファイルに、たとえば次のように書きます。

{
  // Show a vertical line at column 80 as a length guide
  "editor.rulers": [80],
  // Render whitespace so stray spaces are visible
  "editor.renderWhitespace": "boundary",
  // Replace tab presses with 2 spaces
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

このファイルの読み方を説明します。全体を波かっこ {} で囲み、"設定名": 値 の組を並べ、組と組はカンマで区切ります。editor.rulers は縦線を引く位置、editor.tabSize はタブ1つ分の幅を意味します。// から後ろはコメントで、動作には影響しません。

つまずきポイント: よくあるのは、項目を書き足したときに前の行の末尾へカンマを付け忘れることです。上の例の最後に1行追加するなら、"editor.insertSpaces": true の後ろにカンマが必要になります。カンマが抜けると、その先の設定が正しく読み取れません。VS Code は問題のある箇所に波線を出して知らせてくれるので、設定が効かないときはまず波線の有無を確認してください。

保存するたびにコードが整う — フォーマッタ

コードには、インデント(行頭の字下げ)やスペースの入れ方に「読みやすい形」の慣習があります。これを手作業でそろえるのは骨が折れますし、レビューで「ここのスペースが違う」と指摘されるのは、お互い時間の無駄です。

そこで使うのが フォーマッタ(formatter)です。フォーマッタとは、コードの中身は変えずに、見た目の形だけを機械的に整えるツールのことです。人によって揺れる部分をルールで統一してくれるので、チームのコードが同じ見た目になります。

VS Code には、ファイルを保存した瞬間に自動でフォーマッタを走らせる設定があります。settings.json に次を加えます。

{
  // Run the formatter automatically on every save
  "editor.formatOnSave": true
}

formatOnSave を true(有効)にすると、保存のたびに整形が走ります。これで「整えるのを忘れる」こと自体がなくなります。手で直す作業から解放されるだけでなく、常に整った状態が保たれるのが利点です。

つまずきポイント: フォーマッタは言語ごとに別の拡張機能として提供されることが多く、入れていないと保存しても何も起きません。「有効にしたのに整わない」ときは、その言語用のフォーマッタ拡張が入っているかを次の節の方法で確認してください。同じ言語に複数のフォーマッタが入っている場合は、どれを使うかを "editor.defaultFormatter" で指定しておくと迷いがなくなります。また、保存時整形はコードの見た目を書き換えるため、他人が書いた既存ファイルで初めて使うと差分が大きく出ることがあります。共有リポジトリでは、チームで整形ルールをそろえてから有効にするのが安全な進め方です。

拡張機能は「後から足せる道具」

先ほど「作業台に道具を載せる」と述べました。その道具が 拡張機能(extension)です。拡張機能とは、VS Code に新しい機能を追加する小さなプログラムのことで、公式のマーケットプレイス(配布所)から検索して入れられます。

なぜ最初から入っていないものを足すのか。それは、あなたが使う言語やフレームワークに特化した支援を受けるためです。たとえば入力補完(打ちかけた単語の続きを提案する機能)や、間違いをその場で指摘する機能は、言語ごとの拡張が担います。

拡張機能を開く手順は次のとおりです。

1. 左端のアイコン列から四角が組み合わさったマークをクリック
   (ショートカットは Ctrl+Shift+X / Cmd+Shift+X)
2. 上部の検索欄に言語名やツール名を入力
3. 目的のものを選び「インストール」を押す

つまずきポイント: 名前が似た拡張が多数並びます。選ぶ前に、提供元の名前とダウンロード数を確認してください。広く使われているものは、その言語の公式チームや大手が出していることが多く、ダウンロード数も桁違いに大きい傾向があります。数が極端に少ない、または提供元が不明なものは、まず候補から外すのが無難です。

手を止めずに操作する — コマンドパレット

最後に、ここまで何度も登場した Ctrl+Shift+P の正体に触れます。これは コマンドパレット を開くショートカットです。コマンドパレットとは、VS Code のあらゆる操作を名前で検索して実行できる、一本化された入り口のことです。

なぜこれが効率化の中心なのか。メニューを上から順にたどると、目的の項目がどこにあるかを覚えていないと探せません。コマンドパレットなら、やりたいことを言葉で打つだけで候補が絞られます。「ファイルを新しいウィンドウで開く」も「表示言語を変える」も、入口は同じです。マウスに持ち替えず、キーボードだけで操作が完結するため、思考が途切れにくくなります。

使い方はシンプルです。Ctrl+Shift+P を押し、やりたいことの一部(たとえば「format」「reload」)を打つと、関連するコマンドが上位に出てきます。最初のうちは、メニューから操作したあとに「これはコマンドパレットでも呼べるか」と確かめる癖をつけると、よく使う操作の名前が自然と身についていきます。

まとめ

この記事の要点を、道具の考え方として振り返ります。

• VS Code は完成品ではなく、自分で組み立てる 作業台 である
• 設定は settings.json という1つのファイルに集約され、そのまま共有できる
• フォーマッタ を保存時に走らせれば、コードの見た目は自動で整う
• 拡張機能 は、提供元とダウンロード数を見て信頼できるものを選ぶ
• コマンドパレット(Ctrl+Shift+P)は、あらゆる操作への共通の入口

次の一歩: 今日、自分の VS Code で settings.json を開き、"editor.formatOnSave": true の1行だけを追加してみてください。次に何かを保存したとき、コードがひとりでに整うのを確認できます。まず1つの設定を自分の手で変える。この小さな体験が、道具を「与えられたまま使う」段階から「自分で整える」段階へ進む最初のきっかけになります。