Visual Studio Code for Developers: Beginner to Advanced

Begin by exploring the Visual Studio Code interface, understanding the bars and options, learning about the minimap and glyph margin, and discovering customization and zoom features to tailor your workflow.

Download the stable build of Visual Studio Code from code.visualstudio.com and install by accepting the license. Add to path and create a desktop icon, then launch the editor.

Explore the Visual Studio Code user interface, including panels, bars, and menus, and learn to customize colors, zoom, and icons while navigating editor, explorer, and extensions.

Discover how the minimap and glyph margin in Visual Studio Code boost productivity by providing a quick code preview, easy navigation, and breakpoint debugging, with simple toggle controls in settings.

Enable mouse wheel zoom in Visual Studio Code via settings, then use Ctrl+scroll or Cmd+scroll or the Zoom level setting to adjust editor and UI zoom.

Master the basics of Visual Studio Code by creating and saving files, opening and managing folders, working with multiple files, and configuring autosave.

Create a new file in Visual Studio Code using three options: file > new text file, Ctrl/Cmd+N, or file > new file, then pick a language to set the extension.

Learn how to save files in Visual Studio Code, create new files with a name and extension (for example index.html), and use save and save as shortcuts.

Learn to open a file in Visual Studio Code using the file menu, the keyboard shortcuts Ctrl+O or Command+O on macOS, and the file explorer with double-click or open here.

Open a folder in Visual Studio Code to view and manage all files in the explorer, using the open folder option or Ctrl K Ctrl O shortcut.

Learn to open multiple files in a folder in Visual Studio Code, move from preview mode to editing with a double-click, and manage and reorder tabs to avoid clutter.

Enable autosave in Visual Studio Code to save changes automatically. Toggle autosave in the File menu, see saved versus pending changes, and use the CSS color picker for hex colors.

Close individual files with the X button or ctrl-f4 (command-w on macOS), and close folders using ctrl-k f (command-k f on macOS) to return to a clean editor.

Expand and collapse folders in the explorer, create, move, rename, and drag and drop files directly in Visual Studio Code, then refresh to sync with the file system.

Explore Visual Studio Code's explorer to browse and manage files and folders, open folders, create or delete items, move or drag-and-drop, and use shortcuts to toggle visibility.

Discover how to create and delete files in the Visual Studio Code explorer using right-click or the new file button, with extension-based icons and recycle bin restoration.

Create and delete folders in the Visual Studio Code explorer to organize files, then verify their presence in the file system and manage deletions with the Recycle Bin and confirmations.

Move files and folders in Visual Studio Code by dragging and dropping into new or nested locations, create folders, and verify with breadcrumbs and file explorer.

Expand and collapse folders in the explorer, move multiple files with drag and drop, and recognize visual cues like the down arrow and vertical indentation line in Visual Studio Code.

Rename files in the VS Code explorer with right-click or F2, preserving the extension. The demo renames an empty JavaScript file to my app.js, showing default selection and pressing enter.

Drag and drop files into the explorer to add assets to your project in Visual Studio Code. Drop into an appropriate folder or main directory as needed, with instant updates.

Refresh the explorer to sync your Visual Studio Code workspace with your file system when changes don’t appear automatically, using the refresh button to ensure the project reflects current files.

Collapse all folders at once in Visual Studio Code to clear the explorer view for large projects. Use the collapse folders in explorer button to restore the initial project structure.

Learn how to search in Visual Studio Code and find matches across your files and folders. Use case-sensitive and whole-word search, plus search and replace, with include or exclude options.

Explore how to search across your project in Visual Studio Code using the search tool, view results with context lines, and open matches in editor tabs for quick code navigation.

Learn to use Visual Studio Code's match case to switch between case sensitive and case insensitive searches, use Alt C to toggle, and obtain exact matches or flexible results.

Enable match whole word in Visual Studio Code search to isolate exact terms like app, reducing results from 113 to 73; use Alt W on Windows or the macOS shortcut.

Master search and replace in Visual Studio Code by querying specific text, previewing changes, and applying replace all or individual edits across multiple files, with shortcuts and undo.

