plaintextintermediate160 snippets

VS Code Turbo: Shortcuts to Code Mouseless

Drop the mouse. The difference between a Junior and a Senior is often navigation speed. Master refactoring, multi-cursor and integrated terminal shortcuts. Boost your output by 50%.

Sections10

⌨️ Essential Shortcuts

21 snippets

Navigating quickly, editing code, boosting productivity.

Quick Open

Opens the "Quick Open" command palette for quick navigation and file opening, allowing searching by file name in the current project. Useful for quickly locating and opening files without using the file explorer.

plaintext

Ctrl + P

Command Palette

Displays the "Command Palette", which allows access to all VS Code functionalities, including extension commands, settings, and shortcuts, through textual search. Essential for executing actions without memorizing specific shortcuts.

plaintext

Ctrl + Shift + P

Open Settings

Opens the VS Code settings editor, where you can customize editor behavior, themes, shortcuts, and extensions, both globally (User Settings) and per workspace (Workspace Settings).

plaintext

Ctrl + ,

Toggle Sidebar

Shows or hides the VS Code sidebar, which contains the Explorer, Search, Source Control, Run and Debug, and Extensions. Helps maximize editor space.

plaintext

Ctrl + B

Open Integrated Terminal

Opens or toggles focus to the VS Code integrated terminal, allowing shell commands to be executed directly in the editor. If the terminal is closed, it will be opened; otherwise, it will be focused or hidden.

plaintext

Ctrl + `

Show/Hide Bottom Panel

Shows or hides the bottom panel (Panel), which can contain the Terminal, Output, Debug Console, and Problems. Useful for managing interface space.

plaintext

Ctrl + J

Split Editor

Splits the active editor into two editor groups, allowing viewing and working on multiple files side-by-side in the same window. Can be repeated to create more splits.

plaintext

Ctrl + \

Switch Between Editor Groups

Switches focus between open editor groups, allowing quick navigation between different file layouts in the editor. Use 1 for the first group, 2 for the second, and so on.

plaintext

Ctrl + 1/2/3

Select Next Occurrence

Selects the next occurrence of the current word or selection. Allows adding multiple cursors for simultaneous editing of identical occurrences.

plaintext

Ctrl + D

Select All Occurrences

Selects all occurrences of the current word or selection in the file, adding a cursor to each. Ideal for mass refactoring or quickly renaming variables.

plaintext

Ctrl + Shift + L

Move Line Up/Down

Moves the line (or selected lines) up or down, changing its position in the code. Useful for reordering code blocks without copying and pasting.

plaintext

Alt + ↑/↓

Copy Line Up/Down

Copies the line (or selected lines) and inserts the copy above or below the original position. Facilitates duplicating lines of code.

plaintext

Alt + Shift + ↑/↓

Delete Line

Deletes the entire line where the cursor is positioned or the selected lines. A quick way to remove code.

plaintext

Ctrl + Shift + K

Comment/Uncomment Line

Toggles line comment for the current line or selected lines. Supports the file's language comment syntax (e.g., `//` for JavaScript, `#` for Python).

plaintext

Ctrl + /

Toggle Block Comment

Toggles block comment for the current selection. Supports the file's language block comment syntax (e.g., `/* ... */` for JavaScript, `` for HTML).

plaintext

Ctrl + Shift + /

Go to Line

Opens a dialog box to go directly to a specific line number in the current file. Useful for quick navigation in large files.

plaintext

Ctrl + G

Go to Symbol (File)

Opens the "Go to Symbol in File" command palette to quickly navigate between symbols (functions, classes, variables) defined in the current file. Type `:` followed by the symbol name.

plaintext

Ctrl + P + :

Ir para Símbolo (Workspace)

Abre a paleta de comandos "Go to Symbol in Workspace" para navegar rapidamente entre símbolos (funções, classes, variáveis) definidos em todo o workspace. Útil para explorar a estrutura de um projeto.

plaintext

Ctrl + Shift + O

Go to Definition

Navigates to the definition of the symbol under the cursor. For example, if the cursor is over a function name, it will take you to where that function was defined. Essential for understanding code.

plaintext

F12

Go to Definition (Peek)

