Creating a Shareable Prettier Configuration for Multiple Projects

·

3 min read

Creating a Shareable Prettier Configuration for Multiple Projects

Introduction

For developers working on multiple projects, maintaining a consistent code format across them can be tedious. This tutorial guides you through creating a shareable Prettier configuration, distributed as an NPM package, to ensure consistent formatting across all your projects.

Brief Overview of Prettier

Prettier is a popular code formatting tool that transforms source code into a more readable and consistent format. It supports various options for customization, allowing you to tailor the formatting to your or your team's preferences.

Prettier Options

Example of Prettier options:

OptionDescription
printWidthSpecify the line length that the printer will wrap on.
tabWidthSpecify the number of spaces per indentation-level.
useTabsIndent lines with tabs instead of spaces.
semiPrint semicolons at the ends of statements.
singleQuoteUse single quotes instead of double quotes.
trailingCommaPrint trailing commas wherever possible in multi-line comma-separated syntactic structures.
proseWrapWrap prose based on printWidth
bracketSpacingPrint spaces between brackets in object literals.

Full options are available here.

Creating a Shareable Prettier Configuration

The full source code for this tutorial is available on GitHub.

Step 1: Initialize a New Project

Create a new project:

npm init -y
# or
pnpm init

Step 2: Update package.json

Customize your package.json:

{
  "name": "@pyk/prettier-config",
  "version": "1.0.0",
  "description": "pyk's personal prettier config",
  "main": "index.js",
  "license": "MIT",
  "homepage": "https://pyk.sh/create-shareable-prettier-configuration/",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pyk/prettier-config.git"
  },
  "bugs": {
    "url": "https://github.com/pyk/prettier-config/issues"
  },
  "author": {
    "name": "pyk",
    "email": "gm@pyk.sh",
    "url": "https://github.com/pyk"
  },
  "keywords": ["prettier", "prettier-config"],
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "prettier:check": "prettier --check ."
  },
  "prettier": "./index.js",
  "devDependencies": {
    "prettier": "2.7.1"
  }
}

Step 3: Create index.js

Create an index.js file with your Prettier configuration:

module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  // ... other options ...
};

Step 4: Publish Your Package

Publish the package to NPM:

npm publish
# or
pnpm publish

Step 5: Use Your Configuration in Other Projects

  1. Install the Configuration Package:

     npm install --save-dev --save-exact prettier @pyk/prettier-config
     # or
     pnpm add --save-dev --save-exact prettier @pyk/prettier-config
    
  2. Update the package.json in Your Project:

     "prettier": "@pyk/prettier-config",
    

Continuous Integration and Git Hooks

For CI/CD pipelines or Git hooks, use:

npm run prettier:check
npm run prettier:write
# or
pnpm prettier:check
pnpm prettier:write

Conclusion

By following these steps, you can create and maintain a centralized Prettier configuration for multiple projects, making code formatting easier and more consistent.

For more information and the source code, visit my GitHub repository.