From 6c222a68610aa94a555f8e626fa55f4f24cb3bb8 Mon Sep 17 00:00:00 2001 From: Richard Willis Date: Sat, 23 May 2020 08:49:12 +0100 Subject: [PATCH] Fix reference to viewsContainers contribution point Also fixed the formatting of the markdown files: - Fix mixed whitespace causing rendering issues - Fix trailing whitespace - Fix other issues by running through prettier --- tree-view-sample/README.md | 8 ++++---- tree-view-sample/USAGE.md | 30 +++++++++++++++--------------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/tree-view-sample/README.md b/tree-view-sample/README.md index 5f802ada..4ecd442f 100644 --- a/tree-view-sample/README.md +++ b/tree-view-sample/README.md @@ -23,10 +23,10 @@ This sample uses following contribution points, activation events and APIs ### Contribution Points - `views` -- `viewContainers` +- `viewsContainers` - `menu` - - `view/title` - - `view/item/context` + - `view/title` + - `view/item/context` ### Activation Events @@ -48,4 +48,4 @@ Refer to [Usage](./USAGE.md) document for more details. - `npm run watch` - `F5` to start debugging - Node dependencies view is shown in Package explorer view container in Activity bar. -- FTP file explorer view should be shown in Explorer \ No newline at end of file +- FTP file explorer view should be shown in Explorer diff --git a/tree-view-sample/USAGE.md b/tree-view-sample/USAGE.md index cbbe7f93..be1df962 100644 --- a/tree-view-sample/USAGE.md +++ b/tree-view-sample/USAGE.md @@ -1,21 +1,20 @@ # Contributing a View Container & View -* Contribute a view container using the [viewContainers](https://code.visualstudio.com/api/references/contribution-points#contributes.viewsContainers) extension point. -* Contribute a view using the [views](https://code.visualstudio.com/api/references/contribution-points#contributes.views) extension point. -* Register a data provider for the view using the [TreeDataProvider](https://code.visualstudio.com/api/references/vscode-api#_TreeDataProvider) API. -* Contribute actions to the view using `view/title` and `view/item/context` locations in [menus](https://code.visualstudio.com/api/references/contribution-points#contributesmenus) extension point. +- Contribute a view container using the [viewsContainers](https://code.visualstudio.com/api/references/contribution-points#contributes.viewsContainers) extension point. +- Contribute a view using the [views](https://code.visualstudio.com/api/references/contribution-points#contributes.views) extension point. +- Register a data provider for the view using the [TreeDataProvider](https://code.visualstudio.com/api/references/vscode-api#_TreeDataProvider) API. +- Contribute actions to the view using `view/title` and `view/item/context` locations in [menus](https://code.visualstudio.com/api/references/contribution-points#contributesmenus) extension point. ## contributes.viewsContainers extension point As of Visual Studio Code v1.23.0, you can move custom views into your own view container which will show up in the activity bar. -To do such, extension writers can add a `viewContainers` object in the contributes section. each object will require three things: +To do such, extension writers can add a `viewsContainers` object in the contributes section. each object will require three things: - `id`: The name of the new view you're creating - `title`: The name which will show up at the top of the view - `icon`: an image which will be displayed for the view container in the activity bar - ## contributes.views extension point You must specify an identifier and name for the view. You can contribute to following locations @@ -26,16 +25,16 @@ You must specify an identifier and name for the view. You can contribute to foll When the user opens the view, VS Code will then emit an activationEvent `onView:${viewId}` (e.g. `onView:nodeDependencies` for the example below). You can also control the visibility of the view by providing the `when` context value. -Following, in the views object, you can then add a field with the same string as the `id` in the `viewContainers`. +Following, in the views object, you can then add a field with the same string as the `id` in the `viewsContainers`. ```json "contributes": { - "viewContainers": { + "viewsContainers": { "activitybar": [ { "id": "package-explorer", - "title": "Package Explorer", - "icon": "media/dep.svg" + "title": "Package Explorer", + "icon": "media/dep.svg" } ] }, @@ -56,9 +55,9 @@ Following, in the views object, you can then add a field with the same string as You can contribute actions at following locations in the view - `view/title`: Location to show actions in the view title. Primary or inline actions use `"group": "navigation"` and rest are secondary actions which are in `...` menu. -- `view/item/context`: Location to show actions for the tree item. Inline actions use `"group": "inline"` and rest are secondary actions which are in `...` menu. +- `view/item/context`: Location to show actions for the tree item. Inline actions use `"group": "inline"` and rest are secondary actions which are in `...` menu. -You can control the visibility of these actions using the `when` property. +You can control the visibility of these actions using the `when` property. Examples: @@ -97,7 +96,7 @@ Examples: { "command": "nodeDependencies.deleteEntry", "when": "view == nodeDependencies && viewItem == dependency" - } + } ] } } @@ -113,13 +112,14 @@ vscode.window.registerTreeDataProvider('nodeDependencies', new DepNodeProvider() See [nodeDependencies.ts](src/nodeDependencies.ts) for the implementation. - ## TreeView If you would like to perform some UI operations on the view programatically, you can use `window.createTreeView` instead of `window.registerDataProvider`. This will give access to the view which you can use for performing view operations. ```typescript -vscode.window.createTreeView('ftpExplorer', { treeDataProvider: new FtpTreeDataProvider() }); +vscode.window.createTreeView('ftpExplorer', { + treeDataProvider: new FtpTreeDataProvider(), +}); ``` See [ftpExplorer.ts](src/ftpExplorer.ts) for the implementation.