Fix "Cannot edit in read-only editor" Error in VS Code

The Error

You open a file, start typing, and nothing happens. Or VS Code flashes a notification in the bottom-right corner:

Cannot edit in read-only editor

The tab is open. The file looks fine. But every keystroke gets ignored. Here's why — and how to fix it.

Why This Happens

VS Code has multiple independent ways to mark a file as read-only. The tricky part: they stack. Any one of these can trigger the error:

• The file is marked read-only at the OS level (chmod or Windows file attributes)
• VS Code's built-in editor lock got toggled on — there's a lock icon in the tab bar
• The file lives in a read-only virtual filesystem: a .git object, a Remote SSH workspace with restricted permissions, or a Docker volume mounted with :ro
• A workspace setting or extension set files.readonlyInclude for that path or file type
• You're looking at a diff view, Output panel, or Markdown preview — these are always read-only by design

Step-by-Step Fix

Step 1 — Start with the lock icon

Look at the tab of the affected file. See a lock icon (🔒) next to the filename? Click it. That's the most common cause — the lock gets enabled accidentally when you right-click a tab and hit Lock without realizing it.

Prefer the keyboard? Open the Command Palette and run:

Ctrl+Shift+P  (or Cmd+Shift+P on macOS)
> Toggle Editor Read-only Lock

Step 2 — Fix OS-level file permissions

The file might actually be read-only on disk. Quick check:

Linux / macOS:

ls -l yourfile.js
# -r--r--r-- means read-only for everyone

# Grant write permission to the owner:
chmod u+w yourfile.js

# Or set standard permissions:
chmod 644 yourfile.js

Windows (PowerShell):

Get-Item yourfile.js | Select-Object IsReadOnly

# Remove the read-only attribute:
Set-ItemProperty yourfile.js -Name IsReadOnly -Value $false

Windows (File Explorer): Right-click the file → Properties → uncheck Read-only → Apply.

Step 3 — Hunt for read-only rules in settings.json

Extensions and manual edits can quietly add a read-only rule you forgot about. Open your settings and search for these keys:

// Ctrl+Shift+P → "Open User Settings (JSON)"
{
  "files.readonlyInclude": {
    "**/some-pattern/**": true   // ← remove or adjust this
  },
  "files.readonlyExclude": { ... },
  "files.readonlyFromPermissions": true  // ← forces OS permission check
}

Delete any pattern that matches your file. One note on files.readonlyFromPermissions: true — when that's set, VS Code mirrors OS permissions directly. Fix the OS permissions in Step 2 and this resolves itself.

Step 4 — Are you in a special editor tab?

Output panels, Git diff views, Markdown previews, and extension-generated documents are always read-only. That's intentional, not a bug.

The giveaway: the tab title has a suffix like [Preview] or [Output], and the status bar shows no editable file path. Close this tab and open the actual source file with Ctrl+P → type the filename.

Step 5 — Remote SSH, Dev Containers, and WSL

Working remotely? The file might be owned by a different user inside the environment. Run this in the remote terminal:

# Inside the remote terminal (SSH / container / WSL):
ls -l /workspace/yourfile.js

# Fix ownership if you have sudo:
sudo chown $USER yourfile.js
chmod u+w yourfile.js

For Docker volumes, check your docker-compose.yml for the :ro suffix — that mounts the volume read-only at the container level:

volumes:
  - ./src:/app/src:ro   # ← remove ":ro" to allow writes

Step 6 — Isolate a rogue extension

Prettier, ESLint, certain Git tools, and file-watcher plugins can all force read-only mode. Fastest way to test:

Ctrl+Shift+P → "Extensions: Disable All Installed Extensions"

Reopen the file. Editable now? Re-enable extensions one by one until the problem comes back — that's your culprit.

Verify the Fix

• Click inside the editor and type a character. It should appear.
• No lock icon on the tab, no "Cannot edit in read-only editor" toast.
• The status bar at the bottom shows the language mode (e.g., JavaScript) with no Read-only label.
• On Linux/macOS, confirm with ls -l yourfile.js — you should see -rw- at minimum for the owner.

Quick Reference

CauseFix

Editor lock icon activeClick lock icon or run *Toggle Editor Read-only Lock*
OS file permissions`chmod u+w file` or uncheck Read-only in Properties
`files.readonlyInclude` pattern matchRemove the pattern from `settings.json`
Output / Diff / Preview tabOpen the real source file with Ctrl+P
Remote / container volume read-onlyFix ownership or remove `:ro` from the volume config
Extension forcing read-onlyDisable all extensions, then re-enable one by one

Tips

• The editor lock is actually useful. Lock a .env or generated config file on purpose to prevent accidental edits. Right-click any tab → Lock.
• If your project uses .editorconfig or a build tool that marks generated files as read-only, don't fight it — edit the source template and let the build regenerate the output.
• On Linux servers accessed via Remote SSH, files in /var/www or /etc are often owned by root. Run sudo chown $USER:$USER yourfile.js rather than opening VS Code as root.