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

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

发布时间 - 2025-09-21 00:00:00 点击率：次

通过自定义视图、精简侧边栏、使用图标主题和书签等功能，可高效优化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会显示匹配的符号列表。
使用“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 {
    private _onDidChangeTreeData: vscode.EventEmitter = new vscode.EventEmitter();
    readonly onDidChangeTreeData: vscode.Event = 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 {
        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() {}

运行扩展： 按下
```
F5
```
运行扩展，VSCode 会打开一个新的窗口，其中包含你的扩展。
- 注意： 这只是一个简单的示例，实际的扩展开发可能需要更多的代码和配置。

通过以上步骤，你就可以在 VSCode 侧边栏添加一个自定义的视图，并在该视图中显示一个按钮。点击按钮会触发一个命令，显示一个信息框。

记住，自定义视图需要一定的编程基础，但可以极大地扩展 VSCode 的功能，使其更符合你的需求。

# vscode # linux # js # 前端 # git # json # node # go # svg # windows # 操作系统 # 工具 # mac # symbol # macos # ui # 源代码管理 # 自定义 # 按下 # 右键 # 操作方法 # 是一个 # 如果你 # 单击 # 会在 # 并在 # 可以使用

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：千秋辞新手玩法全攻略

下一篇：Android消息适配Web

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：千秋辞新手玩法全攻略

下一篇：Android消息适配Web