PAVE Walkthrough: Explore the Visual Studio IDE with F#

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

This topic contains the following sections:

Configure the IDE

Create a Simple Application

Customize the Editor

Add Code to the Application

Debug and Test the Application

Build a release version of the application

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 applications more easily.

Figure 1: The Choose Default Environment Settings dialog box

Choose Development Settings dialog box

This walkthrough is written with Visual F# Development Settings applied. You can change your settings 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 application 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 application, you’ll spend most of your time in this central area.

Figure 2: The Visual Studio IDE

F# Settings in the Visual Studio IDE

By using the Options dialog box, you can further customize Visual Studio, such as changing the font face and size that’s used for text in the editor or the color theme that’s applied to the IDE. Depending on the settings combination that you’ve applied, some items in that dialog box might not appear automatically. You can make sure that all possible options appear by choosing 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 PAVE Customizing the Development Environment.

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

To create the console application

  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. Choose the F# Application template, and then name the project FsharpConsoleApp.

    New Project dialog box

As the following illustration shows, the FsharpConsoleApp project and solution, with the basic files for a Win32 console application, are created and automatically loaded into Solution Explorer. In addition, the file Program.fs is opened in the code editor.

Figure 4: Project items

F# Settings in the Visual Studio IDE

You can customize how code appears in the editor and how much coding help you want. For example, you can display a dash to represent white space, and you can display line numbers to make navigation easier. You can customize Visual Studio in some ways by using the Edit menu, and you can find more settings in the Options dialog box.

In the following procedures, you’ll customize the code editor in a couple of 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, expand F#, and then choose Line numbers.

    Setting line numbers in the Options dialog box

The contents of the code editor resembles the following illustration:

Code editor with line numbers and word wrap

For more information, see Customizing the Editor and Using IntelliSense.

Next, you’ll add code to display the word “hello” in the console window.

To display “Hello world.” in the console window

  1. In the file Program.fs, highlight all of the text, choose the Delete key, and then enter the following code:

    let string1 = "Hello"
    let string2  = "world."
    let helloWorld first second =
        first + " " + second
    helloWorld string1 string2
    |> printfn "%s"

    To display coding help as you enter code in the editor, choose the Ctrl+Spacebar keys or, on the menu bar, choose Edit, IntelliSense, Complete Word. When you start to enter text, a box appears, providing suggestions for the characters you have entered. For more information, see Using IntelliSense.

    Complete Word IntelliSense in the editor
  2. Save the changes to the file.

You’ll debug FsharpconsoleApp to verify that the word Hello appears in the console window.

To debug the application

  • 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 application too quickly for you to verify what text appeared in the console window.

You’ll use a breakpoint to force the application to pause during debugging.

To add a breakpoint

  1. Move the cursor to the following line: |> printfn "%s".

  2. 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.

  3. Choose the F5 key to restart the debugger.

    The debugger starts, and several tool windows appear. On the bottom of the IDE, the Autos, Locals, and Watch1 windows are docked together on the left side, and the Call Stack, Breakpoints, Command, Immediate, and Output windows are docked together on the right side. On the right side of the IDE, the IntelliTrace window is docked with Solution Explorer and Team Explorer.

    Debug window layout for F# applications

    Unfortunately, the console window still doesn’t display any text.

  4. Choose the SHIFT + F5 keys to stop the debugger.

Instead of starting the application with the debugger attached, you’ll run the application without the debugger attached to determine whether the code works. For more information, see <PAVEOVER>How to: Start Execution.

To start the application without the debugger

  1. On the menu bar, choose Debug, Start Without Debugging.

    The console window appears with the text Hello world and resembles this illustration:

    "Hello world." displayed in the console window
  2. Choose any key to stop running the application.

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

To clean the solution files and build a release version

  1. On 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 FsharpConsoleApp from Debug to Release.

    Select the Release build option on the toolbar
  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.