Opens the definition of the symbol under the cursor in a side panel (Peek Definition), allowing you to view the definition's code without leaving the current file. Useful for quick reference.

plaintext

Shift + F12

Go to Implementation

Navigates to the implementation of an interface or abstract method. Useful in object-oriented languages to find where a contract is actually implemented.

plaintext

Ctrl + F12

🎯 Multi-Cursor and Selection

10 snippets

Editing multiple lines, refactoring, bulk edits.

Add Cursor at Position

Adds a new cursor at the mouse click position, allowing simultaneous editing of multiple locations in the file. Essential for parallel edits and refactoring.

plaintext

Alt + Click

Add Cursor Above/Below

Adds a new cursor on the line above or below the current position, maintaining vertical alignment. Ideal for adding cursors on consecutive lines.

plaintext

Ctrl + Alt + ↑/↓

Undo Last Cursor

Removes the last added cursor, useful for correcting errors when adding multiple cursors or for refining the selection.

plaintext

Ctrl + U

Exit Multi-Cursor Mode

Exits multi-cursor mode, leaving only one active cursor at the last position. Can also be used to close menus and palettes.

plaintext

Esc

Rectangular Selection (Box)

Performs a rectangular or block selection, allowing you to select and edit columns of text. Useful for manipulating tabular data or aligned code blocks.

plaintext

Shift + Alt + Arrastar

Column Selection Up/Down

Expands or retracts a column selection to the lines above or below. Allows precise selection of vertical blocks of text.

plaintext

Ctrl + Shift + Alt + ↑/↓

Expand/Retract Column Selection

Expands or retracts a column selection horizontally, adjusting the width of the block selection.

plaintext

Ctrl + Shift + Alt + ←/→

Select and Edit Next Occurrence

Selects the next occurrence of the current word or selection and adds a new cursor, allowing simultaneous editing. Useful for renaming variables in controlled scopes.

plaintext

Ctrl + D

Select All Occurrences

Selects all occurrences of the current word or selection in the file, adding a cursor to each. Ideal for mass refactoring or quickly renaming variables.

plaintext

Ctrl + Shift + L

Insert Cursor at End of Selected Lines

Inserts a cursor at the end of each line that is part of the current selection. Useful for adding semicolons or other characters at the end of multiple lines.

plaintext

Ctrl + Alt + I

🐛 Debugging and Breakpoints

15 snippets

Debugging code, analyzing variables, finding bugs.

Toggle Breakpoint

Activates or deactivates a breakpoint on the current line. Breakpoints are stopping points in the code that allow inspecting the program's state during debugging.

plaintext

F9

Toggle Breakpoint (Alternative)

Activates or deactivates a breakpoint on the current line. This is an alternative shortcut for the toggle breakpoint function, useful if F9 is in conflict.

plaintext

Ctrl + F9

Toggle Conditional Breakpoint

Activates or deactivates a conditional breakpoint on the current line. A conditional breakpoint only pauses execution if a specific expression evaluates to true, saving time in debugging.

plaintext

Shift + F9

Toggle Inline Breakpoint

Activates or deactivates an inline breakpoint, allowing execution to be paused at a specific expression within a line of code, rather than the entire line, for more granular debugging.

plaintext

Ctrl + Shift + F9

Continue/Start Debugging

Starts the debugging session if none is active, or continues program execution until the next breakpoint or the end of the program if already debugging.

plaintext

F5

Stop Debugging

Stops the active debugging session, terminating program execution. Useful for exiting infinite loops or when debugging is no longer needed.

plaintext

Shift + F5

Step Over

Executes the next line of code. If the line contains a function call, the function will be executed completely without entering it. Useful for skipping debugging of already tested functions.

plaintext

F10

Step Into

Executes the next line of code. If the line contains a function call, the debugger will step into the function to debug its internal code. Essential for inspecting the execution flow in detail.

plaintext

F11

Step Out

Exits the current function and continues execution until the next line after the call to the function that invoked the current function. Useful for quickly exiting a function you accidentally stepped into.

plaintext

Shift + F11

Restart Debugging

Restarts the debugging session from the beginning, reloading the program and starting a new session. Useful for quickly testing code changes.

plaintext

Ctrl + Shift + F5

Focus Debug Console

