Visual Studio Code Setup Guide: Installation, Settings, and Extensions

Visual Studio Code (VSCode) Overview

Visual Studio Code (VSCode) is a lightweight yet powerful source code editor designed for desktop use. It supports JavaScript, TypeScript, and Node.js out of the box and offers a wide range of extensions for various programming languages and tools.

Installation
First Launch and Interface Overview
Essential Settings
Extensions
Workspace Setup
Keyboard Shortcuts
Integrated Terminal
Source Control Integration
Debugging
Additional Resources

Installation

Windows

Visit the VSCode download page.
Click on the Windows download button.
Run the installer (.exe file).
Follow the installation wizard, ensuring to check options for creating a desktop icon and adding “Open with Code” to the context menu.

macOS

Visit the VSCode download page.
Click on the Mac download button.
Open the downloaded .zip file and drag Visual Studio Code.app to the Applications folder.
Optionally, add VSCode to your Dock.

Linux

Visit the VSCode download page.
Select the appropriate package for your distribution (.deb, .rpm, etc.).

First Launch and Interface Overview

Upon first opening VSCode, you will encounter:

Welcome Page: Quick links to common commands and recent projects.
Activity Bar: A left sidebar with icons for different views such as Explorer, Search, Source Control, Run and Debug, and Extensions.
Status Bar: Displays information about the current file and editor.
Editor Area: The main coding area, which can be split into multiple editors.
Panel: The bottom panel shows terminal, output, and problems.

Essential Settings

Access settings via:

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

Recommended settings include:

Theme: File > Preferences > Color Theme.
Font: Customize according to preference.
Auto Save: Enable to save changes automatically.
Tab Size: Set according to coding standards.

Extensions

Enhance VSCode’s functionality through extensions:

Click the Extensions icon in the Activity Bar or press Ctrl+Shift+X.
Search for extensions by name and click Install.

Essential extensions include:

General: Prettier, ESLint, EditorConfig.
Languages: Python, C/C++, Java Extension Pack.
Themes: Material Theme, One Dark Pro.
Productivity: GitLens, Live Share, Path Intellisense.

Workspace Setup

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

Open a folder: File > Open Folder.
Save workspace: File > Save Workspace As…
Workspace settings: Create a .vscode folder in your project containing configuration files.

Keyboard Shortcuts

Key shortcuts for efficient navigation:

Ctrl+P: Quick Open, Go to File
Ctrl+Shift+P: Show Command Palette
Ctrl+Space: Trigger suggestion
F12: Go to Definition
F5: Start debugging

Integrated Terminal

VSCode features an integrated terminal:

Open terminal: View > Terminal.
Create multiple terminals: Click the plus icon.

Source Control Integration

VSCode includes built-in Git support:

Initialize repository: Click the Source Control icon.
Stage changes: Click the + next to modified files.
Commit changes: Enter a message and press Ctrl+Enter.

Debugging

Set up debugging for your project:

Create a launch configuration via the Run and Debug icon.
Set breakpoints by clicking in the gutter next to line numbers.
Start debugging by pressing F5.

Additional Resources

AI in Business

Explore how artificial intelligence can enhance your business processes:

Identify areas for automation and customer interactions where AI adds value.
Determine key performance indicators (KPIs) to measure the impact of AI investments.
Select customizable tools that align with your business objectives.
Start small, gather data, and gradually expand AI applications.

If you need guidance on managing AI in your business, contact us at hello@itinai.ru.