Posted inDevelopment

LinuxでVisual Studio Codeをインストール・活用する：現場で学んだTips & Tricks

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Linuxに移行して初めてプログラミングを始めたとき

3年前、WindowsからUbuntuに開発環境を完全に移行しました。最初にぶつかった問題は、ターミナルでもパッケージマネージャーでもなく、エディタでした。Vim、Emacs、Sublime Textと試してみましたが、結局Visual Studio Codeに落ち着きました。理由はシンプルです。軽くて強力で、他のどのエディタにも匹敵しない巨大な拡張機能エコシステムを持っているからです。

Linuxに移行したばかりで好みのエディタを探している方に向けて、正しいインストール方法、適切な設定、そして本当に役立つ機能の活用方法を紹介します。ただインストールして放置するのではなく、しっかり使いこなしましょう。

VSCodeとは？Linuxで使うべき理由

Visual Studio CodeはMicrosoftが開発したオープンソースのコードエディタで、Electronベースで構築されています。「Electronは重くて遅い」というイメージを持つ方も多く、私も最初はそう思っていました。しかし実際には、Ubuntu 22.04上で約2秒で起動し、適度なサイズのプロジェクトなら200〜300MBのRAMで動作します。2GBのVPSでも十分快適に使えます。

他のエディタと比較して、VSCodeが際立っているポイントをいくつか挙げます：

  • 強力なIntelliSense：Python、JavaScript、TypeScript、Goなどに対応したスマートな自動補完
  • Git統合：エディタ内でdiff、commit、blameが可能 — ターミナルを離れる必要なし
  • Extension Marketplace：リンターからDocker、SSHリモートまで30,000以上の拡張機能
  • Remote Development：SSHでサーバーに接続して、ローカルと同様にファイルを編集
  • 統合ターミナル：エディタ内でターミナルを開き、自由にウィンドウを分割

LinuxへのVSCodeインストール

ディストリビューションによってインストール方法が異なります。それぞれ解説します：

Ubuntu / Debian — aptリポジトリ経由でインストール（推奨）

この方法では新バージョンが出たときに自動的にアップデートを受け取れます — 手動でダウンロードする必要がありません：

# 必要な依存関係をインストール
sudo apt install wget gpg apt-transport-https -y

# MicrosoftのGPGキーをダウンロードしてインポート
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg

# VSCodeリポジトリを追加
echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list > /dev/null

# インストール
sudo apt update && sudo apt install code -y

Fedora / RHEL / CentOS — dnf経由でインストール

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf check-update && sudo dnf install code -y

Arch Linux / Manjaro — AUR経由でインストール

# yayまたはparu（AURヘルパー）を使用
yay -S visual-studio-code-bin

# オープンソース版を使いたい場合：
yay -S vscodium-bin

Snap経由でインストール（全ディストリビューション対応）

お使いのディストリビューションがSnapに対応している場合、これが最も手軽な方法です：

sudo snap install code --classic

初期設定 — このステップを飛ばさないでください

インストールしてデフォルトのまま使うのはもったいないです。かつての私がそうでしたが、1ヶ月以上も多くの便利な機能を見逃していたことに気づきませんでした。

最初からsettings.jsonを設定する

Ctrl+Shift+Pを押して「Open User Settings (JSON)」と入力し、直接編集します：

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.fontSize": 13
}

ミニマップは画面を占有する割にほとんど使わないので無効にしています。formatOnSaveを有効にして初めてその時間節約効果がわかります — 保存するたびにコードが自動フォーマットされ、スタイルについて誰かと議論する必要がなくなります。

最初にインストールすべき拡張機能

毎日使っている拡張機能をコマンドで素早くインストールします：

# Python開発
code --install-extension ms-python.python
code --install-extension ms-python.black-formatter

# 高度なGit機能
code --install-extension eamodio.gitlens
code --install-extension mhutchie.git-graph

# サーバーへのリモートSSH
code --install-extension ms-vscode-remote.remote-ssh

# Docker
code --install-extension ms-azuretools.vscode-docker

# コードの自動フォーマット
code --install-extension esbenp.prettier-vscode

現場で学んだTips & Tricks

Workspace settings — プロジェクトごとに設定を分ける

複数のプロジェクトを同時に扱うとき、グローバル設定が問題になることがあります — 例えばPythonプロジェクトはタブサイズ4、JSプロジェクトは2といった具合です。解決策はプロジェクト内に.vscode/settings.jsonファイルを作成することです：

{
  "python.defaultInterpreterPath": "./venv/bin/python",
  "editor.tabSize": 4,
  "[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

この設定は現在のプロジェクトにのみ適用されます。このファイルをGitにコミットすれば、チーム全員が自動的に同じ設定を使えます — セットアップ手順を送る必要がなくなります。

マルチカーソル編集 — 意外と知られていない機能

複数の行を同時に編集したいときに最もよく使うショートカットを紹介します：

  • Alt+Click：クリックした位置にカーソルを追加
  • Ctrl+Alt+Down/Up：下/上の行にカーソルを追加
  • Ctrl+D：選択中の単語と同じ次の単語を選択
  • Ctrl+Shift+L：ファイル内の同一単語をすべて選択 — 変数名の一括変更に非常に便利

ターミナルからVSCodeを開く

# 現在のディレクトリでVSCodeを開く
code .

# 特定のファイルを開く
code /path/to/file.py

# ファイルを開いて特定の行にジャンプ（エラーログを確認するときに便利）
code -g /path/to/file.py:42

Remote SSH — サーバー作業で重宝するテクニック

Remote-SSH拡張機能をインストールしたら、~/.ssh/configに設定を追加します：

Host myserver
  HostName 192.168.1.100
  User ubuntu
  IdentityFile ~/.ssh/id_rsa

F1を押して「Remote-SSH: Connect to Host」→ myserverを選択するだけです。サーバー上のファイルをローカルと全く同じように編集できます — ターミナルも拡張機能も普通に動作します。VPS上でのコードデバッグに毎日使っており、SSHでつないでvimを使うより断然効率的です。

視覚的なテストカバレッジ — 5万行のリファクタリングから学んだこと

5万行のコードベースをリファクタリングした経験があります。最も高い授業料は、ロジックに手を入れる前に十分なテストカバレッジが必要だということです。当時Coverage Gutters拡張機能を使いました — テストがない行は左側のガターに赤色で表示され、カバー済みの行は緑色で表示されます。一目見れば、修正前にどこからテストを書くべきかが一目瞭然です。

# Coverage Guttersをインストール
code --install-extension ryanluker.vscode-coverage-gutters

# カバレッジレポート付きでpytestを実行
pip install pytest-cov
pytest --cov=. --cov-report=xml

# その後 Ctrl+Shift+P → "Coverage Gutters: Display Coverage"

まとめ

3年間VSCodeをメインエディタとして使ってきましたが、乗り換えを考えたことは一度もありません。流行に乗っているわけではなく、毎日必要なこと — サーバーへのリモートSSH、Pythonのデバッグ、GitのDiff確認、Dockerfileの作成 — すべてを1つのウィンドウで処理できるからです。

大切なのは、インストールしてデフォルトのまま使わないことです。settings.jsonの設定に30分、必要な拡張機能を5〜6個インストール、よく使うショートカットをいくつか覚えるだけです。1〜2週間慣れれば、作業速度が明らかに向上します。

最後に一言：拡張機能を一度に20個インストールしないでください。以前そうしたら、エディタが大幅に遅くなり、どれが原因かわからなくなりました。実際の必要性に合わせてインストールしましょう — 必要なときに必要なものだけ。

Share:
Tags: