Implementation

By leveraging this shared configuration, developers across various projects can ensure uniform code styling and formatting, eliminating the need for individual configurations and reducing inconsistencies between codebases. This unified approach not only saves time previously spent on adjusting and maintaining Prettier settings but also minimizes the chances of divergent formatting choices across projects, fostering a more cohesive and standardized codebase. With this shared Prettier configuration package, our team can focus more on actual code development, rather than concerning themselves with the intricacies of code formatting, ultimately boosting productivity and facilitating seamless collaboration within our engineering ecosystem.

Getting Started

Implementing the ruleset into your project is an easy and straightforward process. Start by installing the package, then proceed to generate an prettier.config.js configuration file in the root and import the appropriate profile.

Installation

To install the package, do this:

$ cd your-project-folder

$ npm install --save-dev prettier @under-io/prettier

Choose a Profile

The ruleset currently offers support for two distinct "profile" strings. These profiles allow you to choose the appropriate set of lint rules tailored to your specific project needs.

• with-tailwind - This profile is specifically tailored to accommodate and optimize code formatting for projects utilizing TailwindCSS, ensuring the Prettier settings align with Tailwind's specific styling requirements.

• without-tailwind - This profile does all of the above but does not include the Tailwind-specific rules.

  Opt for the with-tailwind profile if your project integrates TailwindCSS on the frontend.

After choosing a profile, create an prettier.config.js config file at the root of your project that imports the appropriate profile, as shown below:

prettier.config.js

import { withoutTailwind, withTailwind } from '@under-io/prettier'

/** When using withoutTailwind **/
export default withoutTailwind

/** When using withTailwind **/
export default {
    ...withTailwind,
    /** Optionally define the location of your tailwind stylesheet (defaulted to ./app/globals.css) **/
    tailwindStylesheet: './app/globals.css',
}

Making Changes

Testing changes locally before publishing is straightforward. The easiest way to test updates is by creating a .tgz package using npm pack and installing it in a local project.

Run the following command in the root of the repository:

npm pack

This generates a .tgz file in the project directory, which bundles the package as it would appear when published.

In a separate project where you want to test the package, paste the .tgz file and run:

npm install /path/to/@under-io-prettier-1.0.0.tgz

Replace @under-io-prettier-1.0.0.tgz with the name of the generated .tgz that you copied

Publishing

Publishing changes to @under-io/prettier follows an automated workflow using Changesets and our repository pipeline.

When you've finished making changes, run the Changeset CLI to generate a new version bump:

npm run changeset

This will prompt you to describe the change and determine whether it's a patch, minor, or major update.

Then commit and push the changes, including the generated changeset file. Once the PR is created, the pipeline takes over and handles publishing to npm automatically.

License

Distributed under the MIT License. See LICENSE.txt for more information.

@under-io/prettier is part of the Under family of projects.