Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add Cody tutorial content to docs #300

Merged
merged 5 commits into from
May 8, 2024
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 126 additions & 0 deletions docs/cody/use-cases/vsc-tutorial.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
# Cody Tutorial

## Code Autocomplete

![](https://storage.googleapis.com/sourcegraph-assets/blog/vs-code-onboarding-walkthrough-dec-2023-cody-autocomplete-tsx.gif)

Start writing code and Cody will complete the line (or the entire function) for you. Hit tab to accept the suggestion.

**✨ Pro-tips for using Cody autocomplete**

• Autocomplete uses the surrounding code and context to inform the suggestions, so if you need to guide it you can add a comment above the line you're editing.

• You can hover over the grey suggestion to see a toolbar of alternative suggestions, as well as other options such as accepting a single word at a time.

• You can use the "Trigger Autocomplete at Cursor" command to trigger a code suggestion at any time, using the default keyboard shortcut of `Option` `\` on macOS and `Alt` `\` on Windows & Linux.

## Chat

![](https://storage.googleapis.com/sourcegraph-assets/blog/blog-vscode-v018-release/blog-v018-context-controls-002.gif)

Answer questions about general programming topics, or specific to your codebase, with Cody chat. You can choose between LLMs, @-mentions files and symbols, and enable enhanced repository-wide code context.

You can start a chat at any time using the default keyboard shortcut of `Option` `/` on macOS and `Alt` `/` on Windows & Linux.

**✨ Pro-tips for using Cody chat**

• Enabling “Enhanced Context”, and tagging specific files and symbols, gives the selected LLM more context to help answer your questions more accurately.

• If you want to chat directly with the LLM without any additional context adding, disable "Enhanced Context".

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

• You can increase the quality of your chat responses by enabling "Search Context (Beta)" in your [Cody Settings](command:cody.status-bar.interacted).

## Cody Commands

![](https://storage.googleapis.com/sourcegraph-assets/blog/vs-code-onboarding-walkthrough-dec-2023-explain.gif)

Cody has a range of commands for explaining code, generating unit tests, adding documentation, and more.

To get started: select code in your editor, right click, and choose a command from the "Cody" menu.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To get started: select code in your editor, right click, and choose a command from the "Cody" menu.
To get started, select code in your editor, right-click, and choose a command from the "Cody" menu.


You can also use the [Cody: Commands Menu](command:cody.menu.commands) which has the default keyboard shortcut of `Option` `C` on macOS and `Alt` `C` on Windows & Linux.

**✨ Pro-tips for using Cody commands**

• You can build your own [Custom Commands (Beta)](https://sourcegraph.com/docs/cody/custom-commands) with custom prompts, output into chat or perform code edits, and more.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
• You can build your own [Custom Commands (Beta)](https://sourcegraph.com/docs/cody/custom-commands) with custom prompts, output into chat or perform code edits, and more.
• You can build your own [Custom Commands (Beta)](/cody/capabilities/custom-commands) with custom prompts, output into chat or perform code edits, and more.

Add relative paths for links


## Edit Code

You can ask Cody to perform code edits using the Edit Code command. This will edit code according to your instructions, giving you the chance to retry the edit with a new prompt, undo, or accept the change.

To get started: select code in your editor, right click, and choose "Cody → Edit Code".
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To get started: select code in your editor, right click, and choose "Cody Edit Code".
To get started, select code in your editor, right-click, and choose "Cody > Edit Code".


You can also use the default keyboard shortcut of `Option` `K` on macOS and `Alt` `K` on Windows & Linux.

**✨ Pro-tips for code editing with Cody**

• You can open the 💡 menu, with an "Cody: Edit Code" option, by selecting any line of code and using the keyboard short `Command` `.` on macOS or `Crtl` `.` on Windows & Linux.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

• If you start an empty line and open the 💡 menu (using the keyboard short `Command` `.` on macOS or `Crtl` `.` on Windows & Linux) you can use "Cody: Generate Code" to generate new lines of code based on instructions.

• You define your own custom code editing commands using [Custom Commands (Beta)](https://sourcegraph.com/docs/cody/custom-commands), by setting the [`commands.<id>.mode` property](https://sourcegraph.com/docs/cody/capabilities/commands#commands-id-mode).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
• You define your own custom code editing commands using [Custom Commands (Beta)](https://sourcegraph.com/docs/cody/custom-commands), by setting the [`commands.<id>.mode` property](https://sourcegraph.com/docs/cody/capabilities/commands#commands-id-mode).
• You define your own custom code editing commands using [Custom Commands (Beta)](/cody/capabilities/custom-commands), by setting the [`commands.<id>.mode` property](/cody/capabilities/commands).


## Explain Code

<video autoPlay muted loop playsInline>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<video autoPlay muted loop playsInline>
<video width="1920" height="1080" loop playsInline controls style={{ width: '100%', height: 'auto' }}>
<source src="https://storage.googleapis.com/sourcegraph-assets/website/Product%20Animations/cody-explain-code-aug2023.mp4" type="video/mp4"/>
</video>

The correct format to add a video component.

<source
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<source

type="video/mp4"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
type="video/mp4"

src="https://storage.googleapis.com/sourcegraph-assets/website/Product%20Animations/cody-explain-code-aug2023.mp4"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
src="https://storage.googleapis.com/sourcegraph-assets/website/Product%20Animations/cody-explain-code-aug2023.mp4"

/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/>

</video>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
</video>


Use Cody to get an in-depth explanation of any piece of code in any programming language.

To get started: select code in your editor, right click, and choose "Cody → Explain Code".

You can also run this command from the [Cody: Commands Menu](command:cody.menu.commands), which has the default keyboard shortcut of `Option` `C` on macOS and `Alt` `C` on Windows & Linux.

**✨ Pro-tips for understanding code with Cody**

• Cody can also explain errors too, with the "Ask Cody to Explain" option in the 💡 menus, or by right clicking on any items in the "Problems" tab of VS Code.

• You can define your own custom code explain commands to suit, such as prompt that requests an explanation focused on potential security issues, using [Custom Commands (Beta)](https://sourcegraph.com/docs/cody/custom-commands).

## Fix Code

![](https://storage.googleapis.com/sourcegraph-assets/blog/vs-code-onboarding-walkthrough-dec-2023-ask-to-fix.gif)

Something wrong with your code? Use Cody’s "Ask Cody to Fix" command to fix it, or explain the problem.

**✨ Pro-tips for fixing code with Cody**

• You can open the 💡 menu, with an "Ask Cody to Fix" option, by moving the cursor over any line of code with an error and using the keyboard short `Command` `.` on macOS or `Crtl` `.` on Windows & Linux.

• You can also right click on any items in the "Problems" tab of VS Code and select "Ask Cody to Fix"

## Keyboard Shortcuts

Cody offers an extensive set of default key bindings (keyboard shortcuts) to make it easy for you to perform various actions using the keyboard. You can also update these bindings in the `Keyboard Shortcuts Editor`.

### Keyboard Shortcuts Editor

The `Keyboard Shortcuts Editor` allows you to easily update the default bindings (keyboard shortcuts). This is particularly useful if the default key bindings conflict with your current or preferred key bindings. By accessing the `Keyboard Shortcuts Editor`, you can search for specific commands, reassign keybindings, and customize your keyboard shortcuts to suit your workflow.

### Getting Started

To get started:
1. Click on the **Keyboard Shortcuts** icon in the Cody sidebar under `**SETTINGS AND SUPPORT**` to open the `Keyboard Shortcuts Editor`.
2. In the `Keyboard Shortcuts Editor`, you can search for a specific command by typing in the search bar.
3. Once you have found the command you want to reassign keybindings for, click on it to select it.
4. Follow the instruction on screen to assign a new keybinding.

**✨ Pro-tips for assigning keyboard shortcuts for Cody**

• You can assign key bindings (keyboard shortcuts) to individual custom commands.

## Natural Language Search

![](https://storage.googleapis.com/sourcegraph-assets/blog/vs-code-onboarding-walkthrough-dec-2023-natural-language.gif)

Cody builds a Search index of your local files to make it easier to find what you’re looking for. Use a natural language query like “password hashing” or "connection retries" to quickly find and open the files that match your search.

**✨ Pro-tips for using Cody’s Natural Language Search**

• Increase the quality of your chat responses by enabling "Search Context (Beta)" in your [Cody Settings](command:cody.status-bar.interacted). This enables chat to use the natural language search index as a context source.

• You can search file and symbol names too, not just natural language queries.