Motoko Formatter ·

A Prettier plugin for the Motoko programming language.

Setup

After making sure Node.js is installed on your local machine, run the following command in your Motoko project directory:

npm install --save-dev prettier prettier-plugin-motoko

Command-line usage

Format your Motoko files using the Prettier CLI:

npx prettier --write --plugin=prettier-plugin-motoko **/*.mo

Check if your Motoko files are correctly formatted:

npx prettier --check --plugin=prettier-plugin-motoko **/*.mo

Alternatively, check out mo-fmt for a standalone Motoko formatter CLI:

mo-fmt **/*
mo-fmt -c **/*

VS Code support

• Works out of the box with the Motoko extension.
• Compatible with the the Prettier extension.

Customization

Configure the formatter by creating a .prettierrc file in your project directory (full documentation).

Add the following line to your config file:

{
    "plugins": ["prettier-plugin-motoko"],
}

Example .prettierrc configuration with default values:

{
    "plugins": ["prettier-plugin-motoko"],
    "bracketSpacing": true,
    "printWidth": 80,
    "semi": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false
}

Motoko-specific options

motokoOrganizeImports (default: false)

Automatically organize and sort import statements. When enabled, imports are:

• Grouped by prefix (ic:, canister:, mo:, and relative paths)
• Sorted alphabetically within each group
• Combined when importing from the same path
• Separated by blank lines between groups
• Comments within the import section are preserved and moved below the organized imports

Example:

// Before formatting
import Text "mo:base/Text";
import Utils "./utils";
import Core "canister:core";
import Array "mo:base/Array";

// After formatting with motokoOrganizeImports: true
import Core "canister:core";

import Array "mo:base/Array";
import Text "mo:base/Text";

import Utils "./utils";

To enable this option, add it to your .prettierrc:

{
    "plugins": ["prettier-plugin-motoko"],
    "motokoOrganizeImports": true
}

motokoRemoveLinesAroundCodeBlocks (default: false)

Remove extra blank lines at the beginning and end of code blocks.

Multiple languages

Prettier will apply the same configuration to Motoko, JavaScript, CSS, HTML, and any other supported languages.

You can specifically configure Motoko files using a configuration override in your .prettierrc file:

{
    "overrides": [{
        "files": "*.mo",
        "options": {
            "bracketSpacing": true
        }
    }]
}

Ignoring code

Skip formatting a statement using a prettier-ignore comment:

// prettier-ignore
func ignored<A>(a:A){a};

func formatted<B>(b : B) { b };

Contributing

Feel free to submit a GitHub issue to report a bug or suggest a feature.

If you're interested in becoming an open-source contributor, be sure to check out the open issues in case anything catches your eye.