Code Formatting: Why Prettier, Linters, and Beautifiers Matter

What Is a Code Beautifier?

A code beautifier (or formatter) parses source code into an abstract syntax tree (AST) and reprints it according to a fixed set of style rules — indentation, line length, quote style, trailing commas, brace placement. The output is semantically identical to the input; only whitespace and formatting change.

The key insight: when formatting is automated, developers stop arguing about style in code reviews and focus on logic instead.

Formatter vs Linter

These tools have overlapping but distinct jobs:

Formatter (Prettier, gofmt, rustfmt): Rewrites code to a canonical style. Non-negotiable — it produces one correct output.
Linter (ESLint, Pylint, Clippy): Reports problems — unused variables, unsafe patterns, type mismatches — and sometimes auto-fixes them. Rules are configurable.

Use both. Run the formatter first, then the linter. If they conflict, disable the linter rule that overlaps with the formatter (e.g., turn off ESLint's indent rule when using Prettier).

How Prettier Works

Prettier uses a "doc IR" (intermediate representation) approach. After parsing to AST, it converts the AST to an IR of printing commands (concat, group, indent, line), then runs a line-length fitting algorithm to decide what fits on one line vs. what should be broken across lines.

// Input — developer wrote this
const result = someFunction(   firstArg,   secondArg,  thirdArg  )

// Prettier output (80-char print width, 4 args → multi-line)
const result = someFunction(
  firstArg,
  secondArg,
  thirdArg,
);

Supported Languages

Modern beautifiers support many languages via plugins:

Prettier: JS/TS, JSX, CSS/SCSS/Less, HTML, JSON, YAML, Markdown, GraphQL
Language-native: gofmt (Go), rustfmt (Rust), black (Python), dotnet format (C#)
Generic: ToolsVito's Code Beautifier handles 15+ languages without any local install

Setting Up Prettier in a Project

npm install --save-dev prettier

# .prettierrc
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

# Format all files
npx prettier --write .

# Check (for CI — fails if formatting differs)
npx prettier --check .

Enforcing in CI

# GitHub Actions step
- name: Check formatting
  run: npx prettier --check .

# Pre-commit hook (via husky + lint-staged)
# package.json
{
  "lint-staged": {
    "*.{js,ts,css,md}": "prettier --write"
  }
}

The pre-commit hook approach formats on save; CI acts as a safety net for code pushed without the hook.

Editor Integration

All major editors support format-on-save via Prettier plugins:

VS Code: esbenp.prettier-vscode extension + "editor.formatOnSave": true
JetBrains IDEs: built-in Prettier support under Languages & Frameworks → JavaScript → Prettier
Neovim: conform.nvim or null-ls with Prettier

Format Code Instantly

Need to quickly format a snippet? Use ToolsVito's Code Beautifier — paste any code, select the language, and get properly formatted output instantly.