Skip to content

vs-code.md

Latest commit

 

History

History
810 lines (515 loc) · 27.5 KB

vs-code.md

File metadata and controls

810 lines (515 loc) · 27.5 KB

VS Code

Table of contents

Important

The first keyboard shortcut is always for Linux. It usually coincides with the shortcut for Windows.

You can check shortcuts for your platform in the reference.

What is VS Code

VS Code (Visual Studio Code) is a free, open-source code editor made by Microsoft. It provides features like syntax highlighting, a built-in terminal, extensions, and Git integration.

Docs:

Basic Layout

Default user interface (UI).

Docs:

Schema that we use in docs:

Basic Layout schema

Custom Layout

Custom UI appearance.

Docs:

Actions:

Move the Primary Sidebar to the right

Move the Primary Sidebar to the right so that it doesn't move your code whenever the Primary Sidebar opens.

Change the workspace settings if you don't like that the Primary Sidebar on the right side.

Editor

Space where you can edit files.

Location: see Basic Layout.

Docs:

Activity Bar

Menus of extensions on a side of the Editor.

Location: see Basic Layout.

Primary Sidebar

Views on a side of the Editor. See Basic Layout.

Docs:

Actions:

Open the Primary Sidebar

For example, open the Source Control.

Switch between Primary Sidebar views

Click icons in the Activity Bar.

Status Bar

Statuses and menus of extensions at the bottom of the VS Code window.

Status Bar (left)

Status Bar (right)

Editor Toolbar

Quick actions buttons located above the Editor.

Editor Toolbar

Command Palette

Run editor commands in VS Code.

Docs:

Actions:

Open the Command Palette

  1. Press Ctrl+Shift+P (Cmd+Shift+P on macOS).

Run a command using the Command Palette

  1. Open the Command Palette.
  2. Start typing a command.
  3. Select the necessary command.

Select an option from a list

Method 1:

  1. Click the option.

Method 2:

  1. Change the highlighted option using UpArrow and DownArrow on your keyboard.
  2. Press Enter to confirm the option.

Panel Toolbar

Switch between panels.

Location: see Basic Layout.

Left side with tabs:

Panel Toolbar Left

Right side (depends on the current tab; this one is for the VS Code Terminal):

Panel Toolbar Right

VS Code Terminal

Run terminal commands inside VS Code.

Docs:

Actions:

Open the VS Code Terminal

Press Ctrl+` (Cmd+` on macOS)

Close the VS Code Terminal

Press Ctrl+` (Cmd+` on macOS)

Open a new VS Code Terminal

Method 1:

  1. Press Ctrl+Shift+` (Cmd+Shift+` on macOS).

Method 2:

  1. Open the VS Code Terminal.

  2. Click the + icon.

    New Terminal

Switch to another VS Code Terminal

Method 1:

  1. Open the VS Code Terminal.

  2. Click a terminal tab in the terminal panel.

    Switch Terminal

Method 2:

  1. Open the VS Code Terminal.
  2. Press Ctrl+PageDown / Ctrl+PageUp (Cmd+Shift+] / Cmd+Shift+[ on macOS).

Delete a VS Code Terminal

  1. Open the VS Code Terminal.

  2. Look at the open VS Code Terminals.

  3. Go to the VS Code Terminal that should be deleted.

  4. Delete the terminal.

    Terminal - Delete Terminal

Copy text inside the VS Code Terminal

  1. Select text.
  2. Press Ctrl+Shift+C (Cmd+C on macOS).

Paste text inside the VS Code Terminal

Ctrl+Shift+V (Cmd+V on macOS, Ctrl+V on Windows)

Look at the open VS Code Terminals

  1. Open the VS Code Terminal.

  2. Look at the sidebar with a list of VS Code Terminals.

    Open Terminals

    Open Terminals - Narrow

    If you don't see a list of VS Code Terminals on the right, you have only one VS Code Terminal open.

  3. (Optional) Expand the sidebar with open VS Code Terminals.

Look at the current VS Code Terminal

  1. Open the VS Code Terminal.
  2. Look at one of these:

Check the current shell in the VS Code Terminal

  1. Look at the current VS Code Terminal.

    You should see on:

Expand the sidebar with open VS Code Terminals

  1. Open the VS Code Terminal.

  2. Hover, click, and move the mouse:

    Terminal - Expand Open Terminals