Preserve case and other options in Visual Studio Code's search and replace to keep capitalization, preview results, and refine searches with include/exclude filters, context lines, and tree or list views.

Tailor search results in Visual Studio Code by including or excluding files and paths using wildcards, so you see only relevant CSS or JavaScript files during a focused search.

Enable search only in open editors in Visual Studio Code to filter results to the current file, using the ellipsis menu and the 'files to include' option.

Learn to use the integrated terminal and code command to launch Visual Studio Code from the command prompt, install it, and run multiple terminals for simultaneous tasks.

Launch Visual Studio Code from the terminal to open a folder or file with the code command, navigate with cd, and verify or add the command to your path.

Learn how to add the code command to your macOS path using the command palette, install the code command from path, and verify the fix in the terminal.

open individual files in visual studio code from the command prompt using the code command, with relative and nested paths, and even open multiple files efficiently.

Open multiple files in Visual Studio Code from the command prompt by listing file names or relative paths (e.g., package.json and app.js) to quickly open exact files.

Discover how Visual Studio Code's integrated terminal runs commands inside the editor, accessible via View > Terminal or Ctrl+`, with support for multiple split terminals.

Learn to use the Visual Studio Code integrated terminal to run a React app, switch tools (PowerShell, git bash, command prompt, JavaScript debug terminal), split terminals, and manage processes.

Explore the integrated terminal code command help to view options, flags, and commands for comparing files, adding folders, and opening new windows in Visual Studio Code.

Learn to tailor Visual Studio Code to your workflow with adjustable indentation, color themes, minimap visibility, panel sizing, language-specific settings, terminal customization, and line wrapping.

Open the settings panel in Visual Studio Code using three methods: file > preferences > settings, keyboard shortcut ctrl+, cmd+, or the gear icon in the activity bar.

Explore frequently used settings in Visual Studio Code, learn to open and search the panel, filter by keywords, and adjust autosave, font size, and cursor style.

Discover how to convert indentation between spaces and tabs in Visual Studio Code with simple clicks and a keyboard shortcut, using a Python file example, then save.

Set the number of indentation spaces and switch between two and four spaces for html code. Reformat with shift alt f to apply the chosen tab size and save.

Explore Visual Studio Code color themes, from the default to custom extensions like free Code Camp dark theme, and learn how to switch between light and dark options.

Toggle the minimap in settings to show or hide it, giving a bird's-eye view of long files, as you adjust it with keyboard ctrl+, or the gear icon.

Learn how to manage editor tabs in Visual Studio Code by switching between multiple tabs, single tab, or hidden tab views, to reduce clutter and maximize coding space.

Resize panels and split the editor in Visual Studio Code, move and organize tabs, view files side by side, and adjust font size across open files.

Master line wrapping in Visual Studio Code using visual wrap and keyboard shortcuts. Explore settings to wrap lines, control indentation, and format HTML attributes and JSX as needed.

Customize language-specific settings in Visual Studio Code to automatically apply indentation per language, such as two spaces for JavaScript and four spaces for Python.

Customize the integrated terminal in Visual Studio Code by adjusting background and foreground colors, editing settings.json, and changing font size via terminal color properties and the built-in color picker.

Move and dock the terminal to the left, right, or bottom to customize your Visual Studio Code workspace, using panel position to switch layouts.

Boost productivity in Visual Studio Code with custom shortcuts, side-by-side editors, workspaces, send mode, fast scrolling, moving lines up and down with a keyboard shortcut, and creating files and folders.

Master essential Visual Studio Code keyboard shortcuts to rename identifiers, use multiple cursors, toggle comment, auto format, move lines, jump to lines, and manage tabs efficiently.

Learn to customize keyboard shortcuts in Visual Studio Code by editing key bindings in the keyboard shortcuts panel and JSON, including resetting to system defaults.

Organize related files with editor groups in Visual Studio Code, seeing HTML, CSS, and JavaScript side by side; drag and drop between groups and resize or maximize groups.

