Walkthrough: Explore the Visual Studio IDE with C++

By completing this walkthrough, you’ll become familiar with many of the tools and dialog boxes that you can use when you develop apps with Visual Studio. You’ll create a simple “Hello, World”-style app while you learn more about working in the integrated development environment (IDE).

This topic contains the following sections:

Configure the IDE

Create a simple app

Customize the Code Editor

Add code to the App

Debug and test the App

Build a release version of the app

When you start Visual Studio for the first time, you must choose a settings combination that applies a set of pre-defined customizations to the IDE. Each combination has been designed to help you develop a certain kind of app.

Figure 1: Choose Default Environment Settings dialog box

Choose Default Environment Settings-Visual C++

This walkthrough is written with Visual C++ Development Settings applied. You can change your settings combination by using the Import and Export Settings Wizard. For more information, see How to: Change Select Settings.

After you open Visual Studio, you can identify the three basic parts of the IDE: tool windows, menus and toolbars, and the main window space. Tool windows are docked on the left and right sides of the app window, with Quick Launch, the menu bar, and the standard toolbar at the top. The center of the application window contains the Start Page. When you open a solution or project, editors and designers appear in this space. When you develop an app, you’ll spend most of your time in this central area.

Figure 2: Visual Studio IDE

IDE with Visual C++ settings applied

You can customize Visual Studio by using the Options dialog box. For example, you can change the typeface and size of the text that appears in the editor or the color theme of the IDE. Depending on the settings combination that you’ve applied, some items in that dialog box might not appear automatically. You can show all possible options by selecting the Show all settings check box.

Figure 3: Options dialog box

Options dialog box wirh Show all settings option

In this example, you’ll change the color theme of the IDE from light to dark.

To change the color theme of the IDE

  1. Open the Options dialog box.

    Options command on the Tools menu
  2. Change the Color theme to Dark.

    Dark color theme selected

The colors in Visual Studio should match the following image:

IDE with Dark Theme applied

To return the IDE to the Light color theme, repeat the previous steps, except choose Light in step 2. For more information, see Customizing the Development Environment.

When you create an app in Visual Studio, you first create a project and a solution. For this example, you’ll create a Windows console app.

To create a console app

  1. On the menu bar, choose File, New, Project.

    On the menu bar, choose File, New, Project

    Or use Quick Launch to open the New Project dialog box.

    In the Quick Launch box, specify new project
  2. In the Visual C++ category, choose the Win32 Console Application template, and then name the project GreetingsConsoleApp.

    Win32 Console application template
  3. When the Win32 Application Wizard appears, choose the Finish button.

    Win32 Console application wizard

The GreetingsConsoleApp project and solution, with the basic files for a Win32 console app, are created and automatically loaded into Solution Explorer. The GreettingsConsoleApp.cpp file is opened in the code editor. The following items appear in Solution Explorer:

Figure 4: Project items

Files for the solution in Solution Explorer

You can customize how code appears in the code editor. For example, you can display a dash to represent white space, or you can display line numbers to make navigation easier. You specify some customization options from the Edit menu, but you must open the Options dialog box to customize the IDE in other ways.

In the following procedures, you'll customize the code editor in some basic ways.

To enable word wrap

  • On the menu bar, choose Edit, Advanced, Word Wrap.

    On the Edit menu, choose Advanced, Word Wrap

To enable line numbers

  1. Open the Options dialog box.

    Options command on the Tools menu
  2. In the Text Editor category, choose the C/C++ node, and then select the Line numbers check box.

    Setting the Line numbers option

The contents of the code editor should resemble the following illustration:

GreetingsConsoleApp.cpp in the code editor

For more information, see Customizing the Editor.

Next, you'll add code to display the word "Hello" in the console window.

To display “Hello” in the console window

  1. In the GreetingsConsoleApp.cpp file, enter a blank line before the line return 0;, and then enter the following code:

    cout <<"Hello\n";

    A red squiggly line appears under cout. An error message appears if you point to it.

    Error text for cout

    The error message also appears in the Error List window. You can display the window by, on the menu bar, choosing View, Error List.

    cout is included in the <iostream> header file, which you've not yet declared.

  2. In the line after #include "stdafx.h", enter the following code:

    #include <iostream>
    using namespace std;

    You probably noticed that a box appeared as you entered code, providing suggestions for the characters that you entered. This feature, which is named IntelliSense, provides a collection of coding prompts, such as List Members, Parameter Info, Quick Info, Signature Help, and Complete Word, to help you write code faster. In addition, you can use code snippets, which are pre-defined blocks of code. For more information, see Using IntelliSense and Code Snippets.

    The red squiggly line under cout disappears when you fix the error.

  3. Save the changes to the file.

    Additional code added to fix cout error

You should debug GreetingsConsoleApp to verify whether the word "Hello" appears in the console window as you expected.

To debug the app

  • Start the debugger.

    Start Debugging command on the Debug menu

    The debugger starts and runs the code. The console window appears for a few seconds but closes quickly as the debugger stops running. The debugger completed running the app too quickly for you to verify what text appeared in the console window.

You’ll use a breakpoint to force the app to pause long enough to identify what text appears in the console window.

To add a breakpoint

  1. In the line return 0;, add a breakpoint from the menu bar.

    Toggle Breakpoint command on the Debug menu

    A red circle appears next to the line of code in the far left margin of the editor window.

  2. Choose the F5 key to start debugging.

    The debugger starts, and several tool windows appear. On the bottom of the IDE, the Autos, Locals, Threads, Modules, and Watch windows are docked together on the left side, and the Call Stack, Breakpoints, and Output windows are docked together on the right side.

    Debugger windows
  3. Navigate to the console window to verify that the word Hello appears. The UI should resemble this illustration:

    Hello text in the Windows Command window
  4. Choose the SHIFT + F5 keys to stop debugging.

For more information, see Debugging Preparation: Console Projects.

Now that you’ve verified that everything works, you can prepare a release build of the app.

To clean the solution files and build a release version

  1. From the menu bar, delete intermediate files and output files that were created during previous builds.

    The Clean Solution command on the Build menu
  2. Change the build configuration for GreetingsConsoleApp from Debug to Release.

    Build a release version of the application
  3. Build the solution.

    Build Solution command on the Build menu

Congratulations on completing this walkthrough! If you want to explore more examples, see Visual Studio Samples.