Fixing VS Code Cursor and Mouse Click Misalignment (Works for Cloud Shell & Cloud Workstations)

Introduction

Have you ever experienced cursor misalignment in VS Code or web-based IDEs like Google Cloud Shell Editor and Google Cloud Workstations?

Common symptoms include:

• Clicking a character causes the cursor to appear several characters away from the actual mouse position.
• Highlighted text ranges don't match the boundaries of the selected characters.
• Typing mixed character sets (such as CJK + Latin characters) or emojis causes the caret to drift.

This issue typically arises when Monaco Editor’s monospace font rendering optimization conflicts with browser font metrics and display scaling.

This guide details how to fix the issue permanently and includes step-by-step configurations for Google Cloud Shell and Google Cloud Workstations.

---

Root Cause

By default, the Monaco Editor applies fast-path rendering optimizations assuming every monospace character has an identical width. However, character width calculations often break in the following scenarios:

1. Mixing multi-byte characters (CJK) with standard ASCII characters.
2. Non-standard browser zoom levels or non-integer display scaling (e.g., 125%, 150% High-DPI).
3. Remote Web IDEs failing to query accurate client-side font metrics.

Setting "editor.disableMonospaceOptimizations": true forces the editor to calculate the exact width of each character individually, completely eliminating the misalignment.

---

Solutions

1. Standard VS Code / Web IDE (GUI Method)

Whether running locally or in a browser-based IDE:

1. Open the Command Palette:
   • Windows / Linux: Ctrl + Shift + P
   • macOS: Cmd + Shift + P
2. Search and select: Preferences: Open User Settings (JSON)
3. Add the following entry inside the root JSON object:

{
  "editor.disableMonospaceOptimizations": true
}

Save the file (Ctrl + S / Cmd + S). The change takes effect immediately.
2. Google Cloud Shell Editor
In Cloud Shell Editor, you can use the GUI method above or apply the configuration directly via the Cloud Shell terminal:

Ensure the configuration directory exists

mkdir -p ~/.codeoss/data/Machine

Append the setting to settings.json

cat << 'EOF' >> ~/.codeoss/data/Machine/settings.json
{
  "editor.disableMonospaceOptimizations": true
}
EOF

Note: For legacy Theia-based Cloud Shell environments, the settings file is located at ~/.theia/settings.json. Opening the settings via the Command Palette is the most reliable method.

1. Google Cloud Workstations
   Cloud Workstations supports both browser-based Code-OSS and Local VS Code via Remote - SSH:

Mode A: Web Browser Access (Code-OSS / code-server)
Go to File -> Preferences -> Settings.
Click the "Open Settings (JSON)" icon in the upper-right corner.
Add "editor.disableMonospaceOptimizations": true and save.
Or via terminal:

mkdir -p ~/.local/share/code-server/User
cat << 'EOF' > ~/.local/share/code-server/User/settings.json
{
  "editor.disableMonospaceOptimizations": true
}
EOF

Mode B: Local VS Code via Remote - SSH
If you connect from your local VS Code to a Cloud Workstation instance:

Press Ctrl + Shift + P (or Cmd + Shift + P on macOS).
Select Preferences: Open Remote Settings (JSON) (SSH: ...).
Add "editor.disableMonospaceOptimizations": true and save.

Supplementary Tip: Font Configuration (Optional)
If slight alignment issues persist after disabling monospace optimizations, explicitly specify a well-supported monospace font:

{
  "editor.disableMonospaceOptimizations": true,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Courier New', monospace"
}