prettier-compare

Compares Biome and Prettier formatting and intermediate representation outputs for JavaScript, TypeScript, CSS.

25.5k|1.2k|Updated Jul 27, 2023
One-click install
npx skills add https://github.com/biomejs/biome --skill prettier-compare
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prettier-compare
Source: https://github.com/biomejs/biome/tree/main/.claude/skills/prettier-compare
Command: npx skills add https://github.com/biomejs/biome --skill prettier-compare

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that Biome's code formatting aligns precisely with Prettier's output, catching and resolving any discrepancies before they impact code quality.

Core Features & Use Cases

  • Formatter Validation: Directly compare Biome's formatting output against Prettier's for JavaScript, TypeScript, CSS, and more.
  • Debugging Tool: Ideal for diagnosing and fixing subtle differences in code styling.
  • Use Case: When you've made changes to Biome's formatter, use this Skill to verify that the new output matches Prettier's expected results for a given code snippet.

Quick Start

Use the prettier-compare skill to compare the formatting of the code snippet 'const x = 1;' using the JavaScript language.

Frequently Asked Questions about prettier-compare

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare Biome and Prettier formatting differences?

To debug code style differences between Biome and Prettier, you compare their formatting output and intermediate representations directly. This helps diagnose subtle discrepancies in code styling for languages like JavaScript and TypeScript.

How do I validate Biome formatter changes against Prettier output?

To validate Biome formatter changes against Prettier output, run a direct comparison on a given code snippet. This verifies that the new formatting output aligns precisely with Prettier's expected results before impacting code quality.

Do I need specific tools to run Biome and Prettier formatting comparisons?

Yes, executing Biome and Prettier formatting comparisons requires specific environment tools. You need to have both bun and wasm-bindgen-cli installed to successfully run the validation and comparison processes.

Does Biome formatting comparison support CSS and TypeScript?

Yes, Biome formatting comparison supports CSS and TypeScript. The validation mechanism directly compares Biome's formatting output against Prettier's for JavaScript, TypeScript, CSS, and more.

Why does Biome formatting not match Prettier for my code snippet?

Biome formatting might not match Prettier for your code snippet due to subtle differences in their intermediate representations. Comparing the formatting and IR directly helps diagnose and resolve these code styling discrepancies.