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

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

  • Origin

  • Preliminary Research

  • Sprint 1: Foundations

  • Sprint 2: Initial Customizations

  • Sprint 3: Readability Prep

  • Sprint 4: Readability Analysis

  • Finalizing the Project

  • Publishing & Showcase

Origin

Prettier-er began as an effort to create a senior project that stood apart from typical web apps or trendy AI demos. We wanted something challenging yet widely useful. Given our shared frustrations with Prettier's inflexible formatting rules, a customizable formatter quickly emerged as an ideal choice. After briefly considering a document translation tool, we ultimately selected Prettier-er for its practicality, technical depth, and potential for real-world impact via the VS Code marketplace.

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

Screenshot: original unformatted JavaScript snippet
Original (unformatted)
Screenshot: same snippet after default Prettier formatting
Prettier default
Screenshot: same snippet after Prettier-er custom formatting
Prettier-er custom (All settings enabled)

Key Features

Personalized One-Click Formatting

Instantly apply your favorite formatting styles directly through VS Code's built-in settings—no configuration files, no hassle. Customize your coding environment effortlessly, exactly the way you like it.

Real-Time Readability Analysis

Get instant, actionable feedback on how readable your code really is. Prettier-er flags issues like excessive line length or confusing nesting, and offers tips to help you make your code clearer for yourself and your team.

Outcomes & Reflections

What We Accomplished

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

What We Learned

  • Deep dive 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 & signed VSIX pipelines.
  • Agile ceremonies (two-week sprints, peer reviews) kept 5 developers and a mentor in sync & cut merge conflicts to near-zero.
View Technical Documentation