如何将VS Code编辑器标签页的关闭按钮移至左侧?
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:
Method 1: Use Official VS Code Settings (Recommended)
VS Code has built-in support for this, no plugins needed. Here's how:
- Open the Settings panel: Press
Ctrl+,(Windows/Linux) orCmd+,(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:
- Open the command palette with
Ctrl+Shift+P(Windows/Linux) orCmd+Shift+P(Mac). - Type
Open Settings (JSON)and hit enter. - Add or modify this line in the JSON object:
"workbench.editor.tabCloseButtonLocation": "left" - 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:
- Install the Custom CSS and JS Loader extension from the VS Code Marketplace.
- 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 */ } - Open
settings.json(using the same steps as Method 1) and add these lines:
Make sure to replace the path with the actual location of your CSS file."vscode_custom_css.imports": [ "file:///absolute/path/to/your/tab-close-left.css" ], "vscode_custom_css.policy": true - 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
相关产品推荐
相关产品推荐

