エラーの内容
ファイルを開いて入力を始めても、何も起きない。あるいはVS Codeの右下にこんな通知が表示される：
Cannot edit in read-only editor
タブは開いている。ファイルも問題なさそうに見える。でもキーを押しても何も反応しない。その原因と解決方法を解説する。
なぜこうなるのか
VS Codeにはファイルを読み取り専用にマークする独立した仕組みが複数存在する。厄介なのは、それらが重なり合うことだ。以下のいずれか一つでもこのエラーを引き起こせる：
- OSレベルでファイルが読み取り専用になっている（
chmodまたはWindowsのファイル属性） - VS Code組み込みのエディターロックがオンになっている — タブバーにロックアイコンが表示される
- 読み取り専用の仮想ファイルシステム上にファイルがある：
.gitオブジェクト、制限された権限のRemote SSHワークスペース、または:roでマウントされたDockerボリューム - ワークスペースの設定または拡張機能が、そのパスやファイルタイプに対して
files.readonlyIncludeを設定している - diffビュー、Outputパネル、またはMarkdownプレビューを表示している — これらは仕様上、常に読み取り専用
ステップごとの修正方法
ステップ1 — まずロックアイコンを確認する
該当ファイルのタブを見てみよう。ファイル名の横に**ロックアイコン（🔒）**があるか？あればクリックする。これが最もよくある原因だ — タブを右クリックしてロックを誤ってクリックしてしまうことで有効になる。
キーボード派なら、コマンドパレットを開いて次を実行：
Ctrl+Shift+P (macOSではCmd+Shift+P)
> Toggle Editor Read-only Lock
ステップ2 — OSレベルのファイル権限を修正する
ディスク上でファイルが実際に読み取り専用になっている可能性がある。簡単な確認方法：
Linux / macOS：
ls -l yourfile.js
# -r--r--r-- は全員に読み取り専用を意味する
# オーナーに書き込み権限を付与：
chmod u+w yourfile.js
# または標準的な権限に設定：
chmod 644 yourfile.js
Windows（PowerShell）：
Get-Item yourfile.js | Select-Object IsReadOnly
# 読み取り専用属性を解除：
Set-ItemProperty yourfile.js -Name IsReadOnly -Value $false
**Windows（エクスプローラー）：**ファイルを右クリック → プロパティ → 読み取り専用のチェックを外す → 適用。
ステップ3 — settings.jsonの読み取り専用ルールを探す
拡張機能や手動での編集により、忘れていた読み取り専用ルールが静かに追加されることがある。設定を開いて次のキーを検索しよう：
// Ctrl+Shift+P → "Open User Settings (JSON)"
{
"files.readonlyInclude": {
"**/some-pattern/**": true // ← 削除するか調整する
},
"files.readonlyExclude": { ... },
"files.readonlyFromPermissions": true // ← OSの権限チェックを強制する
}
自分のファイルにマッチするパターンを削除しよう。files.readonlyFromPermissions: trueについては — これが設定されているとVS CodeはOS権限をそのまま反映する。ステップ2でOS権限を修正すれば自動的に解決する。
ステップ4 — 特殊なエディタータブを確認する
Outputパネル、Git diffビュー、Markdownプレビュー、拡張機能が生成したドキュメントは常に読み取り専用だ。これは仕様であり、バグではない。
見分け方：タブのタイトルに[Preview]や[Output]といった接尾辞があり、ステータスバーに編集可能なファイルパスが表示されていない。このタブを閉じ、Ctrl+Pでファイル名を入力して実際のソースファイルを開こう。
ステップ5 — Remote SSH、Dev Container、WSLの場合
リモート環境で作業している場合、ファイルが環境内の別のユーザーによって所有されている可能性がある。リモートターミナルで次を実行：
# リモートターミナル内（SSH / コンテナ / WSL）：
ls -l /workspace/yourfile.js
# sudoが使えるなら所有権を修正：
sudo chown $USER yourfile.js
chmod u+w yourfile.js
Dockerボリュームの場合、docker-compose.ymlに:roの接尾辞がないか確認しよう — これはコンテナレベルでボリュームを読み取り専用でマウントする：
volumes:
- ./src:/app/src:ro # ← ":ro" を削除すると書き込みが可能になる
ステップ6 — 問題を起こしている拡張機能を特定する
Prettier、ESLint、一部のGitツール、ファイル監視プラグインはいずれも読み取り専用モードを強制することがある。最速の確認方法：
Ctrl+Shift+P → "Extensions: Disable All Installed Extensions"
ファイルを再度開く。編集できるようになったか？拡張機能を一つずつ再有効化して問題が再現するものを特定する — それが犯人だ。
修正の確認
- エディター内をクリックして文字を入力する。表示されるはずだ。
- タブにロックアイコンがなく、*"Cannot edit in read-only editor"*のトーストも表示されない。
- 下部のステータスバーに言語モード（例：
JavaScript）が表示され、Read-onlyのラベルがない。 - Linux/macOSでは
ls -l yourfile.jsで確認 — オーナーに対して最低限-rw-が表示されるはずだ。
クイックリファレンス
原因解決方法
エディターのロックアイコンが有効ロックアイコンをクリックするか*Toggle Editor Read-only Lock*を実行
OSのファイル権限`chmod u+w file`またはプロパティの読み取り専用チェックを外す
`files.readonlyInclude`のパターンが一致`settings.json`からパターンを削除
Output / Diff / PreviewタブCtrl+Pで実際のソースファイルを開く
リモート / コンテナのボリュームが読み取り専用所有権を修正するかボリューム設定から`:ro`を削除
拡張機能が読み取り専用を強制全拡張機能を無効にして一つずつ再有効化
補足Tips
- エディターロックは実は便利な機能だ。
.envや生成された設定ファイルを意図的にロックして、誤編集を防ごう。任意のタブを右クリック → ロック。 - プロジェクトが
.editorconfigやビルドツールを使って生成ファイルを読み取り専用にマークしているなら、無理に変更しない方がいい — ソーステンプレートを編集して、ビルドに出力ファイルを再生成させよう。 - Remote SSHでアクセスするLinuxサーバーでは、
/var/wwwや/etc内のファイルはrootが所有していることが多い。VS Codeをrootで開くのではなく、sudo chown $USER:$USER yourfile.jsを実行しよう。