(Windows only) Switch to the Linux shell for the VS Code Terminal

  1. Make sure you can run VS Code in WSL.

  2. Reopen the directory in WSL

  3. Run using the Command Palette: Terminal: Select Default Profile.

  4. There can be the following cases.

  5. Open the VS Code Terminal.

  6. Delete all VS Code Terminals.

  7. Open a new VS Code Terminal.

Run a command in the VS Code Terminal

  1. Open the VS Code Terminal.
  2. Check the current shell in the VS Code Terminal.
  3. Write or paste a command.
  4. Press Enter.

Explorer

View the file tree.

Location: Activity Bar.

Docs:

Actions:

Open the Explorer

  1. Go to the Activity Bar.

  2. Click the Explorer icon.

    Explorer

Open the local file using the Explorer

  1. Open the Explorer.
  2. Search for the file in the file tree.
  3. Click it.

Source Control

Interact with Git via VS Code UI.

Docs:

Actions:

Open the Source Control

Method 1:

  1. Go to the Activity Bar.

  2. Click Source Control.

    Activity Bar - Source Control

  3. Click CHANGES to uncollapse the view.

    Source Control - Changes

Method 2:

  1. Press Ctrl+Shift+G G (Ctrl+Shift+G on macOS)
  2. Click CHANGES to uncollapse the view.

Close the Source Control

Method 1:

  1. Go to the Activity Bar

  2. Click Source Control.

    Explorer

Method 2:

  1. Click outside of the Editor.
  2. Press Ctrl+B (Cmd+B on macOS).

Extensions

Install extensions for VS Code from VS Code Marketplace to enable new functionality.

Docs:

Actions:

Open the Extensions

Method 1:

  1. Go to the Activity Bar.
  2. Click the icon Extensions.

Method 2:

  1. Press Ctrl+Shift+X (Cmd+Shift+X on macOS).

Install the VS Code extension

  1. Open the Extensions.
  2. Write:

    • Option 1: the extension name

      Example: GitHub Copilot Chat

    • Option 2: the extension identifier

      Format: <extension-publisher>.<extension-name>

      Example: github.copilot-chat.

  3. Click the extension.
  4. Click Install.

Filter the VS Code extensions

  1. Open the Extensions.

  2. Click the icon Filter Extensions....

    Filter Extensions

  3. A menu will open.

  4. Select a filter in the menu and click it to apply the filter.

Install the recommended VS Code extensions

Note

Recommended extensions are listed in .vscode/extensions.json.

  1. Open in VS Code the directory that contains .vscode/extensions.json.

  2. Filter the VS Code extensions.

  3. Click Recommended in the menu.

  4. Click WORKSPACE RECOMMENDATIONS to uncollapse this view.

  5. Click the icon Install Workspace Recommended extensions.

    Install Workspace Recommended Extensions

Tip: (Windows only) If you want these extensions to be available when you open VS Code not in WSL, complete these steps again without first opening the directory in WSL .

Keyboard shortcuts

Keyboard shortcuts for various commands.

Docs:

Frequently used shortcuts

Shortcut: Go back

Ctrl+Alt+- (Ctrl+- on macOS)

You can set another shortcut:

  • <command-name> is Go Back;
  • Get the Alt+- shortcut by typing Alt, then -.

Shortcut: Switch to the previous editor

Ctrl+Tab

Shortcut: Search in the current editor

Ctrl+F (Cmd+F on macOS)

Shortcut: Search in all files

Ctrl+Shift+F (Cmd+Shift+F on macOS)

Shortcut: Toggle line comment

  1. Select a line or place cursor at that line.
  2. Press Ctrl+/ (Cmd+/ on macOS)

Tip

This shortcut also works for a sequence of lines:

  1. Select lines.
  2. Press the shortcut.

Set a shortcut

  1. Run using the Command Palette: Preferences: Open Keyboard Shortcuts.
  2. Write the keybinding name.
  3. In the Command column, find the <command-name>.
  4. Double-click the row with that command.
  5. Type the shortcut.
  6. (Optional) Press Esc to reset the input.
  7. Press Enter to save the shortcut.

Workspace settings

VS Code settings for the workspace.

Docs:

Settings for this workspace are in .vscode/settings.json.

Change the workspace settings

Here are some workspace settings that you can change:

  • files.autoSave - Enabled to save your work if VS Code closes;
  • editor.formatOnSave - Enabled to run formatters when you press Ctrl+S (or Cmd+S on macOS) to save code.
  • Markdown editor and preview synchronization settings - Disabled for smoother scrolling of the editor and the preview.

Common actions

Open the directory

Note

The <directory-name> is the name of a directory that you want to open.

Example: software-engineering-toolkit

  1. Run using the Command Palette: File: Open Folder...

  2. Find the directory <directory-name>.

  3. Open this directory.

    VS Code should now open in that directory.

  4. Open the Explorer.

    You should see <DIRECTORY-NAME> there.

    Example: SOFTWARE-ENGINEERING-TOOLKIT

  5. (Windows only) Reopen the directory in WSL to use the file system of Linux.

(Windows only) Open the directory in WSL

  1. Run using the Command Palette: WSL: Open Folder in WSL...
  2. Click Show Local.
  3. Select the directory.
  4. Check the current shell in the VS Code Terminal.

(Windows only) Reopen the directory in WSL

  1. Run using the Command Palette: WSL: Reopen Folder in WSL.
  2. Choose Ubuntu 24.04.
  3. If you don't see such an option, set up running VS Code in WSL

Open the file

Open the file using Quick Open

  1. Press Ctrl+P (Cmd+P on macOS).
  2. Start typing the name of the file.
  3. Select the file.

Open the file using code

  1. Open a new VS Code Terminal if something is running in your current VS Code Terminal.

  2. To open a file from the terminal,

    run in the VS Code Terminal:

    code <file-path>

    See <file-path>.

    Note: the file will be created if it doesn't yet exist.

  3. Troubleshooting

    (macOS only) command code doesn't exist

    Add VS Code to PATH.

Open the file using a context menu

  1. Right-click a file.
  2. Find Open with... or similar.
  3. Choose VS Code.

Open the Markdown preview

Note

See Markdown.

Method 1:

  1. Go to the Editor Toolbar.
  2. Click Open Preview to the Side.

Method 2:

  1. Run using the Command Palette:

Markdown: Open Preview to the Side

Language server

A language server provides smart features for a programming language: type information, documentation, navigation, and refactoring.

VS Code uses the Language Server Protocol to communicate with language servers.

Docs:

Actions:

Type on hover

  1. Hover over a variable, function, or other symbol.
  2. A tooltip will show the type information.

Docs on hover

  1. Hover over a variable, function, or other symbol.
  2. A tooltip will show the documentation (if available).

Go to the definition

Method 1:

  1. Hold Ctrl/Alt (Cmd on macOS).
  2. Click the symbol.

Method 2:

  1. Right-click the symbol.
  2. Click Go to Definition.

Method 3:

  1. Place the cursor on the symbol.
  2. Press F12.

Rename a symbol

Method 1:

  1. Right-click the symbol.
  2. Click Rename Symbol.
  3. Type the new name.
  4. Press Enter.

Method 2:

  1. Place the cursor on the symbol.
  2. Press F2.
  3. Type the new name.
  4. Press Enter.

Set up VS Code

  1. Install VS Code
  2. (Windows only) Set up running VS Code in WSL.
  3. (macOS only) Add VS Code to PATH.

Install VS Code

Follow the installation instructions for your platform:

(Windows only) Set up running VS Code in WSL

VS Code and WSL

image source

Steps:

  1. Enable WSL.

  2. Open a terminal (not the VS Code Terminal).

  3. To install Ubuntu in WSL,

    run in the VS Code Terminal:

    wsl --install -d Ubuntu-24.04

    Note: Ubuntu is a Linux distro.

  4. Open VS Code.

  5. Install the extension with the identifier ms-vscode-remote.remote-wsl.

    This extension lets you use VS Code in WSL.

(macOS only) Add VS Code to PATH

  1. Add VS Code to PATH.

    See PATH environment variable.

  2. Open a new VS Code Terminal.

  3. To check that the code command is available,

    run in the VS Code Terminal:

    code --version

    The output should be similar to this text:

    1.109.0
bdd88df003631aaa0bcbe057cb0a940b80a476fa
x64