home / skills / andrelandgraf / fullstackrecipes / code-style-setup

code-style-setup skill

safe

This skill configures Prettier and TypeScript with VSCode and EditorConfig for consistent, error-free formatting and typing.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill code-style-setup

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

581 B

---
name: code-style-setup
description: Configure Prettier for code formatting and TypeScript for typechecking. Includes VSCode settings and EditorConfig for consistent code style. Skips ESLint/Biome to avoid config complexity.
---

# Editor and Linting Setup

To set up Editor and Linting Setup, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/code-style-setup`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/code-style-setup
```

Overview

This skill configures Prettier for consistent code formatting and TypeScript for reliable type checking across a TypeScript-based full stack AI app. It provides ready-to-use VSCode settings and an EditorConfig file to enforce editor defaults. The setup intentionally skips ESLint/Biome to keep configuration simple and focused on formatting and types.

How this skill works

The skill adds a Prettier configuration and integrates TypeScript compiler options tailored for production-ready patterns. It drops in a .editorconfig and recommended VSCode settings to align whitespace, line endings, and file encoding across contributors. No linter is installed or enforced, reducing merge friction and avoiding complex lint rules.

When to use it

Starting a new TypeScript full stack project where formatting and type safety are priorities.
Onboarding contributors who need consistent editor behavior without lint enforcement.
Adding quick, low-friction code-style guarantees to an existing repository.
Preparing a Shadcn-style component library or recipe set that needs reproducible formatting.
When you want to avoid the complexity of ESLint/Biome but still enforce types and formatting.

Best practices

Commit the .editorconfig and Prettier config early to minimize style drift.
Enable TypeScript strict mode for stronger guarantees and fewer runtime surprises.
Add a pre-commit hook (e.g., via Husky) to run prettier --check and tsc --noEmit.
Document the minimal editor setup in CONTRIBUTING.md so new developers mirror settings.
Keep Prettier configuration minimal and rely on project-wide defaults to reduce debates.

Example use cases

A full stack AI app where consistent formatting prevents noisy diffs in UI components.
A recipe or registry repository (Shadcn-style) that publishes reusable patterns with uniform style.
A small team that prefers simple tooling: formatting + typechecking without linter debates.
Migrating a mixed-codebase to a single formatting standard before introducing stricter rules.

FAQ

Why skip ESLint or Biome?

Skipping linters keeps the initial setup simple and avoids enforcing opinionated rules that can block contributors; linters can be added later if needed.

Will Prettier alone catch type errors?

No. Prettier handles formatting only; TypeScript is included to catch type errors during development and CI.