Formatter (Prettier) installation and usage

This guide shows how to install and setup the Prettier Formatter when using VS Code. This formatter will work for all currently relevant files, except C# which uses the standard dotnet formatter already on your system (if you have followed the setup guide).

1. Search for esbenp.prettier-vscode in the VS Code extension manager and download it.
2. Change the VS Code default formatter to Prettier by going to File → Preferences → Settings → Default Formatter then choosing Prettier - Code formatter.
3. Also change the Format On Save setting to true.
4. To confirm that it is working, use the format file shortcut in a file (Shift+Alt+F standard in Windows, right click and look for format document to see command).
5. The file .prettierrc, which exists in the root of frontend folder, includes the configurations.
6. When using the above command in a C# for the first time you will be directed to choose a different formatter, choose ms-dotnettools.csharp.

This config example will make prettier the formatter for all languages and auto-format on saving:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

This config will make prettier the formatter for JavaScript and JSON, and automatically format on saving. All other languages retain their system-default formatter:

{
    "editor.formatOnSave": false,
     "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
}