Formatting code with deno fmt

Introduction

Unlike Node.js, Deno isn’t just a runtime for JavaScript/TypeScript applications. Running an application is definitely the primary work, but that’s not all Deno can do. Deno is a complete tool chain that contains a number of developer-friendly tools like REPL, linter, formatter, tester, coverage, bundler, etc.

Deno’s built-in formatter has been introduced a long time back. Initially it was a simple code formatter that worked well, but had no customizations. It did the job pretty well, but lacked some critical customizations that were needed by organizations.

Recently, Deno’s built-in formatter has been updated to support some customizations. The number of customizations is still very small, but certainly better than having none.

In this article, we’ll take an example code and run it through Deno’s formatter (fmt subcommand) with default & custom options.

Deno’s formatter

Deno’s built-in formatter is available through fmt subcommand. There are two type of inputs it can take:

• List of files to consider: If unspecified, all the relevant files will be considered in current directory recursively. If specified, only the listed files will be considered.
• Additional options: If unspecified, the default options are used. If specified, this would overwrite the default behavior.

List of files

The list of files is optional and can be omitted. Here are some examples:

$ deno fmt
// consider all relevant files in current subdirectory recursively
$ deno fmt file1.ts someDir/file2.ts
// only considers file1.ts and file2.ts

Additional options

There are a few additional options that can be provided to alter the default behavior. Let’s go through all the additional options along with their defaults (if unspecified):

• — check: If specified, the files are only checked, but not modified. The default behavior is to modify files in place.
• — options-indent-width: If specified, the provided indent width would be used. The default is 2.
• — options-line-width: If specified, this sets the maximum line width for code. Once the width reaches, the line is broken into multiple lines. The default is 80 (seems a bit outdated for current standards).
• — options-single-quote: If specified, double quotes are replaced with single quotes. The default is to keep double quotes as is.
• — options-use-tabs: If specified, tabs are used instead of spaces. The default behavior is to use spaces instead of tabs.

These are the available customizations. As we can see that the number isn’t large, but is enough for basic use cases.

In short: In default mode, all files are modified using max width as 80, indent width as 2, spaces instead of tabs.

As part of formatting code, Deno also follows general rules, like:

• Spaces on both sides of =, {}, etc.
• Spaces before round braces, i.e. function definition or function calls
• KVs within objects have spaces at start, in between, and at the end
• All the conditionals, loops have braces
• A comma at the end of the list of options, parameters, etc.
• Extra lines breaks are removed from everywhere
• etc.

Example

Now that we’ve gone through the basics, let’s take an example and run Deno’s formatter with default and customized options. We’ll be using images to show the code and transformations.

Here is our example HTTP server:

(VS code has been set to show ruler at 80, 100, and 120 column numbers)

Step 1: Default formatter

The default formatter can be executed by running command:

$ deno fmt app.ts 
/Users/mayankc/Work/source/denoExamples/app.ts
Checked 1 file
$ 

Upon completion, app.ts is formatted using default guidelines. Here is the output of formatted app.ts:

The code looks better and consistent.

Step 2: Setting max width

The default formatter can be customized by setting max width to 120. With this, some line wraps that we’ve seen in previous step won’t be there.

$ deno fmt --options-line-width=120 app.ts 
/Users/mayankc/Work/source/denoExamples/app.ts
Checked 1 file
$ 

Here is the output of formatted app.ts:

(The purple ruler is for column number 120)

Step 3 — Setting indent size

The default indent size is 2. Instead of 2, it can also be set to 4 as that’s also a popular indent size.

$ deno fmt --options-indent-width=4 app.ts 
/Users/mayankc/Work/source/denoExamples/app.ts
Checked 1 file
$ 

Here is the output of formatted app.ts:

Step 4 — Using single quotes

The final customization is to use single quotes instead of double.

$ deno fmt --options-single-quote app.ts 
/Users/mayankc/Work/source/denoExamples/app.ts
Checked 1 file
$ 

Here is the output of formatted app.ts: