Skip to content

vs-code.md

Latest commit

 

History

History
901 lines (574 loc) · 31.3 KB

vs-code.md

File metadata and controls

901 lines (574 loc) · 31.3 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.

Quick Open

Open a file.

Actions:

Open the Quick Open

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

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)

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

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 - Wide

    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. Look at the open VS Code Terminals

  2. Look at one of these:

Check the current shell in the VS Code Terminal

  1. Look at the current VS Code Terminal.

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

Note

See Linux shell.

  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. Decide whether you need to run the command on the VM (REMOTE) or on the local machine (LOCAL).
  4. Check whether you run in the SSH shell.
  5. Type or paste a command or commands.
  6. To run, press Enter.

VS Code Explorer

View the file tree.

Location: Activity Bar.

Docs:

Actions:

Open the VS Code Explorer

  1. Go to the Activity Bar.

  2. Click the Explorer icon.

    Explorer

Open the local file using the VS Code 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

Open the directory using the Open Folder command

Note

The <directory-name> is the name of a directory (without < and >) 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.

(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.
  4. Check the current shell in the VS Code Terminal.

Open the file

Open the file using Quick Open

Method 1 (file inside the directory where VS Code is opened):

  1. Open the Quick Open.
  2. Start writing the relative path of the file. Example: wiki/.
  3. Select the file from the list.

Method 2 (file at the absolute <file-path>):

  1. Open the Quick Open.
  2. Write the file path

Open the file or the directory

Open the file or the directory using code

  1. Open a new VS Code Terminal.

  2. To open the file or the directory,

    run in the VS Code Terminal:

    code <path>

    Replace the placeholder <path> with the path to the file or the directory that you want to open.

    🟦 Note

    The file or the directory will be created if it doesn't yet exist.

    Troubleshooting

    (macOS only) command code doesn't exist

    Add VS Code to PATH.

  3. (Windows only) Reopen the directory in WSL if you open the directory.

Open the file or the directory using the context menu

  1. Open any file explorer app installed on your system.
  2. Find the file or the directory in that app.
  3. Right-click the file or the directory.
  4. Find Open with... or similar.
  5. Choose VS Code.
  6. (Windows only) Reopen the directory in WSL if you open the directory.

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

Complete these 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

  4. To set it as the default distro,

    run in the VS Code Terminal:

    wsl --set-default Ubuntu-24.04

  5. Open the VS Code.

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

    This extension lets you use VS Code in WSL.

  7. Try to open a directory 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