VS code 树视图 treeView

##VS code 树视图 treeView

创建树视图

创建树视图首先需要到扩展到package.json文件中去添加相关配置：

1. 创建activitybar：

"contributes": {
    
		"viewsContainers": {
    
			"activitybar": [
				{
    
					"id": "package-explorer",
					"title": "Package Explorer",
					"icon": "media/dep.svg"
				}
			]
		}
}

在视图容器下创建活动栏，在活动栏下面创建 id为"package-explorer"的视图栏

2. 创建视图

"views": {
    
			"package-explorer": [
				{
    
					"id": "nodeDependencies",
					"name": "Node Dependencies",
					"icon": "media/dep.svg",
					"contextualTitle": "Package Explorer"
				}
			],
}

创建树Item

根据需要，继承创建TreeItem

// 节点对象
export class Dependency extends vscode.TreeItem {
    

	constructor(
		public readonly label: string,
		private readonly version: string,
		public readonly collapsibleState: vscode.TreeItemCollapsibleState,
		public readonly command?: vscode.Command
	) {
    
		super(label, collapsibleState);

		this.tooltip = `${
      this.label}-${
      this.version}`;
		this.description = this.version;
	}

	iconPath = {
    
		light: path.join(__filename, '..', '..', 'resources', 'light', 'dependency.svg'),
		dark: path.join(__filename, '..', '..', 'resources', 'dark', 'dependency.svg')
	};

	contextValue = 'dependency';
}

创建DataProvider

对象为treeItem

在getChildren函数里面递归实现树视图。

其参数element是当前对象，为空时初始树，非空时找寻其孩子节点。

/** * 项目依赖整理成文件树形式，并且对每一个依赖返回他的文档网站 */
export class DepNodeProvider implements vscode.TreeDataProvider<Dependency> {
    

	private _onDidChangeTreeData: vscode.EventEmitter<Dependency | undefined | void> = new vscode.EventEmitter<Dependency | undefined | void>();
	readonly onDidChangeTreeData: vscode.Event<Dependency | undefined | void> = this._onDidChangeTreeData.event;

	// workspace：项目文件路径
	constructor(private workspaceRoot: string | undefined) {
    
		workspaceRoot = path.join(workspaceRoot, 'package.json');
		console.log(workspaceRoot);
	}

	refresh(): void {
    
		this._onDidChangeTreeData.fire();
	}

	getTreeItem(element: Dependency): vscode.TreeItem {
    
		return element;
	}

	// 获取treeItem的函数
	getChildren(element?: Dependency): Thenable<Dependency[]> {
    
		// 如果路径为空
		if (!this.workspaceRoot) {
    
			vscode.window.showInformationMessage('No dependency in empty workspace');
			return Promise.resolve([]);
		}

		// 如果已经有当前对象，拼接好路径，获取其文件。获取子文件的方式是递归搜索。
		if (element) {
    
			return Promise.resolve(this.getDepsInPackageJson(path.join(this.workspaceRoot, 'node_modules', element.label, 'package.json')));
		// 如果没有当前对象，之间判断该项目路径下有没有直接存在的package.json
		// 这一步的作用其实是初始化
		} else {
    

			const packageJsonPath = path.join(this.workspaceRoot, 'package.json');
			// 项目路径下存在直接的package.json,则通过该路径进行搜索。
			if (this.pathExists(packageJsonPath)) {
    
				return Promise.resolve(this.getDepsInPackageJson(packageJsonPath));
			// 如果依然没有，就说没有
			} else {
    
				vscode.window.showInformationMessage('Workspace has no package.json');
				return Promise.resolve([]);
			}
		}
	}

	/** * 通过路径获取package里面的 */
	private getDepsInPackageJson(packageJsonPath: string): Dependency[] {
    
		if (this.pathExists(packageJsonPath)) {
    
			const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
			
			const toDep = (moduleName: string, version: string): Dependency => {
    
				if (this.pathExists(path.join(this.workspaceRoot, 'node_modules', moduleName))) {
    
					return new Dependency(moduleName, version, vscode.TreeItemCollapsibleState.Collapsed);
				} else {
    
					return new Dependency(moduleName, version, vscode.TreeItemCollapsibleState.None, {
    
						command: 'extension.openPackageOnNpm',
						title: '',
						arguments: [moduleName]
					});
				}
			};

			const deps = packageJson.dependencies
				? Object.keys(packageJson.dependencies).map(dep => toDep(dep, packageJson.dependencies[dep]))
				: [];
			const devDeps = packageJson.devDependencies
				? Object.keys(packageJson.devDependencies).map(dep => toDep(dep, packageJson.devDependencies[dep]))
				: [];
			return deps.concat(devDeps);
		} else {
    
			return [];
		}
	}

	// 判断路径是否存在的函数
	private pathExists(p: string): boolean {
    
		try {
    
			fs.accessSync(p);
		} catch (err) {
    
			return false;
		}
		return true;
	}
}

为视图注册DataProvider

const nodeDependenciesProvider = new DepNodeProvider(rootPath);

vscode.window.registerTreeDataProvider('nodeDependencies', nodeDependenciesProvider);