Perfect F# React Dev Setup in F# Fable with VS Code,  Formatting/Linting
Tags: fsharp, webdev, react, vscode
Published: 2021-09-08 11:38:36

## Why this Post?
I want to help make the switch from **Javascript/Typescript React** to **[F# Fable](https://fable.io/)** 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](https://lodash.com/), 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](https://marketplace.visualstudio.com/items?itemName=Ionide.Ionide-fsharp) of course, which is bundled with:
  - [Fantomas](https://github.com/fsprojects/fantomas): the code formatter
  - [FSharpLint](https://fsprojects.github.io/FSharpLint/): the Lint suggestions

- [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.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!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duudg9ra3n30txmybr8v.png)


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:

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

#### Before
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quj760y5a7lia5m9xasy.png)

#### After
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fftg6u0wescpdmbnvle.png)


## 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](https://github.com/Zaid-Ajaj/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à!
<img width="100%" style="width:100%" src="https://media.giphy.com/media/l4Jz3a8jO92crUlWM/giphy.gif?cid=790b761172caf4c6b74e077646155c1efd3f85cf1cf3f86d&rid=giphy.gif&ct=g">


## 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!