@ongov/prettier-config-ontario-frontend

This package provides the Prettier configuration adhering to the Ontario.ca Frontend JavaScript style guide, which will be released in the future. This configuration aims to ensure consistency and readability in Ontario.ca Frontend projects.

Table of Contents

• Features
• Installation
• Usage
• Customizing
• Documentation
• Contributing
• License
• Versioning

Features

• Print width: Limits lines to 80 characters to enhance readability across various devices and editors, ensuring code does not stretch too far horizontally.

• Tab width: Utilizes 2 spaces for indentation, promoting a clean and consistent visual structure across the codebase.

• Semicolons: Enforces the use of semicolons at the end of statements, reducing the potential for parsing errors and improving code clarity.

• Single quotes: Prefers single quotes for strings to maintain consistency and readability, except where overridden by specific file type configurations.

• Trailing commas: Requires trailing commas in multi-line objects, arrays, function parameters, etc., facilitating easier version control diffs and cleaner code addition or removal.

• Bracket spacing: Ensures spaces are present inside object literal braces, {}, improving readability by visually separating blocks of code.

• Bracket same line: Configures the closing angle bracket of elements to be placed on the same line as the last prop, aligning with common formatting practices.

• Arrow parens: Always requires parentheses around arrow function parameters, ensuring clarity and consistency, especially in functions with single parameters.

• Overrides for markdown: Specifically for .md files, double quotes are allowed, acknowledging the different stylistic and functional requirements of markdown content.

Installation

To integrate the Ontario.ca Frontend Prettier configuration into your project, choose one of the following methods based on your package manager:

Using npm

1. First, you need to install Prettier if it's not already installed:

   npm install prettier --save-dev

2. Next, install the @ongov/prettier-config-ontario-frontend package:

   npm install @ongov/prettier-config-ontario-frontend --save-dev

Using pnpm

1. First, you need to install Prettier if it's not already installed:

   pnpm add prettier -D

2. Next. install the @ongov/prettiers-config-ontario-frontend

   pnpm add @ongov/prettier-config-ontario-frontend -D

Usage

Basic configuration

To quickly apply the Ontario.ca Frontend Prettier configuration, create a .prettierrc file in your project's root directory and specify the name of the package as its value:

"prettier-config-ontario-frontend"

Customizing

For projects that require customization beyond the base configuration, you can extend and override specific settings. Create a .prettierrc.js file in your project's root directory, import the Ontario configuration, and then add your modifications:

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

This approach allows you to maintain the foundational style guide while tweaking aspects that are project-specific or according to your team's preferences.

Documentation

Explore the documentation to learn about every aspect of the toolkit--from installation and file structure to adding analytics and preparing for deployment. The documentation is available at developer.ontario.ca.

Contributing

Contributions to the Ontario.ca Frontend Prettier Config are welcome. Whether it's bug reports, feature requests, or contributions to code, we appreciate your input.

Check out our CONTRIBUTING.md file for guidelines on how to contribute.

License

This project is licensed under the Open Government Licence - Ontario. Feel free to use, modify, and distribute it as needed.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.