我已经在我的扩展中添加了自己的资源管理器视图。 在这里我添加了节点/树视图项目，但是我没有找到任何方法可以在资源管理器视图中自定义和选择颜色我的树视图项目。 知道如何实现这一目标吗？ 应该有某种方法，因为当某些文件出现错误时，与其他打开的文件相比，它的颜色设置为不同。
[我假设这是你的github问题：无法将FileDecorationProvider用于树视图项目。
这是我尝试将FileDecorationProvider用于自定义TreeView。 需要注意的是，我是打字稿和文件装饰的新手。
如果你在自定义视图上看到过支持提议的装饰提供程序 api，你知道使用FileDecorationProvider对TreeItem着色存在限制 - 主要是装饰/着色不能限制在你的树视图 - 无论在哪里resourceUri猿猴，就像在资源管理器中一样，你的 fileDecoration 将被应用。 这是非常不幸的，但我认为目前没有任何方法可以避免这种情况。
首先，在您的TreeItem课上，您必须给任何您想要装饰的物品一个resourceUri。 喜欢这个：
export class TreeTab extends vscode.TreeItem {
constructor( public readonly tab: vscode.Tab, public index: number = 0 ) {
super(tab.label, vscode.TreeItemCollapsibleState.None);
this.tab = tab;
if (tab.input instanceof vscode.TabInputText) {
this.resourceUri = tab.input.uri;
}
}
忽略我的扩展代码的细节，重点是：
this.resourceUri = <some vscode.Uri>;
其次，这就是我设置FileDecoration类的方式：
import {window, Tab, TabInputText, Uri, Disposable, Event, EventEmitter, FileDecoration, FileDecorationProvider, ThemeColor} from 'vscode';
export class TreeFileDecorationProvider implements FileDecorationProvider {
private disposables: Array<Disposable> = [];
private readonly _onDidChangeFileDecorations: EventEmitter<Uri | Uri[]> = new EventEmitter< Uri | Uri[]>();
readonly onDidChangeFileDecorations: Event<Uri | Uri[]> = this._onDidChangeFileDecorations.event;
constructor() {
this.disposables = [];
this.disposables.push(window.registerFileDecorationProvider(this));
}
async updateActiveEditor(activeTab: Tab): Promise<void> {
if (activeTab.input instanceof TabInputText)
this._onDidChangeFileDecorations.fire(activeTab.input.uri);
// filter to get only non-activeTabs
activeTab.group.tabs.map( tab => {
if (!tab.isActive && tab.input instanceof TabInputText)
this._onDidChangeFileDecorations.fire(tab.input.uri);
});
}
async provideFileDecoration(uri: Uri): Promise<FileDecoration | undefined> {
const activeEditor = window.activeTextEditor.document.uri;
if (uri.fsPath === activeEditor.fsPath) {
return {
badge: "⇐",
color: new ThemeColor("charts.red"),
// color: new vscode.ThemeColor("tab.activeBackground"),
// tooltip: ""
};
}
else return null; // to get rid of the custom fileDecoration
}
dispose() {
this.disposables.forEach((d) => d.dispose());
}
}
provideFileDecoration(uri: Uri)进行实际装饰。 它仅查找某些文件并对其进行修饰，并通过返回null重置以前修饰的 uri(由 uri 参数提供)。
updateActiveEditor()是一种导出的方法，当我想更改文件修饰时，我会在扩展的其他部分调用它。 所以在其他地方，我在另一个文件中有这个：
import { TreeFileDecorationProvider } from './fileDecorator';
export class EditorManager {
public TreeItemDecorator: TreeFileDecorationProvider;
// and then on a listener that gets triggered when I need to make a change to some things including the FileDecoration for a uri
this.TreeItemDecorator.updateActiveEditor(activeTab);
this.TreeItemDecorator.updateActiveEditor(activeTab);调用TreeFileDecorationProvider类中的updateActiveEditor方法，该方法对需要应用修饰的 uri 以及需要删除修饰的 uri 调用this._onDidChangeFileDecorations.fire(<some uri>);方法。
this._onDidChangeFileDecorations.fire(<some uri>);将调用provideFileDecoration(uri: Uri)，根据该 URI 的某些状态应用或删除实际修饰。
- 我相信有一种方法可以直接从项目中的另一个文件调用
onDidChangeFileDecorations()(如果您不需要像我那样对 uri 进行任何预处理。 我只是还没有弄清楚如何构建该函数的参数。 也许有人会在这一点上提供帮助。
你可以在这里看到：
color: new ThemeColor("charts.red"),
// color: new vscode.ThemeColor("tab.activeBackground"),
如何选择颜色 - 它必须是一些ThemeColor.charts主题颜色有一些方便参考的基本颜色。 请参阅主题颜色参考，其中的图表。
badge选项最多可以包含 2 个字符，但如您所见，我为我的复制/粘贴了一个 unicode 字符并且有效。
正如我提到的，我的FileDecorationProvider是从 eventListener 调用的，但您的用例可能不需要它 - 如果装饰不必像我的情况那样根据用户操作添加和删除。 因此，您可以直接从分机调用FileDecorationProvider.tsactivate()如下所示：
import * as vscode from 'vscode';
import { TreeFileDecorationProvider } from './fileDecorator';
export async function activate(context: vscode.ExtensionContext) {
new TreeFileDecorationProvider();
}
其他参考资料：
- a treeDecorationProvider.ts 示例
- 执行文件修饰的 git 扩展的一部分
- VSCode 扩展中的自定义视图修饰