VSCode 的侧边栏有哪些自定义和优化技巧？

技术教程
2025-09-21 18:32:01

通过自定义视图、精简侧边栏、使用图标主题和书签等功能，可高效优化VSCode侧边栏布局与操作体验，提升开发效率。

vscode 的侧边栏有哪些自定义和优化技巧？

VSCode的侧边栏自定义和优化，简单来说，就是让它更符合你的工作习惯，提高效率。可以调整文件目录的显示方式，隐藏不常用的功能，甚至添加自定义的视图。

解决方案

VSCode侧边栏的优化，核心在于利用它的可定制性。以下是一些具体的技巧：

精简视图： 默认情况下，侧边栏会显示很多视图，比如资源管理器、搜索、源代码管理、运行和调试等等。但你可能并不需要所有这些。
- 操作方法： 在侧边栏的空白处右键单击，会弹出一个上下文菜单，列出了所有可用的视图。取消勾选你不需要的视图，它们就会从侧边栏消失。
- 个人观点： 我个人觉得，对于前端开发，版本控制和资源管理器是必不可少的，但调试视图除非在调试时才需要，平时可以隐藏。
文件图标主题： VSCode支持各种文件图标主题，不同的主题会用不同的图标来表示不同类型的文件和文件夹。
- 操作方法： 安装文件图标主题扩展，然后在设置中选择你喜欢的主题。
- 选择建议： Material Icon Theme 是一个非常流行的选择，它提供了清晰、美观的图标，可以帮助你快速识别文件类型。
工作区设置： VSCode允许你为每个工作区单独设置侧边栏的显示方式。
- 操作方法： 在工作区中打开
```
.vscode/settings.json
```
  文件，添加或修改以下设置：
```
{
    "explorer.compactFolders": false, // 显示完整的文件夹路径
    "explorer.sortOrder": "type", // 按文件类型排序
    "files.exclude": {
        "**/node_modules": true, // 隐藏node_modules文件夹
        "**/.git": true // 隐藏.git文件夹
    }
}
```
- 说明：
```
explorer.compactFolders
```
  控制是否以紧凑模式显示文件夹（即，如果一个文件夹只有一个子文件夹，则合并显示）。
```
explorer.sortOrder
```
  控制文件和文件夹的排序方式。
```
files.exclude
```
  控制要隐藏的文件和文件夹。
使用书签： 如果你经常需要访问某些特定的文件或文件夹，可以使用书签功能。
- 操作方法： 安装书签扩展，然后右键单击要添加书签的文件或文件夹，选择“Add Bookmark”。
- 个人体验： 我经常用书签来快速访问项目的配置文件和入口文件，省去了很多查找的时间。
自定义视图： VSCode允许开发者创建自定义的视图，并添加到侧边栏。这需要编写VSCode扩展，比较复杂，但可以实现非常强大的功能。
- 适用场景： 如果你需要一个特定的工具或功能，但VSCode没有提供，可以考虑自己编写一个扩展。

如何在 VSCode 侧边栏快速定位到指定文件？

除了上面提到的书签功能，还有一些技巧可以帮助你快速定位文件：

使用“Go to File”命令： 按下
```
Ctrl+P
```
(Windows/Linux) 或
```
Cmd+P
```
(macOS)，输入文件名，VSCode会显示匹配的文件列表。
- 技巧： 可以使用模糊搜索，只需输入文件名的部分字符即可。
使用“Go to Symbol”命令： 按下
```
Ctrl+Shift+O
```
(Windows/Linux) 或
```
Cmd+Shift+O
```
(macOS)，输入符号名（例如，函数名、变量名），VSCode会显示匹配的符号列表。
Vheer
AI图像处理平台
260 查看详情
使用“Reveal in Explorer”命令： 在编辑器中打开文件后，右键单击编辑器，选择“Reveal in Explorer” (Windows) 或 “Reveal in Finder” (macOS)，VSCode会在操作系统的文件管理器中打开该文件所在的文件夹。
使用“Find in Files”命令： 按下
```
Ctrl+Shift+F
```
(Windows/Linux) 或
```
Cmd+Shift+F
```
(macOS)，输入要搜索的文本，VSCode会在整个项目中搜索匹配的文件。

