United Kingdom: +44 (0)208 088 8978

Fantastic F# and Azure Developer Extensions for VSCode

If you're using F# and VS Code, make sure to check out this list of extensions to make your developer experience as productive and enjoyable as possible!

When I have time to actually code these days, I tend to jump between the "big three" F# code editors; each have their own strengths. One of VS Code's best features is its extensibility model - there are thousands of them, from language plugins to data visualisation to source control managers. Here's a list of some of the extensions that I use on a regular basis when working with F# and Azure which I find improve my productivity as well as make coding that bit more enjoyable (or less painful, depending on your perspective!).

Code Editing

Ionide

Ionide is the defacto F# extension for VS Code. Completely free to use (although you should consider contributing to the project if you use it commercially), it contains not only support for F# the language, but also full integration with code navigation and shortcuts as well as a selection of refactorings.

Better Comments

Better Comments highlights your code comments, such as //TODO in a different colour, and also includes a nice navigation panel to allow you to quickly locate such comments quickly and easily.

EditorConfig for VS Code

This plugin attempts to override user/workspace settings with settings found in standard .editorconfig files. Useful if you want a project to confirm to certain guidelines across a team - so useful not just in commercial projects but also if you have an OSS project and want contributors to follow a consistent style.

Path Intellisense

This clever extension will automatically show you files and directories as soon as you open a quote (") with what looks like a valid path e.g. "/foo/" will provide a listing of all files in the "foo" folder. This is also useful for finding relative paths to scripts and DLLs, although F#5's built-in script NuGet support has somewhat lessened the need for this.

Bracket Pair Colorizer 2

If you use SAFE Stack and the Elmish model, this extension is invaluable. It highlights corresponding start and end brackets with different colours (for nesting), and highlights brackets that don't have an associated open or close.

Indent Rainbow

Another visual aid, this extension will overlay indents of e.g 4 spaces with a lightly coloured background. If you put one space too many or too few, it'll highlight that line in red. Especially for beginners to F# who are not used to whitespace-sensitivity, this extension is invaluable to help you track such errors.

Source Control

gitignore

The gitignore extension provides you with an easy way to create "default" gitignore files that support the most common setups. There's one for Visual Studio that I use often - ignore the name, it works fine with VSCode too, and includes matches for F# things like Ionide's local database cache file. Use this extension to make sure you don't find out that someone has accidentally committed that 10mb file into git!

Git Graph

Git Graph shows a nice embedded UI into VS Code for the tree of commit history. It includes some of the more common tasks as well, such as merging, pulling and checking out different branches. If you need a simple UI to visually see what's happening on your repository, Git Graph fits the bill.

GitHub Pull Requests and Issues

If you're a user of GitHub (and, let's face it, if you're doing any form of Git today, there's a very, very high chance that you are!) then you should take a look at this extension. It allows you to not only create repositories directly from with VS Code, but also handle pull requests directly in the editor - from adding code review comments to approving a PR to even creating issues through TODO comments. One caveat is that it doesn't seem to work quite as well with multiple accounts - for example, I haven't figured out how to let me create a new repository in our company account rather than my personal GH area.

GitLens

A more powerful tool, GitLens provides all sorts of integrations into VSCode for git repositories, including line-by-line highlighting of who last made a change (almost like an "always on" git blame) as well as more extensive integration of git commands. I personally have backed away from this tool as it requires a fair bit of effort to tune to exactly how you like - and I found all of the information it provides overwhelming - but if you're a power git user, you can do worse than check this out.

Azure

Azure Account

The Azure Account extension is a kind of "base" extension that others use; it allows you to sign in to your Azure account, select a subscription and so on. You'll need this for some of the others listed below!

ARM Template Viewer

If you're an infrastructure-as-code kinda developer on Azure, you'll have no doubt looked at ARM templates. This extension provides a visual map of the components that you've created, including dependency chains. For Farmer development, this extension is an invaluable way to rapidly see what resources Farmer creates.

Azure Resource Manager Tools

On the same subject, this extension provides a handy set of snippets, error highlighting and so on. So if for some reason you've decided to create ARM templates by hand, rather than use Farmer (why!), then you'll almost certainly want this extension.

Azure Resources

This preview extension provides you with a way to visually navigate through all your Azure resources without leaving VS Code in a handy tree view. It also has a set of "child" extensions that provide more information on specific resource types, such as the Azure App Service extension.

Azure Storage

The Azure Storage extension allows you to view blobs directly from VS Code, including copying, downloading and deleting them. Very handy, and much quicker than the bloated Azure Storage Explorer tool.

Working with Data

XML Formatter

This handy extension provides a code formatter for XML documents, which you can apply using the standard VS Code "Format Document" command (SHIFT + ALT + F).

Rainbow CSV

Rainbow CSV is a simple to use extension which will automatically highlight each column of your CSV in a different colour so that you can more easily distinguish between them. This is especially useful for a wide document with many columns.

Excel Viewer

If you need something a little more than Rainbow CSV, the Excel Viewer (which also works with CSV files) offers you a tabular read-only view of your data, complete with sorting and filtering capabilities. Again, very useful if you're in Code and wish to quickly interrogate a file without leaving the IDE.

CSV to Markdown Table Converter

If you're looking to create some markdown content, you'll sometimes want to insert data from a table sourced from e.g. a CSV file. This extension allows you to highlight some CSV content and immediately convert it into a markdown table, with headers.

SQL Server

The SQL Server extension allows you to execute queries and view results directly within VS Code. It comes complete with auto-complete and type checking for your queries, and can save a list of well-known connections for you, too. For many use cases, you can easily use this instead of e.g. firing up SQL Server Management Studio, so I'd strongly advise testing this out.

REST Client

If you're developing back-end web applications, you're probably using something like Postman (or just the browser itself) to test out your endpoints. The REST Client is a powerful extension that lets you test out arbitrary HTTP endpoints, as well as script entire sets of calls with full support for headers and authentication etc. If you're doing any form of back-end web development, this extension is a must-have.

Download File

You'll be surprised how often you use this last extension. As the name suggests, it's simple: you provide a URL, and it downloads the contents of that resource to your workspace. This is especially useful for e.g. working with type providers that can work from local files as well as remote URLs - you can test out the provider with the remote url, and if the data looks good, download it and then move to using the offline file.

Miscellaneous

Color Manager

A useful extension that contains a built-in colour picker palette, as well as integrations for auto-completion values. If you're working with colours for e.g. CSS files, this is a handy tool to have.

Draw.io Integration

I like using Draw.IO, especially since the files can be browsed online relatively easily as well as the fact that they're quite lightweight. This is a full extension to create and edit diagrams, directly from within Code. If you're creating an architecture diagram for your application, you could do worse than give this a look!

Summary

One of VS Code's greatest assets is its extensibility. In this post, I've shown some of the key extensions that you should be looking at if you're using F# and Azure today on VS Code - hope you found it useful!

Have (fun _ -> ())

Isaac