You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将VS Code编辑器标签页的关闭按钮移至左侧?

Move VS Code Tab Close Button to the Left

Got it! Shifting that tiny 'x' close button from the right to the left side of your VS Code tabs is straightforward—here are two reliable methods to do it:

VS Code has built-in support for this, no plugins needed. Here's how:

  • Open the Settings panel: Press Ctrl+, (Windows/Linux) or Cmd+, (Mac), or click the gear icon in the bottom-left corner and select Settings.
  • In the search bar at the top, type tab close button location.
  • Look for the setting labeled Workbench > Editor: Tab Close Button Location.
  • Use the dropdown menu to select Left (instead of the default Right).

Alternatively, you can edit the settings.json file directly for faster access:

  1. Open the command palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
  2. Type Open Settings (JSON) and hit enter.
  3. Add or modify this line in the JSON object:
    "workbench.editor.tabCloseButtonLocation": "left"
    
  4. Save the file—your tabs will update immediately.

Method 2: Custom CSS (For Older VS Code Versions)

If your VS Code version doesn't have the official setting (unlikely in recent releases, but just in case), you can use custom CSS to reposition the button:

  1. Install the Custom CSS and JS Loader extension from the VS Code Marketplace.
  2. Create a new CSS file (e.g., tab-close-left.css) with this content:
    .tab-close {
        order: -1 !important; /* Moves the button to the left of the tab text */
        margin-right: 8px !important; /* Adds spacing between the button and text */
    }
    
  3. Open settings.json (using the same steps as Method 1) and add these lines:
    "vscode_custom_css.imports": [
        "file:///absolute/path/to/your/tab-close-left.css"
    ],
    "vscode_custom_css.policy": true
    
    Make sure to replace the path with the actual location of your CSS file.
  4. Open the command palette, type Reload Custom CSS and JS, and restart VS Code when prompted.

Note: Custom CSS might break after VS Code updates, so you'll need to re-run the reload command if that happens.

内容的提问来源于stack exchange,提问作者reka18

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.26 11:05:26