mauvehed.com
mauvehed's dotfiles for personal and work environments
1# Visual Studio Code Usage
2
3This document provides an overview of using Visual Studio Code (VS Code), including setup, key features, and customization relevant to this dotfiles environment.
4
5## Overview
6
7[Visual Studio Code](https://code.visualstudio.com/) is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go) and tools (like Docker, Git, and various linters).
8
9## Installation
10
11* **Download**: Download VS Code from the [official website](https://code.visualstudio.com/download).
12* **Package Managers**:
13 * **macOS (Homebrew)**: `brew install --cask visual-studio-code`
14 * **Linux**: Refer to [VS Code Linux documentation](https://code.visualstudio.com/docs/setup/linux) for instructions for your distribution.
15
16Installation might be managed by `chezmoi` if VS Code is part of your standard toolset defined in your dotfiles.
17
18Launch VS Code and open a terminal within it (`View > Terminal` or ``Ctrl+` ``) to use the `code` command-line interface for opening files and folders.
19
20## Key Features & Customization
21
22### Command Palette
23Access all available commands based on your current context by pressing `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (macOS).
24
25### Extensions
26VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow.
27* **Browse and Install**: Access the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or `Ctrl+Shift+X` / `Cmd+Shift+X`.
28* **Recommended Extensions**: VS Code often suggests extensions based on the files you open. You can also find popular extensions for your languages and frameworks in the Marketplace.
29* **Managing Extensions**: You can list your installed extensions from the command line:
30 ```sh
31 code --list-extensions
32 ```
33 To install an extension from the command line:
34 ```sh
35 code --install-extension <extension-id>
36 ```
37 Your `chezmoi` setup might manage a list of extensions to be installed automatically.
38
39### Settings
40Customize VS Code to your liking through its settings.
41* **UI**: Open settings via `File > Preferences > Settings` (`Code > Preferences > Settings` on macOS) or `Ctrl+,` / `Cmd+,`.
42* **JSON**: For more advanced configuration and to manage settings as code, you can edit the `settings.json` file directly. Access it via the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) by typing "Preferences: Open User Settings (JSON)".
43* **Workspace Settings**: You can also define settings specific to a project/workspace by creating a `.vscode/settings.json` file in your project root.
44* Your `chezmoi` setup likely manages your global `settings.json` file.
45
46### Settings Sync
47VS Code has built-in Settings Sync, which allows you to share your VS Code configurations—such as settings, keybindings, and installed extensions—across your different machines using a GitHub or Microsoft account.
48* **Enable/Disable**: Turn on Settings Sync from the Manage gear icon at the bottom of the Activity Bar, then "Turn on Settings Sync...".
49
50### Keybindings
51Customize keyboard shortcuts in VS Code.
52* **UI**: `File > Preferences > Keyboard Shortcuts` (`Code > Preferences > Keyboard Shortcuts` on macOS) or `Ctrl+K Ctrl+S` / `Cmd+K Cmd+S`.
53* **JSON**: For advanced customization, edit `keybindings.json`. Access it via the Command Palette with "Preferences: Open Keyboard Shortcuts (JSON)".
54* Your `chezmoi` setup might manage your `keybindings.json`.
55
56### Integrated Terminal
57VS Code has an integrated terminal (`View > Terminal` or `` Ctrl+` ``) so you can run shell commands directly within the editor.
58
59## GitHub Codespaces
60
61[GitHub Codespaces](https://github.com/features/codespaces) provides cloud-powered development environments. You can use VS Code (desktop or web) to connect to a Codespace, giving you a fully configured development environment in the cloud, often based on a `devcontainer.json` configuration in your repository (see `docs/docker-usage.md` for more on Dev Containers).
62
63### Benefits:
64* **Pre-configured environments**: Start coding immediately with environments tailored for your project.
65* **Access from anywhere**: Develop from any machine with a browser or VS Code.
66* **Consistent setup**: Ensures consistency across team members.
67
68## Resources
69
70* **Official VS Code Documentation**: [https://code.visualstudio.com/docs](https://code.visualstudio.com/docs)
71* **Introductory Videos**: [https://code.visualstudio.com/docs/getstarted/introvideos](https://code.visualstudio.com/docs/getstarted/introvideos)
72* **VS Code Extension Marketplace**: [https://marketplace.visualstudio.com/vscode](https://marketplace.visualstudio.com/vscode)
73* **Settings Sync Guide**: [https://code.visualstudio.com/docs/editor/settings-sync](https://code.visualstudio.com/docs/editor/settings-sync)
74* **GitHub Codespaces Documentation**: [https://docs.github.com/en/codespaces](https://docs.github.com/en/codespaces)
75
76This document covers the basics. VS Code is highly extensible and configurable; explore the official documentation to tailor it to your workflow.