Perfect F# React Dev Setup in F# Fable with VS Code, Formatting/Linting

Denis Ok — Wed, 08 Sep 2021 11:38:36 +0000

Why this Post?

I want to help make the switch from Javascript/Typescript React to F# Fable as smooth as possible, for those lucky or adventurous enough to do it 😀, and this post presents some of my findings.

Life: a Honeymoon with Javascript's Ecosystem

As a matter of fact, many JS/TS jobs in React/Angular came to me. Clearly the dev experience was comfortable to work in a team, especially to enforce clean and tidy code:

Automatically reorganize imports
Autoreformatting with Prettier
Best practices enforcement with ESLint
and so on... 🤪

F# and Fable's Appeal

The thing is, even with lodash, coding mildly complex data processing algorithms in JS/TS can very unwieldly pretty fast, so I often whine this would be so much easier in F#! and wonders: how is life with Fable nowadays?

A lot of issues can make the transition unpleasant. For example, a few years ago, Fantomas was no always so usable, it lacked robustness for some corner cases, messying your code.

The fact is: life is pretty great with F# in 2021.

VS Code Extensions: the minimum

To be comfortable with front-end dev in F#, you need:

Ionide of course, which is bundled with:
- Fantomas: the code formatter
- FSharpLint: the Lint suggestions
Indent Rainbow: for nested list based development 😀! Not so needed when doing HTML/JSX tags as you get context from the closing tags surrounding your cursor, but in Fable, it will save you headaches trying to find where to put the closing list bracket ] at the right indentation level!

Now let's tweak Fantomas for an optimized dev experience!

EditorConfig for nice Fable formatting

We are going to start with Fantomas' formatting which support the .editorconfig file.

The fsharp_single_argument_web_mode setting is indeed very important to have a formatting adapted to Fable, otherwise the default one is going to be impractical!

Create a .editorconfig file at the root of your folder with this following content:

[*.fs]
indent_size=2   # I feel 4 is a bit too much for front-end dev
fsharp_single_argument_web_mode=true

Before

After

Package Management: NuGet + NPM combined = Femto!

Working with Fable bindings consists in integrating NPM packages (code written in Javascript), as well as NuGet packages written in F# together.

Dealing with both package manager can be a burden, so please install femto, a very easy-to-use & magic dotnet CLI tool:

dotnet tool install femto --global

Then, if you need to install the Feliz Bulma package

These lines

# Nuget package
Install-Package Feliz.Bulma

# NPM package
npm install bulma

will be zipped into this single line!

femto install Feliz.Bulma

And voilà!

It's great to code in F# in 2021

F# has come a long way, I still remember when I used to be pretty happy with the tooling even with its imperfections: semantic syntax highlighting, IntelliSense, renaming, auto opening of namespaces/modules...

I guess it was fine for backend work with highly skilled, hardcore and disciplined seniors and a strict PR review process.

But having now worked in a team on front-end with heterogenous levels of developers, where we break and restructure our code much more differently and often, I can see that formatting & linting tools give an unexpected great added-value in this context!

I hope you found practical answers to help you hack comfortably and in harmony!

DEV Community: Denis Ok