通过自定义视图、精简侧边栏、使用图标主题和书签等功能，可高效优化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会显示匹配的符号列表。
稿定AI
拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能
25 查看详情 
使用“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-codeyo 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 的侧边栏有哪些自定义和优化技巧？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/450557.html
微信扫一扫 
支付宝扫一扫 
