@zeitonline/prettier-config

This package provides a shared Prettier configuration for projects at DIE ZEIT.

This is an ESM-only package.

Installation & Usage

1. Add .editorconfig

Make sure to add the .editorconfig file to your project as well, since prettier picks up a few settings from it:

wget https://raw.githubusercontent.com/zeitonline/frontend-code-style/main/.editorconfig

2. Install the package

For example using npm:

npm install --save-dev @zeitonline/prettier-config

3. Create or update the .prettierrc.mjs file

Add a .prettierrc.mjs file to the root of your project, import and spread the shared configuration. You can choose to use the base configuration or the Svelte-specific configuration.

Base Config

Intended for all JS projects.

import zonPrettierConfig from '@zeitonline/prettier-config';

export default {
	...zonPrettierConfig,
};

Svelte Config

Intended for Svelte or SvelteKit projects. This config extends the base config and adds Svelte-specific plugins and rules.

import zonPrettierConfigSvelte from '@zeitonline/prettier-config/svelte';

export default {
	...zonPrettierConfigSvelte,
};

4. (Optional) Add a .prettierignore file

To your project to exclude files from formatting, add a .prettierignore file to the root of your project. For example:

package-lock.json

*.md
*.css
*.scss
*.html
*.yml
*.yaml
*.lock

5. (Optional) Add a format script to your package.json

To conveniently format your files you may add a new script to your package.json:

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

Further Reading

• Prettier Docs
• prettier-plugin-svelte