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

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

解决方案

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

1. 精简视图： 默认情况下，侧边栏会显示很多视图，比如资源管理器、搜索、源代码管理、运行和调试等等。但你可能并不需要所有这些。

   • 操作方法： 在侧边栏的空白处右键单击，会弹出一个上下文菜单，列出了所有可用的视图。取消勾选你不需要的视图，它们就会从侧边栏消失。

   • 个人观点： 我个人觉得，对于前端开发，版本控制和资源管理器是必不可少的，但调试视图除非在调试时才需要，平时可以隐藏。

2. 文件图标主题： VSCode支持各种文件图标主题，不同的主题会用不同的图标来表示不同类型的文件和文件夹。

   • 操作方法： 安装文件图标主题扩展，然后在设置中选择你喜欢的主题。

   • 选择建议： Material Icon Theme 是一个非常流行的选择，它提供了清晰、美观的图标，可以帮助你快速识别文件类型。

3. 工作区设置： 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

     控制要隐藏的文件和文件夹。

4. 使用书签： 如果你经常需要访问某些特定的文件或文件夹，可以使用书签功能。

   • 操作方法： 安装书签扩展，然后右键单击要添加书签的文件或文件夹，选择“Add Bookmark”。

   • 个人体验： 我经常用书签来快速访问项目的配置文件和入口文件，省去了很多查找的时间。

5. 自定义视图： VSCode允许开发者创建自定义的视图，并添加到侧边栏。这需要编写VSCode扩展，比较复杂，但可以实现非常强大的功能。

   • 适用场景： 如果你需要一个特定的工具或功能，但VSCode没有提供，可以考虑自己编写一个扩展。

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

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

1. 使用“go to File”命令： 按下

   Ctrl+P

   (Windows/Linux) 或

   Cmd+P

   (macOS)，输入文件名，VSCode会显示匹配的文件列表。

   • 技巧： 可以使用模糊搜索，只需输入文件名的部分字符即可。

2. 使用“Go to Symbol”命令： 按下

   Ctrl+Shift+O

   (Windows/Linux) 或

   Cmd+Shift+O

   (macOS)，输入符号名（例如，函数名、变量名），VSCode会显示匹配的符号列表。

   

   Mozart AI

   AI音乐生成工具，可以将图片、文字转换为音乐

   63

   查看详情

3. 使用“Reveal in Explorer”命令： 在编辑器中打开文件后，右键单击编辑器，选择“Reveal in Explorer” (Windows) 或 “Reveal in Finder” (macOS)，VSCode会在操作系统的文件管理器中打开该文件所在的文件夹。

4. 使用“Find in Files”命令： 按下

   Ctrl+Shift+F

   (Windows/Linux) 或

   Cmd+Shift+F

   (macOS)，输入要搜索的文本，VSCode会在整个项目中搜索匹配的文件。

如何让 VSCode 侧边栏更美观？

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

1. 选择一个好看的主题： VSCode有大量的主题可供选择，可以根据自己的喜好选择一个。

   • 个人推荐： One Dark Pro、Dracula、Monokai Pro 等都是比较流行的主题。

2. 使用文件图标主题： 上面已经提到过，文件图标主题可以帮助你快速识别文件类型，同时也能让侧边栏看起来更整洁。

3. 调整字体大小： 侧边栏的字体大小可能会影响视觉效果。可以在设置中调整

   workbench.sideBar.fontSize

   。

4. 隐藏不必要的元素： 隐藏不常用的视图和文件，可以减少视觉干扰，让侧边栏看起来更清爽。

5. 使用 VSCode 的 Zen Mode： Zen Mode 可以隐藏所有不必要的UI元素，让你专注于代码。按下

   Ctrl+K Z

   (Windows/Linux) 或

   Cmd+K Z

   (macOS) 即可进入 Zen Mode。

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

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

1. 创建 VSCode 扩展项目： 使用 Yeoman 生成器创建一个新的 VSCode 扩展项目。

   npm install -g yo generator-code yo code

2. 修改

   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"             }         ]     } }

3. 修改

   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() {}

4. 运行扩展： 按下

   F5

   运行扩展，VSCode 会打开一个新的窗口，其中包含你的扩展。

   • 注意： 这只是一个简单的示例，实际的扩展开发可能需要更多的代码和配置。

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

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