Configure Prettier

Prettier is a code formatter that helps ensure consistent code style and formatting across your entire project. It can automatically format code in various languages, including JavaScript, HTML, CSS, and more.

Ontario.ca Frontend provides an integrated Prettier experience out of the box. Each time you create a new Ontario.ca Frontend project, you will see a prompt like this:

Add and configure Prettier for opinionated code formatting?Yes❯ No

When you select "Yes," Ontario.ca Frontend will automatically install prettier and @ongov/prettier-config-ontario-frontend as dependencies in your project and create prettier.config.js and .prettierignore file in the root of your project that includes the default configuration for Ontario.ca Frontend projects.

You can run npm run format every time you want to run Prettier to format your project's codebase.

Add Prettier to an existing project

If you did not choose to install Prettier during the project creation process, you can add it using the ontario-add-package CLI command.

From your terminal, run the ontario-add-package command from your project's root directory:

npx @ongov/ontario-frontend-cli ontario-add-package

Then select @ongov/prettier-config-ontario-frontend from the list of packages:

? Select packages to add: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ◯ @ongov/eslint-config-ontario-frontend❯◉ @ongov/prettier-config-ontario-frontend

This will install all related packages and configuration files.

Finally, add prettier --write as a script to package.json:

{  "scripts": {    "format": "prettier --write"  }}

You can now run npm run format from your terminal to format the files in your project.

Remove Prettier from an existing project

If you wish to remove Prettier from your project, you can do so using the ontario-remove-package CLI command.

From your terminal, run the ontario-remove-package command from your project's root directory:

npx @ongov/ontario-frontend-cli ontario-remove-package

Then select @ongov/prettier-config-ontario-frontend from the list of packages:

? Select packages to remove: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ◯ @ongov/eslint-config-ontario-frontend❯◉ @ongov/prettier-config-ontario-frontend

This will uninstall all related packages and configuration files.

Customize Prettier

The default configuration (@ongov/prettier-config-ontario-frontend) includes everything you need to format the standard files within an Ontario.ca Frontend project. However, there may be times where you want to extend, override, or disable any default rules. If you need to do that, import the @ongov/prettier-config-ontario-frontend configuration into prettier.config.js and export the modifications:

module.exports = {  ...require('@ongov/prettier-config-ontario-frontend'),  printWidth: 120,};

Ignoring code

You can use .prettierignore to ignore certain files and folders completely.

Create a .prettierignore file in the root of your project. .prettierignore uses gitignore syntax.

# Ignore artifactsnode_modulesdist# Ignore vendor assetssrc/assets/vendor/*# Ignore .njk files*.njk