Vs Code treeview TreeView

##VS code Tree view treeView

Create a tree view

To create a tree view, you first need to extend it to package.json Add relevant configuration to the file ：

1. establish activitybar：

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

Create an active bar under the view container , Create... Under the activity bar id by "package-explorer" View bar for

2. Create view

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

Create trees Item

According to need , Inheritance creation TreeItem

//  Node object 
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';
}

establish DataProvider

The object is treeItem

stay getChildren Function to recursively implement the tree view .

Its parameters element Is the current object , Initial tree when null , Find its child node when it is not empty .

/** *  Project dependencies are organized into a document tree , And return to his documentation site for each dependency  */
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： Project file path 
	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;
	}

	//  obtain treeItem Function of 
	getChildren(element?: Dependency): Thenable<Dependency[]> {
    
		//  If the path is empty 
		if (!this.workspaceRoot) {
    
			vscode.window.showInformationMessage('No dependency in empty workspace');
			return Promise.resolve([]);
		}

		//  If you already have the current object , Spliced path , Get its file . The way to get sub files is to recursively search .
		if (element) {
    
			return Promise.resolve(this.getDepsInPackageJson(path.join(this.workspaceRoot, 'node_modules', element.label, 'package.json')));
		//  If there is no current object , To determine whether there is a direct existence under the project path package.json
		//  This step is actually used to initialize 
		} else {
    

			const packageJsonPath = path.join(this.workspaceRoot, 'package.json');
			//  There is a direct... Under the project path package.json, Search through this path .
			if (this.pathExists(packageJsonPath)) {
    
				return Promise.resolve(this.getDepsInPackageJson(packageJsonPath));
			//  If still not , Just say no 
			} else {
    
				vscode.window.showInformationMessage('Workspace has no package.json');
				return Promise.resolve([]);
			}
		}
	}

	/** *  Get... Through the path package Inside  */
	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 [];
		}
	}

	//  Function to determine whether the path exists 
	private pathExists(p: string): boolean {
    
		try {
    
			fs.accessSync(p);
		} catch (err) {
    
			return false;
		}
		return true;
	}
}

Register for view DataProvider

const nodeDependenciesProvider = new DepNodeProvider(rootPath);

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