@lottiefiles/prettier-config

Shared Prettier configuration.

Table of contents

• Installation
• Usage
• Customizing configuration
• Integrations
  • IDE Integration
  • Lint-Staged Integration
• Changelog

Installation

1. Install plugin and dependencies.

Install Prettier and this plugin by running:

# Normal repository? Install in the project root.
pnpm add -D prettier @lottiefiles/prettier-config

# Monorepo? Install Prettier in the project root workspace.
pnpm add -DW prettier @lottiefiles/prettier-config

2. Create configuration file

Create a prettier.config.cjs file in your project root with the contents below:

module.exports = {
  ...require('@lottiefiles/prettier-config'),
};

Usage

Create a npm script entry in the root package.json as follows:

{
  "scripts": {
    "format": "prettier --loglevel=warn --no-editorconfig --write ."
  }
}

You can then run pnpm format to format your project using the command line or in CI pipelines.

You can use the editor integration options described below to get your files formatted as you save them in the IDE.

Customizing configuration

Do this only if absolutely required

You can override the company-wide base configuration by setting values in the prettier.config.cjs file.

module.exports = {
  ...require('@lottiefiles/prettier-config'),

  // Overrides:
  semi: false,
};

Integrations

IDE Integration

Read the Editor Integration documentation at the Prettier website for how to integrate with all IDEs.

VS Code

1. Install the prettier-vscode extension from the marketplace.
2. Add the following content to the settings.json file:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Note: If you prefer to apply the configuration to a project only, add the settings content above to a file named settings.json file in the .vscode folder at the root of your project. Create the file if it does not exist.

Lint-Staged Integration

Integrate formatting code before code is commited using git pre-commit hook events via lint-staged. (See docs on how to setup lint-staged)

lint-staged.config.cjs

module.exports = {
  '*': 'prettier --plugin=prettier-plugin-package --ignore-unknown --loglevel=warn --no-editorconfig --write',
};

Changelog

See CHANGELOG.md for the latest changes.