Focuses on the "Debug Console" panel, where you can interact with the running program, evaluate expressions, and view debug logs. Essential for monitoring application state.

plaintext

Ctrl + Shift + Y

Open Developer Tools

Opens the Developer Tools for VS Code itself (useful for debugging extensions or the editor itself), not for the code being debugged.

plaintext

Ctrl + Shift + I

Show Integrated Terminal

Toggles the visibility of the integrated terminal, which can be used in conjunction with the Debug Console to execute commands and observe program output.

plaintext

Ctrl + `

Add to Watch

Adds the selected variable or expression to the "Watch" section of the debug panel, allowing real-time monitoring of its value during program execution, facilitating the identification of changes.

plaintext

Ctrl + Shift + W

Inspect Value (Debug)

When hovering over a variable or expression during a debugging session, displays its current value in a tooltip. Allows quick inspection without needing to add to Watch.

plaintext

Alt + Hover

💻 Integrated Terminal

14 snippets

Running commands, builds, tests, system operations.

Open/Close Terminal

Opens or closes the integrated VS Code terminal. If the terminal is closed, it will be opened; otherwise, it will be focused or hidden, maximizing editor space.

plaintext

Ctrl + `

Create New Terminal

Creates a new integrated terminal instance, allowing multiple terminals to be open and active simultaneously in VS Code for different tasks.

plaintext

