本文档为Visual Studio Code (VSCode) 的配置指南，旨在帮助用户快速上手并充分利用其强大功能。VSCode 是一款轻量级但功能强大的源代码编辑器，内置支持 JavaScript、TypeScript 和 Node.js，并拥有丰富的扩展生态系统，可支持其他语言和工具。本文涵盖了从安装到调试的各个方面，包括界面概述、基本设置、常用扩展推荐、工作区设置、键盘快捷键、集成终端以及源代码控制集成等，旨在帮助开发者打造高效的编码环境。

💻 **安装与初始设置**: 介绍了在 Windows、macOS 和 Linux 上的 VSCode 安装步骤，以及首次启动时的界面概览，包括活动栏、状态栏、编辑器区域和面板等核心组件，帮助用户快速熟悉编辑器界面。

⚙️ **基本设置优化**: 强调了根据个人偏好调整 VSCode 基本设置的重要性，例如主题选择（Dark+, Light+, Monokai, Solarized）、字体设置、自动保存、Tab 大小和格式化等，以提升编码效率和舒适度。

🧩 **扩展推荐与使用**: 详细介绍了各类实用扩展，包括通用类（Prettier, ESLint, EditorConfig）、语言支持类（Python, C/C++, Java Extension Pack, JavaScript (ES6) code snippets）、主题类（Material Theme, One Dark Pro）和效率类（GitLens, Live Share, Path Intellisense），指导用户安装和配置这些扩展以增强 VSCode 的功能。

🗂️ **工作区配置与管理**: 阐述了 VSCode 工作区的概念，介绍了如何打开和保存工作区，以及如何通过 `.vscode` 文件夹中的 `settings.json`、`launch.json`、`tasks.json` 和 `extensions.json` 文件进行项目特定设置、调试配置、构建任务配置和推荐扩展配置。

⌨️ **快捷键与调试技巧**: 总结了常用的 VSCode 键盘快捷键，如快速打开、显示命令面板、触发建议、转到定义、格式化文档、启动调试和切换终端等，并详细介绍了如何创建 `launch.json` 文件进行调试配置，设置断点和使用调试控制。

Visual Studio Code (VSCode) is a lightweight but powerful source code editor that runs on your desktop. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages and tools.

Table of Contents

InstallationFirst Launch and Interface OverviewEssential SettingsExtensionsWorkspace SetupKeyboard ShortcutsIntegrated TerminalSource Control IntegrationDebuggingAdditional Resources

Installation

Windows

Visit the VSCode download pageClick on the Windows download buttonRun the installer (.exe file)Follow the installation wizardCheck the options to:
Create a desktop iconAdd “Open with Code” to Windows Explorer context menuRegister Code as an editor for supported file types

macOS

Visit the VSCode download pageClick on the Mac download buttonOpen the downloaded .zip fileDrag Visual Studio Code.app to the Applications folderOptional: Add VSCode to your Dock

Linux

Visit the VSCode download pageChoose the appropriate package for your distribution (.deb, .rpm, etc.)For Debian/Ubuntu:

For Red Hat/Fedora:

First Launch and Interface Overview

When you first open VSCode, you’ll see:

Welcome Page: Contains quick links to common commands and recent projectsActivity Bar: Left sidebar with icons for different views:
Explorer: File browserSearch: Find and replaceSource Control: Git integrationRun and Debug: Debug panelExtensions: Manage extensions
Status Bar: Bottom bar showing information about the current file and editorEditor Area: Main coding area (can be split into multiple editors)Panel: Bottom panel that can show terminal, output, problems, etc.

Essential Settings

Access settings by:

Windows/Linux: File > Preferences > SettingsmacOS: Code > Preferences > Settings

Recommended settings to consider:

Theme:
File > Preferences > Color Theme (or Ctrl+K Ctrl+T)Popular choices: Dark+, Light+, Monokai, Solarized
Font:

Auto Save:

Tab Size:

Formatting:

Extensions

VSCode’s power comes from its extensions. To install extensions:

Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X)Search for extensions by nameClick Install

Essential extensions by category:

General

Prettier – Code formatter: Consistent code formatting

ESLint: JavaScript linting

EditorConfig: Maintain consistent coding styles

Languages

Python: Full Python support

C/C++: C and C++ intellisense, debugging

Java Extension Pack: Java development tools

JavaScript (ES6) code snippets: Snippets for JavaScript

Themes

Material Theme: Popular theme pack

One Dark Pro: Atom’s iconic theme

Productivity

GitLens: Supercharge Git capabilities

Live Share: Collaborative editing

Path Intellisense: Autocomplete filenames

Workspace Setup

A workspace in VSCode represents one or more folders that are opened in an editor window.

Open a folder: File > Open Folder (Ctrl+K Ctrl+O)Save workspace: File > Save Workspace As…

Workspace settings: Create a .vscode folder in your project with:
settings.json: Project-specific settingslaunch.json: Debugging configurationstasks.json: Build task configurationsextensions.json: Recommended extensions

Example settings.json for a JavaScript project:

Keyboard Shortcuts

VSCode has many keyboard shortcuts. Here are the most essential ones:

Ctrl+P: Quick Open, Go to FileCtrl+Shift+P: Show Command PaletteCtrl+Space: Trigger suggestionF12: Go to DefinitionAlt+F12: Peek DefinitionShift+Alt+F: Format documentF5: Start debuggingCtrl+`: Toggle terminalCtrl+B: Toggle sidebarCtrl+/: Toggle line commentCtrl+K Ctrl+C: Add line commentCtrl+K Ctrl+U: Remove line comment

Integrated Terminal

VSCode includes an integrated terminal:

Open terminal: View > TerminalMultiple terminals: Click the plus iconSwitch terminals: Use the dropdown

Source Control Integration

VSCode has built-in Git support:

Initialize repository: Click the Source Control icon and “Initialize Repository”Stage changes: Click the + next to modified filesCommit changes: Enter a message and press Ctrl+EnterPush/Pull: Use the ellipsis menu (…) for additional Git commandsVisual diff: Click on a modified file to see changes

Debugging

Set up debugging for your project:

Create a launch configuration:
Click the Run and Debug iconClick “create a launch.json file”Select your environment
Set breakpoints: Click in the gutter next to line numbersStart debugging: Press F5Use debug controls: Continue, Step Over, Step Into, Step OutWatch variables: Add expressions to the Watch panel

Additional Resources

Official DocumentationVSCode Tips and TricksVSCode YouTube ChannelVSCode Keyboard Shortcuts Reference

The post Visual Studio Code Setup Guide appeared first on MarkTechPost.