VS Code formatter extension

Prettier-er

Your code, your style, on your terms.

Customize Prettier's formatter to match your style, and stay readable with a single click.

VS Code Marketplace DownloadsVS Code Marketplace Installs
View on GitHubGet it on Marketplace
Custom formatting preview

Project Overview

What is Prettier-er?

Prettier-er is a Visual Studio Code extension built on top of the popular Prettier formatter. While Prettier solves endless debates about code style by sticking to a single opinion, it leaves out anyone who wants even a bit of customization. If your preferred formatting style doesn't match Prettier's, you're usually stuck searching for workarounds or giving up altogether.

Prettier-er lets you control your code's appearance using simple VS Code workspace settings. Choose options like Allman-style braces, matrix-style arrays, or force objects and arrays to span multiple lines. These changes take effect instantly, and need no config files to manage.

On top of formatting, Prettier-er includes a Readability Analysis tool that reviews your code for potential problem areas. It checks things like average line length and nesting depth, and then offers suggestions to make your code easier to read.

Motivation

For our senior project, we wanted to solve a real problem, not just another web app demo. Prettier was an obvious target: its strict, one-size-fits-all approach annoyed anyone who needed even minor tweaks, while more flexible alternatives demanded heavy setup that most developers avoid.

Our answer was Prettier-er: an extension that keeps everything easy but gives you control over your formatting. Now, anyone can quickly set their favorite code style in VS Code and get real feedback on code clarity, whether they're a beginner or a seasoned dev.

Development Journey

Step 1 of 8

Origin

Prettier-er started as a senior project idea. We wanted to build something more technical than a standard class web app, and Prettier gave us a concrete problem to work on: its defaults are useful, but they do not leave much room for teams that prefer a different style. After comparing a few ideas, we chose a customizable formatter because it was practical, technically interesting, and publishable as a VS Code extension.

Project Impact

Custom Toggles

Instant style tweaks

Allman-style bracesForce single/multi-line objectsMatrix-style arraysOne-line getters/settersNew-line else/else-ifKeep multi blank linesRetain blank lines anywhereSame-line CSS selectors

Readability Metrics

Objective code checks

Average line lengthAverage bracket depthDot-chain lengthIdentifiers per lineWhitespace ratioComment-to-code ratioIdentifier-length check

Screenshots

Original (unformatted)
Prettier default
Prettier-er custom (All settings enabled)

Key Features

Personalized One-Click Formatting

Apply formatting preferences through VS Code's built-in settings, without adding separate config files. The goal was to keep the workflow close to normal Prettier while still letting users choose a few style details.

Real-Time Readability Analysis

Run a readability check from the editor and see where a file may be getting harder to scan. Prettier-er looks at issues like long lines and deep nesting, then reports the areas that may need attention.

Outcomes & Reflections

What We Accomplished

  • Shipped v1.0 to the VS Code Marketplace.
  • Added eight zero-config style toggles including Allman, matrix arrays, and blank-line retention.
  • Built a research-backed readability analyzer with 7 tunable metrics.
  • Maintained 100% unit-test pass rate across core, types, and extension repos.

What We Learned

  • Deep diving into Prettier's AST printer taught us that even "opinionated" tools can stay flexible with the right hooks.
  • Publishing to the marketplace highlighted the value of CI/CD and signed VSIX pipelines.
  • Agile ceremonies, peer reviews, and two-week sprints kept 5 developers and a mentor in sync while keeping merge conflicts low.
View Technical Documentation