import * as vscode from 'vscode';
import * as path from 'path';
// 定义文件树节点
类型
interface FileTreeNode {
name: string; // 文件名/目录名
path: string; // 完整路径
isDirectory: boolean; // 是否是目录
children?: FileTreeNode[]; // 子节点（仅目录有）
}
export function activate
(context: vscode
.ExtensionContext
) {
// 注册 Webview 视图提供者（假设已在 package
.json 中配置视图）
const provider = new FileTreeWebviewProvider
(context
.extensionUri
);
context
.subscriptions
.push
(
vscode
.window
.registerWebviewViewProvider
(
'fileTreeView', // 与 package
.json 中视图 ID 一致
provider
)
);
}
class FileTreeWebviewProvider implements vscode
.WebviewViewProvider {
constructor
(private readonly _extensionUri: vscode
.Uri
) {}
resolveWebviewView
(webviewView: vscode
.WebviewView
) {
webviewView
.webview
.options = {
enableScripts: true,
localResourceRoots: [this
._extensionUri]
};
// 初始 HTML 内容（包含一个输入框和按钮触发路径读取）
webviewView
.webview
.html = `
<!DOCTYPE html>
<html>
<head>
<style>
.tree { padding-left: 20px; }
.directory { cursor: pointer; color: #2b64d9; }
.file { color: #555; }
.hidden { display: none; }
</style>
</head>
<body>
<input type="text" id="pathInput" placeholder="输入路径（如 /workspace）">
<button id="loadBtn">加载文件树</button>
<div id="treeContainer" class="tree"></div>
<script>
const vscode = acquireVsCodeApi
();
const input =
document.getElementById('pathInput'
);
const button =
document.getElementById('loadBtn'
);
// 点击按钮时向主进程请求文件树
button
.addEventListener
('click',
() => {
const targetPath = input
.value
.trim
();
if
(targetPath
) {
vscode
.postMessage
({
command: 'requestFileTree',
path: targetPath
}
);
}
}
);
// 监听主进程返回的文件树数据
window
.addEventListener
('message',
(event
) => {
const message = event
.data;
if
(message
.command === 'fileTreeData'
) {
renderTree
(message
.tree,
document.getElementById('treeContainer'
));
}
}
);
// 递归渲染树状结构
function renderTree
(node, container
) {
const li =
document.createElement
('li'
);
li
.className = node
.isDirectory ? 'directory' : 'file';
li
.textContent = node
.name;
// 目录点击时展开/折叠子节点
if
(node
.isDirectory
) {
li
.addEventListener
('click',
() => {
const childrenUl = li
.querySelector
('ul'
);
childrenUl
.classList
.toggle
('hidden'
);
}
);
const ul =
document.createElement
('ul'
);
ul
.className = 'hidden'; // 默认折叠
node
.children
.forEach
(child => renderTree
(child, ul
));
li
.appendChild
(ul
);
}
container
.appendChild
(li
);
}
</script>
</body>
</html>
`;
// 监听 Webview 请求，读取文件树并返回
webviewView
.webview
.onDidReceiveMessage
(async
(message
) => {
if
(message
.command === 'requestFileTree'
) {
try {
const rootPath = message
.path;
const tree = await this
.getFileTree
(rootPath
);
webviewView
.webview
.postMessage
({
command: 'fileTreeData',
tree: tree
}
);
} catch
(error
) {
vscode
.window
.showErrorMessage
(`读取路径失败：${error
.message}`
);
}
}
}
);
}
// 递归获取文件树
private async getFileTree
(fsPath: string
): Promise<FileTreeNode> {
const uri = vscode
.Uri
.file
(fsPath
);
const stat = await vscode
.workspace
.fs
.stat
(uri
);
const isDirectory = stat
.type === vscode
.FileType
.Directory;
const node: FileTreeNode = {
name: path
.basename
(fsPath
),
path: fsPath,
isDirectory: isDirectory
};
if
(isDirectory
) {
const children = await vscode
.workspace
.fs
.readDirectory
(uri
);
node
.children = [];
for
(const [name, type] of children
) {
const childPath = path
.join
(fsPath, name
);
node
.children
.push
(await this
.getFileTree
(childPath
));
}
}
return node;
}
}
export function deactivate
() {}
这个每次点击文件都会刷新，改进下
本文讲解了如何通过类型转换从HTMLElement到具体标签如HTMLInputElement，从而解锁特定标签的方法，提高DOM元素的操作能力。
扫一扫
5895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