如何让 VSCode 侧边栏更美观？

美观与否，主观性很强。但有一些通用的方法可以提升侧边栏的颜值：

选择一个好看的主题： VSCode有大量的主题可供选择，可以根据自己的喜好选择一个。
- 个人推荐： One Dark Pro、Dracula、Monokai Pro 等都是比较流行的主题。
使用文件图标主题： 上面已经提到过，文件图标主题可以帮助你快速识别文件类型，同时也能让侧边栏看起来更整洁。
调整字体大小： 侧边栏的字体大小可能会影响视觉效果。可以在设置中调整
```
workbench.sideBar.fontSize
```
。
隐藏不必要的元素： 隐藏不常用的视图和文件，可以减少视觉干扰，让侧边栏看起来更清爽。
使用 VSCode 的 Zen Mode： Zen Mode 可以隐藏所有不必要的UI元素，让你专注于代码。按下
```
Ctrl+K Z
```
(Windows/Linux) 或
```
Cmd+K Z
```
(macOS) 即可进入 Zen Mode。

如何在 VSCode 侧边栏添加自定义的工具或快捷方式？

这通常需要编写 VSCode 扩展。以下是一个简单的示例，演示如何在侧边栏添加一个自定义的视图，并在该视图中显示一个按钮：

创建 VSCode 扩展项目： 使用 Yeoman 生成器创建一个新的 VSCode 扩展项目。
```
npm install -g yo generator-code
yo code
```

修改

package.json

文件： 在

package.json

文件中添加以下配置，定义一个自定义的视图容器和视图。

"contributes": {
    "viewsContainers": {
        "activitybar": [
            {
                "id": "my-custom-view-container",
                "title": "My Custom View",
                "icon": "resources/my-icon.svg"
            }
        ]
    },
    "views": {
        "my-custom-view-container": [
            {
                "id": "my-custom-view",
                "name": "My View"
            }
        ]
    },
    "commands": [
        {
            "command": "my-extension.myCommand",
            "title": "Do Something"
        }
    ],
    "menus": {
        "view/item/context": [
            {
                "command": "my-extension.myCommand",
                "group": "inline"
            }
        ]
    }
}

修改

extension.ts

文件： 在

extension.ts

文件中注册命令和视图提供器。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    let disposable = vscode.commands.registerCommand('my-extension.myCommand', () => {
        vscode.window.showInformationMessage('Hello from My Custom View!');
    });

    context.subscriptions.push(disposable);

    const myViewProvider = new MyViewProvider(context.extensionUri);
    context.subscriptions.push(
        vscode.window.registerTreeDataProvider('my-custom-view', myViewProvider)
    );
}

class MyViewProvider implements vscode.TreeDataProvider<MyItem> {
    private _onDidChangeTreeData: vscode.EventEmitter<MyItem | undefined | null | void> = new vscode.EventEmitter<MyItem | undefined | null | void>();
    readonly onDidChangeTreeData: vscode.Event<MyItem | undefined | null | void> = this._onDidChangeTreeData.event;

    constructor(private readonly extensionUri: vscode.Uri) { }

    refresh(): void {
        this._onDidChangeTreeData.fire();
    }

    getTreeItem(element: MyItem): vscode.TreeItem {
        return element;
    }

    getChildren(element?: MyItem): Thenable<MyItem[]> {
        return Promise.resolve([new MyItem('Do Something', vscode.TreeItemCollapsibleState.None, {
            command: 'my-extension.myCommand',
            title: 'Do Something',
        })]);
    }
}

class MyItem extends vscode.TreeItem {
    constructor(
        public readonly label: string,
        public readonly collapsibleState: vscode.TreeItemCollapsibleState,
        public readonly command?: vscode.Command
    ) {
        super(label, collapsibleState);
        this.command = command;
    }

    contextValue = 'myItem';
}

export function deactivate() {}