@snowball-tech/prettier-config NPM

Snowball Prettier Config

prettier-config prettier-config-dependants prettier-config-downloads prettier-config-score

This package provides a composable and opinionated Prettier configuration based on Snowball engineering standards.

This configuration supports:

HTML files;
CSS files;
TypeScript
JSX/TSX;
CSS-in-JS
TailwindCSS

Checkout all the config files to learn more about the configurations.

Installation

Using Yarn:

yarn add --dev @snowball-tech/prettier-config prettier

Or using NPM:

npm install --save-dev @snowball-tech/prettier-config prettier

Note that depending on the configuration you use, you might need to install additional dependencies like tailwindcss.

Usage

Default configuration

The package offers a default Prettier configuration containing only the base rules.

To use this default configuration, simply re-export it in you own Prettier configuration using JavaScript configuration file .prettierrc.js:

module.exports = require('@snowball-tech/prettier-config/.prettierrc')

Ignored files

Ignored files are defined in the .prettierignore file.

Complete configuration

You also have the possibility to use the full configuration, including:

base rules (including promise & unicorn)
TailwindCSS

module.exports = require('@snowball-tech/prettier-config/.prettierrc-tailwind')

Make your own configuration

Finally, you can also compose you own configuration using each set of configuration exposed by the config.

To do so, simply extend the configuration you want to use in your own Prettier and pick whichever you want in the list below:

It's recommended to always include the base configuration in the first position.

const config = require('@snowball-tech/prettier-config/.prettierrc-tailwind')

module.exports = {
  ...config,
  plugins: [...(config.plugins || []), 'prettier-plugin-my-awesome-plugin'],
}

⚠️ Important notes: when composing your own configuration, try to keep the configurations files in the order above to ensure the proper behavior of the formatter.

Of course, you can also extend any other configuration coming from any other config or plugin and add you own rules and overrides to your configuration.

Development

If you want to contribute, update or edit this Prettier configuration:

First, install the needed dependencies:

yarn

Or (if you use NPM):

npm install

Make the modifications you want
Test your updates

All your modification should be immediately picked up by the linter in your IDE or using the CLI scripts, so you can check that everything works as expected.

Commit and push your changes and open a Pull Request.
When your changes are approved and merged in the main branch, a new release will be automatically created and published to NPM.

Useful Commands

yarn run format-fix to format the code according to our formatting guidelines (using Prettier);
yarn run lint-fix: to check that the code matches our coding guidelines and automatically fix what can be fixed (using ESLint);
yarn run test: run all the unit tests;
yarn run test-dev: run the tests for modified components and re-trigger runs everytime something is modified;

Linting & Formatting

See the dedicated CONVENTIONS.md and TOOLING.md documentations.

Dependencies

Always remember to add dependency if you really need it to avoid cluttering the packages and degrading the performance both in the developers and users side.

It is your duty as a member of the Snowball's engineering team to help mainting the dependencies up to date. This means that you are expected and should help reviewing, testing and merging dependencies updates PRs on a regular basis.

The best way to do so is to regularly check the Renovate dashboard and the list of Pull Requests, for example every morning at the beginning of your day.

Also, see the dedicated TOOLING.md documentation for more information.