Ubuntu下VSCode 4字符缩进配置及显示异常解决方法

Hey there, I've run into this exact issue on Ubuntu with VS Code before—super frustrating when your indentation looks squished even after setting tab size to 4. Let's walk through the fixes step by step:

First, make sure your basic indent config isn't being overridden:

• Open VS Code settings with Ctrl+, (or go to File > Preferences > Settings)
• Search for these key settings and set them as follows:
  • editor.tabSize: Set to 4 (this controls how many spaces a tab/indent represents visually and functionally)
  • editor.insertSpaces: Set to true (ensures pressing Tab inserts 4 spaces instead of a tab character)
  • editor.detectIndentation: Set to false (disables VS Code's auto-detection feature, which might override your global settings for existing files)

A common culprit here is using a non-monospace font—these fonts make spaces narrower than regular characters, so 4 spaces end up looking like only 2. Fix this:

• In settings, search for editor.fontFamily
• Set it to a reliable monospace font (Ubuntu Mono is pre-installed on Ubuntu, so it's a safe default):

  'Ubuntu Mono', 'Consolas', 'Fira Code', monospace
  

  Adding monospace at the end ensures a fallback if your preferred font isn't available.

If your current file uses tab characters instead of spaces (or vice versa), your new settings won't fix the visual width retroactively:

• Open the problematic file
• Open the command palette with Ctrl+Shift+P
• Search for and run Convert Indentation to Spaces (this replaces all tabs with 4 spaces)
• Alternatively, run Convert Indentation to Tabs if you prefer tabs, but keep editor.tabSize set to 4 to maintain the 4-character visual width.

VS Code lets you set workspace-specific settings that override global ones. To confirm:

• Check if there's a .vscode/settings.json file in your project folder
• Open it and make sure there are no lines like:

  "editor.tabSize": 2,
  "editor.insertSpaces": false
  

  If there are, delete or modify them to match your desired 4-space setup.

Once you've gone through these steps, your 4-space indents should display as full 4-character widths, making your code layout much cleaner and easier to read.

内容的提问来源于stack exchange，提问作者Alice