Navigate multiple editor groups in Visual Studio Code using keyboard shortcuts Ctrl+1, Ctrl+2, Ctrl+3 (and Command equivalents on Mac) to switch focus quickly and boost productivity.

Learn to manage multiple folders in Visual Studio Code by creating workspaces, adding folders to a single workspace, saving as a .code-workspace file, and applying workspace or per-folder settings.

Enter Visual Studio Code full screen to eliminate distractions and focus on your editor, using F11 on Windows or Ctrl+Command+F on macOS, with an alternative via view appearance.

Hide or show the menu bar in Visual Studio Code via View Appearance, then use the burger icon in the activity bar to access options in full screen.

Activate zen mode in Visual Studio Code to hide menus and show only the editor, using ctrl-k followed by c (cmd-k on mac) to enter.

Navigate long files quickly in Visual Studio Code using the mini map and fast scrolling techniques. Press the alt key with the mouse wheel to jump to a line.

Enable sticky scroll in editor settings to keep a line at the top showing your current class or method, helping you track scope and jump to starts.

Master quick file renaming with keyboard shortcuts. Use f2 on Windows to edit the name and cycle through name, full name with extension, or extension only; on macOS, use Return.

Create files and folders in one line by typing a path with a forward slash to nest folders and files, for example app/css/main/styles.css.

Explore extensions in Visual Studio Code to tailor functionality. Install, manage, disable, update, and uninstall extensions, including popular Python extension, live server extension, Jupyter extension, and code Snap.

Install extensions in Visual Studio Code and explore extensions panel. Use search to find themes or tools like Docker, read extension details, and manage installed extensions to customize your editor.

Learn to manage Visual Studio Code extensions by installing, disabling, switching versions, and uninstalling extensions like Docker, with steps to uninstall by restarting VS Code and applying settings to profiles.

Learn to manage Visual Studio Code extensions by temporarily disabling and re-enabling them for projects. Use the command palette to disable all installed extensions, but disable them individually when possible.

Learn to disable auto updates for all extensions via the command palette (Ctrl/Cmd+Shift+P), then re-enable anytime; monitor updates with the clock icon and the yellow reload button.

Explore how to filter and sort extensions in the VS Code marketplace by category, status, and criteria like rating and installs, using the @ symbol and the filter panel.

Explore the Prettier extension for Visual Studio Code, which automatically formats code with consistent spacing, indentation, and line breaks across languages, and supports format on save.

Install the official Python extension for Visual Studio Code to enable intellisense, debugging, formatting, linting, code navigation, and refactoring, great for data science and scientific computing.

Install the React Snippets extension in Visual Studio Code to access pre-written code snippets for React, React Native, and Redux, boosting productivity with built-in and custom snippets.

Learn how to install and use the Jupyter extension for Visual Studio Code to create and run Jupyter notebooks for data science, machine learning, and scientific computing.

Install and use Live Server in Visual Studio Code to start a local web server with one click, see instant changes in the browser on port 5500, and customize settings.

Discover how to locate and customize extension settings in Visual Studio Code by using the extensions panel, gear icon, and the settings.json file.

explore the Code Snap extension for Visual Studio Code to capture code screenshots, copy to clipboard, show line numbers, and customize background color and transparent background.

Discover how code snippets save time by templating repetitive code, explore built-in and custom snippets, install from extensions marketplace, and learn to remove or hide them in Visual Studio Code.

Learn to accelerate coding with built-in code snippets in Visual Studio Code, using placeholders and multiple cursors. Insert and customize snippets in JavaScript files via the command palette and intellisense.

Install and use predefined code snippets from the extensions marketplace, choosing React snippets and other languages, then insert with the command palette and custom prefixes to speed up development.

Learn to create and reuse custom code snippets in Visual Studio Code by configuring language JSON files, defining prefixes, bodies, descriptions, and placeholders, then save and invoke them via intellisense.

Hide and remove code snippets in Visual Studio Code by editing the language JSON snippet files, using the command palette to manage custom and built-in snippets, and toggling IntelliSense visibility.