Ctrl + Shift + `

Copy Selection (Terminal)

Copies the selected text in the terminal to the clipboard. This is the default behavior for most operating systems, but it can interrupt running processes.

plaintext

Ctrl + C

Paste in Terminal

Pastes the clipboard content into the terminal. This is the default behavior for most operating systems and is essential for command input.

plaintext

Ctrl + V

Copy in Terminal (Windows)

Specific shortcut to copy text in the integrated terminal on Windows systems, in case the default Ctrl+C is interpreted as a process interruption. Ensures text copying works as expected.

plaintext

Ctrl + Shift + C

Paste in Terminal (Windows)

Specific shortcut for pasting text into the integrated terminal on Windows systems, if the default Ctrl+V does not work correctly. Ensures paste functionality in all situations.

plaintext

Ctrl + Shift + V

Navigate Between Terminals

Switches between different open integrated terminal instances, allowing management of multiple command-line processes without losing the context of each.

plaintext

Ctrl + Alt + ←/→

Navigate Between Terminals (Alternative)

Alternative shortcut to navigate between integrated terminal instances, moving focus to the previous or next terminal in the list, offering flexibility.

plaintext

Ctrl + Shift + ↑/↓

Split Terminal

Splits the current terminal into two panes, allowing you to run and view multiple terminal commands side-by-side. Can be repeated for more splits, optimizing workflow.

plaintext

Ctrl + Shift + 5

Close Current Terminal

Closes the currently focused integrated terminal instance. If there are multiple split terminals, only the active pane will be closed, freeing up resources.

plaintext

Ctrl + Shift + W

Open Settings

Opens the VS Code settings editor, where you can customize the integrated terminal's behavior, such as the default shell, font, colors, and scroll behavior.

plaintext

Ctrl + ,

Default Windows Shell

Setting to define the default shell to be used in the VS Code integrated terminal on Windows systems. Examples include `cmd.exe`, `powershell.exe`, or `wsl.exe`.

plaintext

terminal.integrated.shell.windows

Default Linux Shell

Setting to define the default shell to be used in the VS Code integrated terminal on Linux systems. Examples include `/bin/bash` or `/bin/zsh`.

plaintext

terminal.integrated.shell.linux

macOS Default Shell

Setting to define the default shell to be used in VS Code's integrated terminal on macOS systems. Examples include `/bin/bash` or `/bin/zsh`.

plaintext

terminal.integrated.shell.osx

🔀 Git Integration

15 snippets

Version control, collaboration, branch management.

Open Source Control

Opens the Source Control view in VS Code, where you can manage Git changes, make commits, push, pull, and interact with the repository.

plaintext

Ctrl + Shift + G

Commit Changes

Performs a commit of staged changes in Git, using the commit message entered in the Source Control text box. Equivalent to `git commit -m "message"`.

plaintext

Ctrl + Enter

Navigate Between Changes (Git)

Navigates between different changes (diffs) in the Source Control panel, allowing you to review modifications made to files before committing.

plaintext

Alt + ←/→

Clone Git Repository

Opens the command palette to clone a remote Git repository to your local environment. Prompts for the repository URL and target directory to start a new project.

plaintext

Ctrl + Shift + P > Git: Clone

Stage All Changes

Adds all detected changes in the Git repository to the staging area (index), preparing them for the next commit. Equivalent to `git add .`.

plaintext

Ctrl + Shift + A

Unstage All Changes

Removes all changes from the staging area (index), reverting them to the "modified" (unstaged) state. Useful for undoing a `git add .` before a commit.

plaintext

Ctrl + Shift + U

Stage Selected File

Adds the selected file in the Source Control view to the staging area. Equivalent to `git add <file>`, preparing only the changes of a specific file for the commit.

plaintext

Ctrl + Alt + S

Unstage Selected File

Removes the selected file from the staging area. Equivalent to `git reset <file>`, useful for removing a file from staging without undoing its modifications.

plaintext

Ctrl + Alt + U

Change Git Branch

Opens the command palette to select and switch to an existing Git branch in the local repository. Equivalent to `git checkout <branch-name>`, essential for managing workflow.

plaintext

Ctrl + Shift + P > Git: Checkout

Create New Git Branch

Opens the command palette to create a new Git branch from the current branch. Equivalent to `git branch <new-branch-name>` and optionally `git checkout <new-branch-name>`.

plaintext

Ctrl + Shift + P > Git: Create Branch

Merge Branches Git

Opens the command palette to perform a merge of one branch into another. Useful for integrating changes from a feature branch into the main branch, resolving conflicts if necessary.

plaintext

Ctrl + Shift + P > Git: Merge

Pull from Remote Repository

Executes a `git pull` to fetch and integrate the latest changes from the remote repository to the current local branch. Equivalent to `git fetch` followed by `git merge`.

plaintext

Ctrl + Shift + P > Git: Pull

Push to Remote Repository

Executes a `git push` to send the current local branch's commits to the remote repository. Requires the local branch to be configured to track a remote branch.

plaintext

Ctrl + Shift + P > Git: Push

View Git Commit History

Opens the Git history view, showing a list of commits, their authors, messages, and associated changes. Requires the GitLens extension or similar for full functionality.

plaintext

Ctrl + Shift + P > Git: View History

Open GitLens History

Opens the advanced history view provided by the GitLens extension, offering rich details about commits, authors, changed lines, and file history navigation, for in-depth analysis.

plaintext

Ctrl + Shift + H

🧩 Recommended Extensions

18 snippets

Customizing environment, boosting productivity, specific tools.

TypeScript Importer (Extension)

ID of the official VS Code extension for TypeScript support, which includes features like autocompletion, type checking, refactoring, and code navigation for TypeScript projects.

plaintext

ms-vscode.vscode-typescript-next

Prettier - Code Formatter (Extension)

ID of the Prettier extension, an opinionated code formatter that enforces a consistent style across your project, automatically formatting code on save or by command.

plaintext

esbenp.prettier-vscode

ESLint (Extension)

ID of the ESLint extension, which integrates the ESLint linter into VS Code, providing real-time feedback on syntax issues, style, and potential errors in JavaScript/TypeScript code.

plaintext

dbaeumer.vscode-eslint

JSON Language Support (Extension)

ID of the JSON language support extension, which offers features such as schema validation, formatting, autocompletion, and syntax highlighting for JSON and JSONC files, facilitating work with structured data.

plaintext

ms-vscode.vscode-json

YAML Language Support (Extension)

ID of the Red Hat YAML language support extension, which provides schema validation, autocompletion, formatting, and syntax highlighting for YAML files, essential for configurations and CI/CD.

plaintext

redhat.vscode-yaml

GitLens - Git supercharged (Extension)

ID of the GitLens extension, which enhances VS Code's built-in Git capabilities, adding features like blame annotations, detailed commit history, repository navigation, and more.

plaintext

ms-vscode.vscode-gitlens

Live Server (Extension)

ID of the Live Server extension, which launches a local development server with live reloading for static HTML/CSS/JS pages, automatically updating the browser with every file change.

plaintext

ms-vscode.live-server

Auto Rename Tag (Extension)

ID of the Auto Rename Tag extension, which automatically renames the closing HTML/XML tag when the opening tag is changed, and vice-versa, maintaining code consistency.

plaintext

formulahendry.auto-rename-tag

Tailwind CSS IntelliSense (Extension)

ID of the Tailwind CSS IntelliSense extension, which provides intelligent autocompletion, linting, and syntax highlighting for Tailwind CSS framework classes directly in the editor.

plaintext

bradlc.vscode-tailwindcss

Color Picker (Extension)

ID of the Color Picker extension, which offers a graphical interface for selecting colors in formats like HEX, RGB, HSL, facilitating the choice and insertion of color values into code.

plaintext

ms-vscode.vscode-color-picker

Material Icon Theme (Extension)

ID of the Material Icon Theme extension, which adds a vast collection of file and folder icons to the VS Code explorer, improving visual identification of file types.

plaintext

PKief.material-icon-theme

One Dark Pro Theme (Extension)

ID of the One Dark Pro Theme extension, a popular and elegant color theme for VS Code, based on Atom's One Dark theme, which offers a visually pleasing coding experience.

plaintext

zhuangtongfa.Material-theme

Dracula Theme (Extension)

ID of the Dracula Theme extension, a dark and vibrant color theme, highly appreciated by the community, which offers pleasant contrast and readability for various programming languages.

plaintext

dracula-theme.theme-dracula

Monokai Theme (Extension)

ID of the Monokai Theme extension, a classic dark color theme, known for its distinct color palette and readability, widely used by developers.

plaintext

ms-vscode.theme-monokai

Debugger for Chrome (Extension)

ID of the Debugger for Chrome extension, which allows debugging your front-end JavaScript code (running in Chrome) directly from VS Code, by setting breakpoints and inspecting variables.

plaintext

ms-vscode.vscode-chrome-debug

Node.js Debugging (Extension)

ID of the extension for debugging Node.js applications in VS Code, offering support for breakpoints, step-by-step execution, variable inspection, and expression evaluation.

plaintext

ms-vscode.vscode-node-debug2

REST Client (Extension)

ID da extensão REST Client, que permite enviar requisições HTTP diretamente do editor e visualizar as respostas, ideal para testar APIs RESTful e GraphQL sem sair do VS Code.

plaintext

humao.rest-client

Test Explorer UI (Extension)

ID of the Test Explorer UI extension, which provides a graphical interface to view and run tests from various frameworks (via adapters), integrating the testing process into VS Code.

plaintext

ms-vscode.test-adapter-converter

📁 Workspace Management

13 snippets

Working with multiple projects, organization, specific settings.

Add Folder to Workspace

Command to add an existing folder to a multi-root workspace. Allows working with multiple project directories in a single VS Code window, maintaining organization.

plaintext

File > Open Folder from Workspace...

Save Current Workspace

Saves the current workspace settings (including open folders and specific configurations) to a `.code-workspace` file, allowing easy reopening of the working environment.

plaintext

File > Save Workspace As...

Open Recent Workspace

Opens the list of recently opened workspaces and folders, making it easy to switch between projects you are working on without having to navigate through directories.

plaintext

Ctrl + R

Open Folder

Opens a new VS Code window with the selected folder as the project root. This is the standard command to start a new project or open an existing one.

plaintext

Ctrl + K Ctrl + O

Save Workspace As

Saves the current workspace (with all folders and settings) to a new `.code-workspace` file, allowing you to create different workspace configurations for different work contexts.

plaintext

Ctrl + K Ctrl + S

Switch Between Open Files

Quickly switches between open files in the editor, showing a list of most recently accessed files. Hold Ctrl and use Tab to navigate.

plaintext

Ctrl + Tab

Switch in Reverse Direction

Switches between open files in the reverse order of the most recently accessed files list. Useful for reverse navigation and quickly finding specific files.

plaintext

Ctrl + Shift + Tab

Go to Specific Editor

Moves focus to a specific editor in an editor group. For example, Ctrl + 1 focuses on the first editor, Ctrl + 2 on the second, etc., speeding up navigation in split layouts.

plaintext

Ctrl + 1/2/3...

Navigate Between Editor Groups

Navigates focus between different editor groups (panels) open in VS Code, allowing quick switching between different file layouts and work contexts.

plaintext

Ctrl + Alt + ←/→

Workspace Settings

JSON file located in your project's `.vscode/` folder, containing specific settings for that workspace. These settings override user settings, ensuring project consistency.

plaintext

.vscode/settings.json

Debug Settings

JSON file located in your project's `.vscode/` folder, used to configure debugging sessions for different environments or application types (e.g., Node.js, Chrome).

plaintext

.vscode/launch.json

Task Settings

JSON file located in your project's `.vscode/` folder, used to define and configure custom tasks that can be run in VS Code (e.g., build, test, run scripts).

plaintext

.vscode/tasks.json

Extension Recommendations

JSON file located in your project's `.vscode/` folder, which lists recommended extensions for the workspace. VS Code suggests installing these extensions to project collaborators.

plaintext

.vscode/extensions.json

📝 Snippets and Templates

18 snippets

Speeding up typing, standardizing code, reusable templates.

Snippet: Loop for básico

Um snippet que, ao digitar "for" e pressionar Tab, expande para uma estrutura básica de loop `for` em JavaScript ou linguagens similares, com placeholders para variáveis e corpo do loop, agilizando a escrita de código repetitivo.

plaintext

for + Tab

Snippet: if Conditional

A snippet that, when typing "if" and pressing Tab, expands to a basic `if` conditional structure in JavaScript or similar languages, with a placeholder for the condition to be filled.

plaintext

if + Tab

Snippet: Console.log (JavaScript)

A snippet that, when typing "log" and pressing Tab, expands to `console.log()` in JavaScript, with a placeholder for the argument to be logged. Very useful for quick debugging and log insertion.

plaintext

log + Tab

Snippet: Console.log (abbreviation)

A snippet abbreviation that, when typing "cl" and pressing Tab, expands to `console.log()` in JavaScript, similar to "log + Tab", offering a quick alternative for inserting logs.

plaintext

cl + Tab

Snippet: Function declaration

A snippet that, when typing "fn" and pressing Tab, expands to a basic function declaration in JavaScript (e.g., `function name(params) { ... }`), with placeholders for name and parameters.

plaintext

fn + Tab

Snippet: React Arrow Function

A snippet that, when typing "raf" and pressing Tab, expands to a React component function in arrow function format (e.g., `const Component = () => { return (...) };`), with placeholders for name and return.

plaintext

raf + Tab

Open Snippets Editor

Opens the configuration file where you can create and edit your own custom snippets for specific languages or globally in VS Code, enabling code automation.

plaintext

File > Preferences > User Snippets

Custom Snippets File

Filename for custom VS Code snippets. Can be a global file (`.code-snippets`) or language-specific (e.g., `javascript.json`), allowing for organization.

plaintext

nome-do-snippet.code-snippets

Basic Snippet Structure

Defines the human-readable name of the snippet within the JSON snippets file. This is the header for defining a new snippet, used to identify it in IntelliSense.

plaintext

"Snippet Name": {

Prefix to Activate Snippet

Defines the string that, when typed in the editor and followed by Tab, will activate the snippet expansion. The prefix should be unique or specific enough to avoid conflicts.

plaintext

  "prefix": "prefixo",

Snippet Body

Defines the content to be inserted into the editor when the snippet is activated. Can be a string or an array of strings for multiple lines. Includes placeholders like `$1` for cursor navigation.

plaintext

  "body": ["$1"],

Snippet Description

Provides a brief description of what the snippet does, which will be displayed in the IntelliSense suggestion list. Helps identify the correct snippet and its purpose.

plaintext

  "description": "Descrição"

Close Snippet Structure

Closes the definition of an individual snippet within the JSON snippets file, completing the object structure.

plaintext

Selected Text Variable

A snippet variable that inserts the currently selected text in the editor at the snippet's position. Useful for wrapping existing text with a new structure or tags.

plaintext

$TM_SELECTED_TEXT

Tab Stops

Numeric placeholders that define the order in which the cursor will move after snippet expansion. Press Tab to jump to the next tab stop, speeding up data entry.

plaintext

$1, $2, $3...

Tab Stop with Default Value

A tab stop that, in addition to defining the cursor's position, also provides a default value. The user can accept the default or overwrite it, making snippets more flexible.

plaintext

${1:default}

Current Year Variable

A snippet variable that inserts the current year (e.g., 2023) into the snippet body. Useful for file headers, licenses, or date comments.

plaintext

$CURRENT_YEAR

Full Date Variable

A snippet variable that inserts the current full date (e.g., 2023-10-27) into the snippet body. Useful for timestamps or automated documentation.

plaintext

$CURRENT_DATE

🌐 Remote Development

16 snippets

Remote development, containers, WSL, server access.

Connect via Remote SSH

Initiates a remote SSH connection session, allowing development on a remote server as if locally. Prompts for the configured SSH host or a new one to establish the secure connection.

plaintext

Ctrl + Shift + P > Remote-SSH: Connect to Host...

Edit SSH Configuration

Opens the SSH configuration file (`~/.ssh/config` or similar) to add, edit, or remove SSH hosts, including details like HostName, User, IdentityFile, to manage your connections.

plaintext

Ctrl + Shift + P > Remote-SSH: Open Configuration File...

Configure SSH Host

Defines an alias for a remote server in the SSH configuration file, facilitating connection with a short name instead of the full IP or domain, improving usability.

plaintext

Host nome-do-servidor

SSH Server Address

Specifies the IP address or domain name of the remote server to which the SSH client will attempt to connect. Used within a `Host` configuration to identify the target.

plaintext

HostName IP-ou-DOMAIN

SSH User

Defines the username to be used for authentication on the remote SSH server. Used within a `Host` configuration to specify access credentials.

plaintext

User nome-usuario

SSH Private Key

Specifies the path to the SSH private key file to be used for passwordless authentication. Essential for secure and automated connections to remote servers.

plaintext

IdentityFile ~/.ssh/chave_privada

Attach to Running Container

Connects VS Code to an already running Docker container, allowing development within the container's isolated environment. Useful for debugging or continuous development in standardized environments.

plaintext

Ctrl + Shift + P > Remote-Containers: Attach to Running Container...

Reopen Folder in Container

Reopens the current project folder inside a Docker container, using the configurations defined in a `.devcontainer.json` file. Ideal for consistent and reproducible development environments.

plaintext

Ctrl + Shift + P > Remote-Containers: Reopen in Container

Dev Container Configuration

JSON file located in your project's `.devcontainer/` folder, which defines how the containerized development environment should be built and configured (e.g., Docker image, ports, extensions).

plaintext

.devcontainer/devcontainer.json

Dockerfile for Container Build

Property in `.devcontainer.json` that specifies the Dockerfile to be used to build the containerized development environment image, allowing image customization.

plaintext

"dockerFile": "Dockerfile"

Docker Context

Property in `.devcontainer.json` that defines the context directory for the Docker build. ".." means the parent directory of `.devcontainer` (usually the project root), indicating where Docker should look for files.

plaintext

"context": ".."

Open New WSL Window

Opens a new VS Code window connected to a Windows Subsystem for Linux (WSL), allowing development in a complete Linux environment directly from Windows, with access to Linux tools.

plaintext

Ctrl + Shift + P > Remote-WSL: New WSL Window

Reopen Folder in WSL

Reopens the current project folder within the WSL environment, transferring the development context to the Linux subsystem and allowing the use of native Linux tools.

plaintext

Ctrl + Shift + P > Remote-WSL: Reopen in WSL

Access Specific WSL Distribution

Command to launch a specific WSL distribution (e.g., Ubuntu) directly from the Windows command prompt, allowing access to the Linux environment and its tools.

plaintext

wsl.exe -d Ubuntu

Open Port in Browser (Remote Tunnels)

Opens a port exposed by a remote tunnel directly in the local browser, facilitating access to web applications running on remote machines without complex firewall configurations.

plaintext

Ctrl + Shift + P > Remote-Tunnels: Open in Browser

Forward Specific Port (Remote Tunnels)

Configures the forwarding of a specific port from a remote machine to your local machine via a secure tunnel, allowing access to remote services as if they were local.

plaintext

Ctrl + Shift + P > Remote-Tunnels: Forward Port

🎨 Customization and Themes

20 snippets

Customizing environment, adjusting preferences, optimizing flow.

Open Settings

Opens the VS Code settings editor, where you can customize editor behavior, themes, shortcuts, and extensions, both globally (User Settings) and per workspace (Workspace Settings).

plaintext

Ctrl + ,

Workbench Color Theme

Setting that defines the overall color theme of VS Code (editor, panels, sidebar). Can be a pre-installed theme or from an extension, changing the visual aesthetics of the editor.

plaintext

workbench.colorTheme

Workbench Icon Theme

Setting that defines the icon theme for files and folders displayed in the VS Code explorer. Requires an installed icon theme extension to function, improving visual identification.

plaintext

workbench.iconTheme

Editor Font

Setting that defines the font family to be used in the text editor. It is recommended to use monospace fonts for coding, such as Fira Code or JetBrains Mono, for better readability.

plaintext

editor.fontFamily

Editor Font Size

Setting that defines the font size in pixels for text in the editor. Adjust for better readability and visual comfort, adapting to your preferences.

plaintext

editor.fontSize

Editor Line Height

Setting that defines the line height relative to the font size. A higher value increases spacing between lines, improving readability and reducing eye strain.

plaintext

editor.lineHeight

Tab Size

Setting that defines the number of spaces a tab character represents. Usually 2 or 4, depending on the project's code style conventions.

plaintext

editor.tabSize

Use Spaces Instead of Tabs

Boolean setting that, if `true`, makes VS Code insert spaces instead of tab characters when the Tab key is pressed, following coding conventions.

plaintext

editor.insertSpaces

Automatic Word Wrap

Setting that controls whether long text lines should be automatically wrapped to fit the editor's width, avoiding the need for horizontal scrolling.

plaintext

editor.wordWrap

Enable/Disable Minimap

Boolean setting that controls the visibility of the minimap, a miniature view of the file that aids in quick navigation through large blocks of code.

plaintext

editor.minimap.enabled

Show Whitespace

Setting that controls how VS Code renders whitespace characters (spaces, tabs, newlines), making them visible with subtle symbols for formatting debugging.

plaintext

editor.renderWhitespace

Vertical Editor Rulers

Setting that allows defining vertical columns in the editor (e.g., `[80, 120]`), useful for following code style conventions that limit line width, improving readability.

plaintext

editor.rulers

Enable Editor Tabs

Boolean setting that controls whether open files should be displayed in tabs at the top of the editor. Usually `true` to facilitate navigation between files.

plaintext

workbench.editor.enableTabs

Auto-Save Files

Setting that defines the auto-save behavior for files. Options include `off`, `afterDelay`, `onFocusChange`, `onWindowChange`, ensuring your changes are saved automatically.

plaintext

files.autoSave

Open Keyboard Shortcuts

Opens the keyboard shortcuts editor, where you can view, search, and customize all VS Code keyboard shortcuts, adapting the editor to your workflow.

plaintext

Ctrl + K Ctrl + S

Keyboard Shortcuts Menu

Path in the main menu to access the keyboard shortcuts editor, which allows mapping commands to custom key combinations, or modifying existing shortcuts.

plaintext

File > Preferences > Keyboard Shortcuts

Custom Shortcuts File

JSON file where custom keyboard shortcuts are stored. Can be edited directly for advanced configurations, allowing full control over shortcuts.

plaintext

keybindings.json

Define Keyboard Shortcut

Property within `keybindings.json` that defines the key combination for a shortcut (e.g., "ctrl+shift+a"), allowing the creation of shortcuts for specific commands.

plaintext

"key": "ctrl+shift+a",

Command to Execute (Shortcut)

Property within `keybindings.json` that specifies the ID of the internal VS Code command to be executed when the shortcut is pressed (e.g., `workbench.action.files.saveAll` to save all files).

plaintext

"command": "workbench.action.files.saveAll"

Activation Condition (Shortcut)

Optional property within `keybindings.json` that defines a condition (context key) for when the shortcut should be activated (e.g., `editorTextFocus` means the shortcut only works when the text editor is in focus).

plaintext

"when": "editorTextFocus"

See all cheatsheets