Skip to content

Commit

Permalink
Update Find All References and associated command ids
Browse files Browse the repository at this point in the history
  • Loading branch information
Greg Van Liew committed Dec 5, 2018
1 parent 8214986 commit ef75597
Show file tree
Hide file tree
Showing 21 changed files with 47 additions and 43 deletions.
2 changes: 1 addition & 1 deletion blogs/2017/01/15/connect-nina-e2e.md
Expand Up @@ -98,7 +98,7 @@ In order to orient ourselves within the codebase, let's play around with some ex

<img src="/assets/blogs/2017/01/03/HoverHelp.png" width="200px" /><br />

4. Simply placing your cursor within the span of the name `database`, allows you to quickly see all other references to it within the same file, and right-clicking and selecting `Find All References` allows you to see uses of it project wide.
4. Simply placing your cursor within the span of the name `database`, allows you to quickly see all other references to it within the same file, and right-clicking and selecting **Peek References** allows you to see uses of it project wide.

<img src="/assets/blogs/2017/01/03/WordHighlight.png" width="300px" />

Expand Down
8 changes: 4 additions & 4 deletions docs/customization/keyboard-shortcuts.md
Expand Up @@ -88,11 +88,11 @@ Key|Command
`kb(editor.action.triggerParameterHints)`|Trigger parameter hints
`kb(editor.action.formatDocument)`|Format document
`kb(editor.action.formatSelection)`|Format selection
`kb(editor.action.goToDeclaration)`|Go to Definition
`kb(editor.action.previewDeclaration)`|Peek Definition
`kb(editor.action.openDeclarationToTheSide)`|Open Definition to the side
`kb(editor.action.revealDefinition)`|Go to Definition
`kb(editor.action.peekDefinition)`|Peek Definition
`kb(editor.action.revealDefinitionAside)`|Open Definition to the side
`kb(editor.action.quickFix)`|Quick Fix
`kb(editor.action.referenceSearch.trigger)`|Show References
`kb(editor.action.referenceSearch.trigger)`|Peek References
`kb(editor.action.rename)`|Rename Symbol
`kb(editor.action.inPlaceReplace.down)`|Replace with next value
`kb(editor.action.inPlaceReplace.up)`|Replace with previous value
Expand Down
8 changes: 4 additions & 4 deletions docs/editor/editingevolved.md
Expand Up @@ -25,7 +25,7 @@ Alternatively, you can use `kb(workbench.action.navigateBack)` and `kb(workbench
## Go to Definition

If a [language](/docs/languages/overview.md) supports it, you can go to the definition of a symbol by pressing `kb(editor.action.goToDeclaration)`.
If a [language](/docs/languages/overview.md) supports it, you can go to the definition of a symbol by pressing `kb(editor.action.revealDefinition)`.

If you press `kbstyle(Ctrl)` and hover over a symbol, a preview of the declaration will appear:

Expand Down Expand Up @@ -55,9 +55,9 @@ Some languages support jumping to a symbol across files with `kb(workbench.actio

## Peek

We think there's nothing worse than a big context switch when all you want is to quickly check something. That's why we support peeked editors. When you execute a **Find All References** search (via `kb(editor.action.referenceSearch.trigger)`), or a **Peek Definition** (via `kb(editor.action.previewDeclaration)`), we embed the result inline:
We think there's nothing worse than a big context switch when all you want is to quickly check something. That's why we support peeked editors. When you execute a **Peek References** search (via `kb(editor.action.referenceSearch.trigger)`), or a **Peek Definition** (via `kb(editor.action.peekDefinition)`), we embed the result inline:

![Find All References](images/editingevolved/references.png)
![Peek References](images/editingevolved/references.png)

You can navigate between different references in the peeked editor and make quick edits right there. Clicking on the peeked editor filename or double-clicking in the result list will open the reference in the outer editor.

Expand All @@ -77,7 +77,7 @@ Some languages like C# support inline reference information, that is updated liv

![Reference information](images/editingevolved/referenceinfo.png)

> **Tip:** Directly invoke the **Find All References** action by clicking on these annotations.
> **Tip:** Directly invoke the **Peek References** action by clicking on these annotations.
> **Tip:** Reference information shown in CodeLens can be turned on or off through the `editor.codeLens` setting.
Expand Down
12 changes: 6 additions & 6 deletions docs/getstarted/keybindings.md
Expand Up @@ -258,8 +258,8 @@ findWidgetVisible | Editor Find widget is visible.
suggestWidgetVisible | Suggestion widget (IntelliSense) is visible.
suggestWidgetMultipleSuggestions | Multiple suggestions are displayed.
renameInputVisible | Rename input text box is visible.
referenceSearchVisible | Find All References peek window is open.
inReferenceSearchEditor | The Find All References peek window editor has focus.
referenceSearchVisible | Peek References peek window is open.
inReferenceSearchEditor | The Peek References peek window editor has focus.
config.editor.stablePeek | Keep peek editors open (controlled by `editor.stablePeek` setting).
quickFixWidgetVisible | Quick Fix widget is visible.
parameterHintsVisible | Parameter hints are visible (controlled by `editor.parameterHints` setting).
Expand Down Expand Up @@ -416,12 +416,12 @@ Key|Command|Command id
`kb(editor.action.triggerParameterHints)`|Trigger Parameter Hints|`editor.action.triggerParameterHints`
`kb(editor.action.formatDocument)`|Format Document|`editor.action.formatDocument`
`kb(editor.action.formatSelection)`|Format Selection|`editor.action.formatSelection`
`kb(editor.action.goToDeclaration)`|Go to Definition|`editor.action.goToDeclaration`
`kb(editor.action.revealDefinition)`|Go to Definition|`editor.action.revealDefinition`
`kb(editor.action.showHover)`|Show Hover|`editor.action.showHover`
`kb(editor.action.previewDeclaration)`|Peek Definition|`editor.action.previewDeclaration`
`kb(editor.action.openDeclarationToTheSide)`|Open Definition to the Side|`editor.action.openDeclarationToTheSide`
`kb(editor.action.peekDefinition)`|Peek Definition|`editor.action.peekDefinition`
`kb(editor.action.revealDefinitionAside)`|Open Definition to the Side|`editor.action.revealDefinitionAsidee`
`kb(editor.action.quickFix)`|Quick Fix|`editor.action.quickFix`
`kb(editor.action.referenceSearch.trigger)`|Show References|`editor.action.referenceSearch.trigger`
`kb(editor.action.referenceSearch.trigger)`|Peek References|`editor.action.referenceSearch.trigger`
`kb(editor.action.rename)`|Rename Symbol|`editor.action.rename`
`kb(editor.action.inPlaceReplace.down)`|Replace with Next Value|`editor.action.inPlaceReplace.down`
`kb(editor.action.inPlaceReplace.up)`|Replace with Previous Value|`editor.action.inPlaceReplace.up`
Expand Down
10 changes: 7 additions & 3 deletions docs/getstarted/tips-and-tricks.md
Expand Up @@ -600,19 +600,23 @@ Select a symbol then type `kb(editor.action.peekImplementation)`. Alternatively,

### Go to Definition

Select a symbol then type `kb(editor.action.goToDeclaration)`. Alternatively, you can use the context menu or `kbstyle(Ctrl+click)` (`kbstyle(Cmd+click)` on macOS).
Select a symbol then type `kb(editor.action.revealDefinition)`. Alternatively, you can use the context menu or `kbstyle(Ctrl+click)` (`kbstyle(Cmd+click)` on macOS).

![go to definition](images/tips-and-tricks/goto_definition.gif)

You can go back to your previous location with the **Go** > **Back** command or `kb(workbench.action.navigateBack)`.

You can also see the type definition if you press `kbstyle(Ctrl)` (`kbstyle(Cmd)` on macOS) when you are hovering over the type.

### Find All References
### Peek References

Select a symbol then type `kb(editor.action.referenceSearch.trigger)`. Alternatively, you can use the context menu.

![find all references](images/tips-and-tricks/find_all_references.gif)
![peek references](images/tips-and-tricks/find_all_references.gif)

### Find All References view

Select a symbol then type `kb(references-view.find) to open the References view showing all your file's symbols in a dedicated view.

### Rename Symbol

Expand Down
2 changes: 1 addition & 1 deletion docs/java/extensions.md
Expand Up @@ -76,7 +76,7 @@ Here's a list of Azure extensions supporting Java:

* The [Azure Tools for VS Code](https://marketplace.visualstudio.com/items?itemName=bradygaster.azuretoolsforvscode) adds commands to the **Command Palette** (`kb(workbench.action.showCommands)`) that make it easy to create and access Azure resources directly from VS Code. For example, you can create App Service Web Apps and Functions, Storage accounts, and browse to any number of resources in the Azure Portal.

* The [Azure Resource Manager (ARM) Tools](https://marketplace.visualstudio.com/items?itemName=msazurermtools.azurerm-vscode-tools) provide a rich editing experience for Azure Resource Manager deployment templates and template language expressions. For example, IntelliSense for TLE function names, parameter references, signature help, Go to Definition, Peek Definition, and Find All References (Shift+F12) as well as Errors and Warnings, making it quick and easy to author ARM templates in VS Code.
* The [Azure Resource Manager (ARM) Tools](https://marketplace.visualstudio.com/items?itemName=msazurermtools.azurerm-vscode-tools) provide a rich editing experience for Azure Resource Manager deployment templates and template language expressions. For example, IntelliSense for TLE function names, parameter references, signature help, Go to Definition, Peek Definition, and Peek References as well as Errors and Warnings, making it quick and easy to author ARM templates in VS Code.

* The [Azure CLI Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.azurecli) provide an enhanced editing experience when authoring Azure CLI 2.0 commands, with full completions (IntelliSense), the ability to invoke one or more commands in the terminal, and the ability to easily view and format results as a separate JSON document.

Expand Down
4 changes: 2 additions & 2 deletions docs/languages/cpp.md
Expand Up @@ -236,7 +236,7 @@ Alternatively, you can search for symbols by accessing these commands through th

You can take a quick look at how a symbol was defined by using the Peek Definition feature. This feature displays a few lines of code near the definition inside a peek window so you can take a look without navigating away from your current location.

To peek at a symbol's definition, place your cursor on the symbol anywhere it's used in your source code and then press `kb(editor.action.previewDeclaration)`. Alternatively, you can choose **Peek Definition** from the context menu (right-click, then choose **Peek Definition**).
To peek at a symbol's definition, place your cursor on the symbol anywhere it's used in your source code and then press `kb(editor.action.peekDefinition)`. Alternatively, you can choose **Peek Definition** from the context menu (right-click, then choose **Peek Definition**).

![Peek definition](images/cpp/peekdefn.png)

Expand All @@ -248,7 +248,7 @@ With the peek window open, you browse the list of competing definitions to find

You can also quickly navigate to where a symbol is defined by using the Go to Definition feature.

To go to a symbol's definition, place your cursor on the symbol anywhere it is used in your source code and then press `kb(editor.action.goToDeclaration)`. Alternatively, you can choose **Go to Definition** from the context menu (right-click, then choose **Go to Definition**). When there's only one definition of the symbol, you'll navigate directly to its location, otherwise the competing definitions are displayed in a peek window as described in the previous section and you have to choose the definition that you want to go to.
To go to a symbol's definition, place your cursor on the symbol anywhere it is used in your source code and then press `kb(editor.action.revealDefinition)`. Alternatively, you can choose **Go to Definition** from the context menu (right-click, then choose **Go to Definition**). When there's only one definition of the symbol, you'll navigate directly to its location, otherwise the competing definitions are displayed in a peek window as described in the previous section and you have to choose the definition that you want to go to.

## Debugging

Expand Down
6 changes: 3 additions & 3 deletions docs/languages/go.md
Expand Up @@ -47,9 +47,9 @@ The extension's signature help also uses `godef` and `godoc`. You can choose to

Code navigation features are available in the context menu in the editor.

- **Go To Definition** `kb(editor.action.goToDeclaration)` - Go to the source code of the type definition.
- **Peek Definition** `kb(editor.action.previewDeclaration)` - Bring up a Peek window with the type definition.
- **Find All References** `kb(editor.action.referenceSearch.trigger)` - Find all references for the type.
- **Go To Definition** `kb(editor.action.revealDefinition)` - Go to the source code of the type definition.
- **Peek Definition** `kb(editor.action.peekDefinition)` - Bring up a Peek window with the type definition.
- **Peek References** `kb(editor.action.referenceSearch.trigger)` - Show all references for the type.

You can navigate via symbol search using the **Go to Symbol** commands from the **Command Palette** (`kb(workbench.action.showCommands)`).

Expand Down
4 changes: 2 additions & 2 deletions docs/languages/java.md
Expand Up @@ -70,13 +70,13 @@ To search for a symbol in the current workspace, start by pressing `kb(workbench

You can take a quick look at how a symbol was defined by using the Peek Definition feature. This feature displays a few lines of code near the definition inside a peek window so you can take a look without navigating away from your current location.

To peek at a symbol's definition, place your cursor on the symbol anywhere it's used in your source code and then press `kb(editor.action.previewDeclaration)`. Alternatively, you can choose __Peek Definition__ from the context menu (right-click, then choose __Peek Definition__).
To peek at a symbol's definition, place your cursor on the symbol anywhere it's used in your source code and then press `kb(editor.action.peekDefinition)`. Alternatively, you can choose __Peek Definition__ from the context menu (right-click, then choose __Peek Definition__).

### Go to Definition

You can also quickly navigate to where a symbol is defined by using the Go to Definition feature.

To go to a symbol's definition, place your cursor on the symbol anywhere it is used in your source code and then press `kb(editor.action.goToDeclaration)`. Alternatively, you can choose __Go to Definition__ from the context menu (right-click, then choose __Go to Definition__). When there's only one definition of the symbol, you'll navigate directly to its location, otherwise the competing definitions are displayed in a peek window as described in the previous section and you have to choose the definition that you want to go to.
To go to a symbol's definition, place your cursor on the symbol anywhere it is used in your source code and then press `kb(editor.action.revealDefinition)`. Alternatively, you can choose __Go to Definition__ from the context menu (right-click, then choose __Go to Definition__). When there's only one definition of the symbol, you'll navigate directly to its location, otherwise the competing definitions are displayed in a peek window as described in the previous section and you have to choose the definition that you want to go to.

Other code editing features include:

Expand Down
4 changes: 2 additions & 2 deletions docs/languages/javascript.md
Expand Up @@ -9,9 +9,9 @@ MetaDescription: Get the best out of Visual Studio Code for JavaScript developme
---
# JavaScript in Visual Studio Code

Visual Studio Code provides IntelliSense, debugging, and powerful editor features for JavaScript. VS Code uses the [JavaScript language service](https://github.com/Microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio) to make authoring JavaScript easy. In addition to syntactical features like format, format on type and outlining, you also get language service features such as **Peek Definition**, **Go to Definition**, **Find all References**, and **Rename Symbol**.
Visual Studio Code provides IntelliSense, debugging, and powerful editor features for JavaScript. VS Code uses the [JavaScript language service](https://github.com/Microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio) to make authoring JavaScript easy. In addition to syntactical features like format, format on type and outlining, you also get language service features such as **Peek Definition**, **Go to Definition**, **Peek References**, and **Rename Symbol**.

![JavaScript find all references](images/javascript/javascript_find_all_references.png)
![JavaScript peek references](images/javascript/javascript_find_all_references.png)

## IntelliSense

Expand Down
2 changes: 1 addition & 1 deletion docs/languages/typescript.md
Expand Up @@ -41,7 +41,7 @@ VS Code's TypeScript support can operate in two different modes:

* **Explicit Project**: A TypeScript project is defined via a `tsconfig.json` file. The presence of such a file in a directory indicates that the directory is the root of a TypeScript project. The file itself lists the files belonging to the project as well as compiler options. Details about the `tsconfig.json` file can be found [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).

>**Tip:** We recommend that you use explicit projects over file scope projects. Since explicit projects list the files belonging to a project language, features like `Find All References` `kb(editor.action.referenceSearch.trigger)` consider the project scope and not the file scope only.
>**Tip:** We recommend that you use explicit projects over file scope projects. Since explicit projects list the files belonging to a project language, features like **Peek References** `kb(editor.action.referenceSearch.trigger)` consider the project scope and not the file scope only.
## tsconfig.json

Expand Down
2 changes: 1 addition & 1 deletion docs/nodejs/angular-tutorial.md
Expand Up @@ -74,7 +74,7 @@ VS Code uses the TypeScript language service for code intelligence ([IntelliSens

### Go to Definition, Peek definition

Through the TypeScript language service, VS Code can also provide type definition information in the editor through **Go to Definition** (`kb(editor.action.gotodeclaration)`) or **Peek Definition** (`kb(editor.action.peekImplementation)`). Open the `app.module.ts` file and put the cursor over `AppComponent` in the `bootstrap` property declaration, right click and select **Peek Definition**. A [Peek window](/docs/editor/editingevolved.md#peek) will open showing the `AppComponent` definition from `app.component.ts`.
Through the TypeScript language service, VS Code can also provide type definition information in the editor through **Go to Definition** (`kb(editor.action.revealDefinition)`) or **Peek Definition** (`kb(editor.action.peekImplementation)`). Open the `app.module.ts` file and put the cursor over `AppComponent` in the `bootstrap` property declaration, right click and select **Peek Definition**. A [Peek window](/docs/editor/editingevolved.md#peek) will open showing the `AppComponent` definition from `app.component.ts`.

![angular peek definition](images/angular/peek-definition.png)

Expand Down
2 changes: 1 addition & 1 deletion docs/nodejs/emberjs-tutorial.md
Expand Up @@ -75,7 +75,7 @@ If you select a method, you'll also get parameter help:

### Go to Definition, Peek definition

Through the TypeScript language service, VS Code can also provide type definition information in the editor through **Go to Definition** (`kb(editor.action.gotodeclaration)`) or **Peek Definition** (`kb(editor.action.peekImplementation)`). Put the cursor over `Application`, right click and select **Peek Definition**. A [Peek window](/docs/editor/editingevolved.md#peek) will open showing the `Application` definition from `ember_application` Type Declaration file.
Through the TypeScript language service, VS Code can also provide type definition information in the editor through **Go to Definition** (`kb(editor.action.revealDefinition)`) or **Peek Definition** (`kb(editor.action.peekImplementation)`). Put the cursor over `Application`, right click and select **Peek Definition**. A [Peek window](/docs/editor/editingevolved.md#peek) will open showing the `Application` definition from `ember_application` Type Declaration file.

![react peek definition](images/emberjs/peek-definition.png)

Expand Down
2 changes: 1 addition & 1 deletion docs/nodejs/reactjs-tutorial.md
Expand Up @@ -80,7 +80,7 @@ If you select a method, you'll also get parameter help:

### Go to Definition, Peek definition

Through the TypeScript language service, VS Code can also provide type definition information in the editor through **Go to Definition** (`kb(editor.action.gotodeclaration)`) or **Peek Definition** (`kb(editor.action.peekImplementation)`). Put the cursor over the `App`, right click and select **Peek Definition**. A [Peek window](/docs/editor/editingevolved.md#peek) will open showing the `App` definition from `App.js`.
Through the TypeScript language service, VS Code can also provide type definition information in the editor through **Go to Definition** (`kb(editor.action.revealDefinition)`) or **Peek Definition** (`kb(editor.action.peekImplementation)`). Put the cursor over the `App`, right click and select **Peek Definition**. A [Peek window](/docs/editor/editingevolved.md#peek) will open showing the `App` definition from `App.js`.

![react peek definition](images/reactjs/peek-definition.png)

Expand Down

0 comments on commit ef75597

Please sign in to comment.