Add get started with F# walkthrough to vscode splash page?

[jkone27]

C# and python have it, seems many extensions provide this, can we add one for F# as well? maybe it can help adoption/test for new comers?

[baronfel]

Sure, we'd happily take any contributions here. You can learn more about contributing a walkthrough here: https://code.visualstudio.com/api/references/contribution-points#contributes.walkthroughs

[jkone27]

i asked chatgpt and here is what i got for detailed instructions, just as a starting point.

Certainly! Here’s a step-by-step guide to create a walkthrough for learning F# using Ionide in Visual Studio Code, referencing a NuGet package, and learning the fundamentals of let. We’ll be using Visual Studio Code’s walkthrough contribution points as specified in the documentation.

1. Setting up the Walkthrough

First, you'll need to create a new walkthrough for your extension in the package.json file of the Ionide repository.

Step 1: Add the Walkthrough Contribution

Open the package.json file and add the following under the contributes section:

"contributes": {
    "walkthroughs": [
        {
            "id": "fsharp-getting-started",
            "title": "Getting Started with F#",
            "description": "Learn the basics of F# with Ionide in VS Code.",
            "steps": [
                "fsharp-getting-started.install-ionide",
                "fsharp-getting-started.create-fsx",
                "fsharp-getting-started.let-fundamentals",
                "fsharp-getting-started.nuget-reference"
            ]
        }
    ],
    "walkthroughSteps": [
        {
            "id": "fsharp-getting-started.install-ionide",
            "title": "Install Ionide",
            "description": "Ensure you have the Ionide-fsharp extension installed. Ionide brings F# support to Visual Studio Code.",
            "media": {
                "image": "images/install-ionide.png"
            },
            "completionEvents": ["onCommand:workbench.extensions.search"]
        },
        {
            "id": "fsharp-getting-started.create-fsx",
            "title": "Create an .fsx Script",
            "description": "Create a new F# script file (.fsx) to start writing F# code.",
            "media": {
                "image": "images/create-fsx.png"
            },
            "completionEvents": ["onCommand:workbench.action.files.newUntitledFile"]
        },
        {
            "id": "fsharp-getting-started.let-fundamentals",
            "title": "Learn `let` Fundamentals",
            "description": "Understand how to use `let` to define values in F#.",
            "media": {
                "image": "images/let-fundamentals.png"
            },
            "completionEvents": ["onCommand:editor.action.insertSnippet"]
        },
        {
            "id": "fsharp-getting-started.nuget-reference",
            "title": "Reference a NuGet Package",
            "description": "Learn how to reference a NuGet package in your F# script using `#r`.",
            "media": {
                "image": "images/nuget-reference.png"
            },
            "completionEvents": ["onCommand:editor.action.insertSnippet"]
        }
    ]
}

2. Creating the Walkthrough Steps

Step 2: Install Ionide

Title: Install Ionide
Description: Ensure you have the Ionide-fsharp extension installed. Ionide brings F# support to Visual Studio Code.
Image: A screenshot showing how to install Ionide from the Extensions view.
Completion Event: Triggered when the user searches for extensions.

{
    "id": "fsharp-getting-started.install-ionide",
    "title": "Install Ionide",
    "description": "Ensure you have the Ionide-fsharp extension installed. Ionide brings F# support to Visual Studio Code.",
    "media": {
        "image": "images/install-ionide.png"
    },
    "completionEvents": ["onCommand:workbench.extensions.search"]
}

Step 3: Create an .fsx Script

Title: Create an .fsx Script
Description: Create a new F# script file (.fsx) to start writing F# code.
Image: A screenshot showing how to create a new file in VS Code.
Completion Event: Triggered when the user creates a new file.

{
    "id": "fsharp-getting-started.create-fsx",
    "title": "Create an .fsx Script",
    "description": "Create a new F# script file (.fsx) to start writing F# code.",
    "media": {
        "image": "images/create-fsx.png"
    },
    "completionEvents": ["onCommand:workbench.action.files.newUntitledFile"]
}

Step 4: Learn let Fundamentals

Title: Learn let Fundamentals
Description: Understand how to use let to define values in F#.
Image: A screenshot or code snippet showing the usage of let.
Completion Event: Triggered when the user inserts the snippet for let.

{
    "id": "fsharp-getting-started.let-fundamentals",
    "title": "Learn `let` Fundamentals",
    "description": "Understand how to use `let` to define values in F#.",
    "media": {
        "image": "images/let-fundamentals.png"
    },
    "completionEvents": ["onCommand:editor.action.insertSnippet"]
}

Create a snippet for let usage:

"F# Let Binding": {
    "prefix": "letbinding",
    "body": [
        "let ${1:name} = ${2:value}"
    ],
    "description": "Insert a basic let binding"
}

Step 5: Reference a NuGet Package

Title: Reference a NuGet Package
Description: Learn how to reference a NuGet package in your F# script using #r.
Image: A screenshot showing the usage of #r "nuget:...".
Completion Event: Triggered when the user inserts the snippet for #r.

{
    "id": "fsharp-getting-started.nuget-reference",
    "title": "Reference a NuGet Package",
    "description": "Learn how to reference a NuGet package in your F# script using `#r`.",
    "media": {
        "image": "images/nuget-reference.png"
    },
    "completionEvents": ["onCommand:editor.action.insertSnippet"]
}

Create a snippet for NuGet package reference:

"F# NuGet Reference": {
    "prefix": "nuggetref",
    "body": [
        "#r \"nuget:${1:PackageName}, ${2:Version}\""
    ],
    "description": "Insert a NuGet package reference"
}

3. Creating Images

Ensure you create images or screenshots corresponding to each step. Place these images in the images directory within the extension’s folder.

4. Testing the Walkthrough

Once you have added all the steps and images, package your extension and test the walkthrough in Visual Studio Code. You can do this by loading the extension in development mode.

5. Submitting the Pull Request

After testing and ensuring everything works as expected, submit your changes as a Pull Request to the Ionide repository. Provide a detailed description of the changes and the purpose of the walkthrough.

This step-by-step guide should help users get started with F# using Ionide in Visual Studio Code effectively.

[jkone27]

what could be the steps?

1 - check dotnet-sdk is intalled, if not link to install dotnet (ionide is already installed else this tutorial wouldnt be available by defaut in vscode)
2 - create an .fsx script, fastest way to start in 1 file
3 - let value binding and nested bindings
4 - let function binding and nested function bindings
5 - pipe operator |> and partial application
6 - create a module and open it
7 - open System.Console and assign Console.Readline
8 - let a,_ = 1,2 (tuples)
9 - let lst = [ 1 ; 2 ; 3] or vertical without ";"
10 - let arr = [ | 1 ; 2 ; 3 |] or vertical withot ";"
11 - create a .net "C# dictionary" [ ("first",1) ; ("second",2) ] |> dict
12 - create a .net "C# List" [ 1 ; 2 ; 3 ] |> ResizeArray
13 - create a mutable binding: let mutable x = 0 ; x <- 1
14 - install a nuget package via #r nuget "Newtonsoft.Json" and use it