自定义 VSCode 文件资源管理器通过 VSCode API。

huangapple go评论61阅读模式
英文:

Customizing VSCode file explorer through vscode API

问题

有没有一种通过API自定义VSCode文件资源管理器的方法?我想创建一个扩展,允许在文件资源管理器中突出显示文件,但是通过查看VSCode API参考,我找不到任何自定义文件资源管理器的方法。这是否有可能?

英文:

Is there a way to customize VSCode file explorer through the API?
I would like to create an extension that allows highlighting files in the file explorer, but I can't find any way to customize the file explorer by looking at the VSCode API reference. Is that possible?

答案1

得分: 1

A vscode.window.registerFileDecorationProvider(provider: FileDecorationProvider): Disposable 是操作资源管理器中文件颜色的唯一方式。

你可以查看这个扩展 Highlight Files,我写了它来为不在当前工作区的文件应用自定义颜色。以下是来自该 extension.js 的一些代码:

let decClass = new FileDecorationProvider(coloredEnabled, badgedEnabled, badge);   // fileDecorator Class

class FileDecorationProvider {        
  constructor(colorEnabled, badgeEnabled, newBadge) {
    this.disposables = [];
    this.disposables.push(vscode.window.registerFileDecorationProvider(this));
    
    this.colorEnabled = colorEnabled;
    this.colorEnabled ? this.color = new vscode.ThemeColor("highlightFiles.nonWorkspaceFiles") : this.color = null;
    
    this.badgeEnabled = badgeEnabled;
    this.badgeEnabled ? this.newBadge = newBadge : this.newBadge = null;
    if (this.badgeEnabled) this.newBadge = this.newBadge || '!';
  }
  
  /**
   * 检查非工作区文件
   *
   * @param {vscode.Uri} uri
   * @memberof FileDecorationProvider
   **/
  async provideFileDecoration(uri) {
    
    let workspaceFiles = await vscode.workspace.findFiles('**');
    
    if (uri.scheme === 'vscode-userdata') return;  // 忽略 settings.json 和 keybindings.json

    const isFile = await vscode.workspace.fs.stat(uri);
    const result = workspaceFiles.findIndex(file => file.fsPath === uri.fsPath);

    const workspaces = vscode.workspace.workspaceFolders;
    const thisWorkspaceFolder = vscode.workspace.getWorkspaceFolder(uri).name;

    // if ((isFile.type === 1) && (thisWorkspaceFolder === "TestMultiRoot"))    // 是文件,不是目录,不在工作区
    if (thisWorkspaceFolder === "TestMultiRoot")    // 是文件,不是目录,不在工作区
      return {
        badge: this.newBadge,
        // badge: "⛖",  // ⛖
        color: new vscode.ThemeColor("highlightFiles.workspaceFolder1"),
        propagate: true,
        tooltip: "Workspace TestMultiRoot"
      };
    else
      return {
        color: new vscode.ThemeColor("highlightFiles.workspaceFolder2"),
        propagate: true,
        tooltip: "Workspace is not TestMultiRoot"
      };
    }
    
    // if ((isFile.type === 1) && (result < 0))    // 是文件,不是目录,不在工作区
    //   return {
    //     badge: this.newBadge,
    //     // badge: "⛖",  // ⛖
    //     color: this.color,
    //     tooltip: "File not in workspace"
    //   };
    // }

  dispose() {
    this.disposables.forEach((d) => d.dispose());
  }
}
英文:

A vscode.window.registerFileDecorationProvider(provider: FileDecorationProvider): Disposable is the only way to manipulate the color of files in the Explorer.

You can have a look at this extension Highlight Files which I wrote to apply a custom color to files not in the current workspace. Here is some code from that extension.js:

let decClass = new FileDecorationProvider(coloredEnabled, badgedEnabled, badge);   // fileDecorator Class

class FileDecorationProvider {        
  constructor(colorEnabled, badgeEnabled, newBadge) {
    this.disposables = [];
    this.disposables.push(vscode.window.registerFileDecorationProvider(this));
    
    this.colorEnabled = colorEnabled;
    this.colorEnabled ? this.color = new vscode.ThemeColor(&quot;highlightFiles.nonWorkspaceFiles&quot;) : this.color = null;
    
    this.badgeEnabled = badgeEnabled;
    this.badgeEnabled ? this.newBadge = newBadge : this.newBadge = null;
    if (this.badgeEnabled) this.newBadge = this.newBadge || &#39;!&#39;;
  }
  
  /**
   * Checks for non-workspace files
   *
   * @param {vscode.Uri} uri
   * @memberof FileDecorationProvider
   **/
  async provideFileDecoration(uri) {
    
    let workspaceFiles = await vscode.workspace.findFiles(&#39;**&#39;);
    
    if (uri.scheme === &#39;vscode-userdata&#39;) return;  // ignore settings.json and keybindings.json

    const isFile = await vscode.workspace.fs.stat(uri);
    const result = workspaceFiles.findIndex(file =&gt; file.fsPath === uri.fsPath);

    const workspaces = vscode.workspace.workspaceFolders;
    const thisWorkspaceFolder = vscode.workspace.getWorkspaceFolder(uri).name;

    // if ((isFile.type === 1) &amp;&amp; (thisWorkspaceFolder === &quot;TestMultiRoot&quot;))    // is a file, not a directory &amp;&amp; not in workspace
    if (thisWorkspaceFolder === &quot;TestMultiRoot&quot;)    // is a file, not a directory &amp;&amp; not in workspace
      return {
        badge: this.newBadge,
        // badge: &quot;\u26D6&quot;,  // ⛖
        color: new vscode.ThemeColor(&quot;highlightFiles.workspaceFolder1&quot;),
        propagate: true,
        tooltip: &quot;Workspace TestMultiRoot&quot;
      };
    else
      return {
        color: new vscode.ThemeColor(&quot;highlightFiles.workspaceFolder2&quot;),
        propagate: true,
        tooltip: &quot;Workspace is not TestMultiRoot&quot;
      };
    }
    
    // if ((isFile.type === 1) &amp;&amp; (result &lt; 0))    // is a file, not a directory &amp;&amp; not in workspace
    //   return {
    //     badge: this.newBadge,
    //     // badge: &quot;\u26D6&quot;,  // ⛖
    //     color: this.color,
    //     tooltip: &quot;File not in workspace&quot;
    //   };
    // }

  dispose() {
    this.disposables.forEach((d) =&gt; d.dispose());
  }
}

huangapple
  • 本文由 发表于 2023年3月10日 00:45:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75687608.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定