Mar 5, 2025

Why You Should Lint, Type-Check, and Format Your Code

Why You Should Lint, Type-Check, and Format Your Code

Debugging unformatted code at 3 am isn’t fun. Lint it. Type-check it. Format it. And get back to building cool stuff.

  • Jorge Perez Avatar
    Jorge Perez
    @jperezverse
    •
    3 min read
    •

    • Let’s be honest, writing clean code isn’t glamorous.

    No one gets up in the morning thinking, “I can’t wait to format my if statements today!” But here’s the thing: clean, maintainable code saves you from future headaches.

    That’s where tools like ESLint, TypeScript, and Prettier come in. They’re your silent guardians, ensuring your code doesn’t end up like spaghetti at a potluck.

    Lint Your Code with ESLint

    Think of ESLint as your code’s life coach. It keeps you from making silly mistakes like forgetting a semicolon or naming a variable x instead of something, you know, useful.

    Why it matters:

    • No Bugs on Stupid Stuff: Catch those dumb errors before they haunt you at 3 am.
    • Team Consistency: Everyone writes code the same way, even that one guy who thinks he’s above formatting rules.

    Type-Check Your Project with TypeScript

    TypeScript is your safety net, making sure you don’t pass a banana when your function expects an apple. It’s like JavaScript, but with common sense.

    Why it matters:

    • Prevents Runtime Disasters: Stop those “undefined is not a function” errors cold.
    • Gives You Superpowers: You’ll know exactly what your code expects and returns, so you’re not constantly guessing.

    Format Your Code with Prettier

    Prettier doesn’t care about your feelings. It takes your messy code, fixes it, and tells you to move on with your life.

    Why it matters:

    • Stop Debating Tabs vs. Spaces: Just let Prettier decide and focus on actual coding.
    • Your Code Looks Professional: Like a nice haircut for your project.

    How to Set It Up

    Here’s how we made this workflow happen (because you deserve clean code too):

    1. Install These Lifesavers:

    Here are the dependencies needed to make it happen.

    npm install concurrently eslint prettier typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
    • ESLint: Finds your dumb mistakes.
    • TypeScript: Stops your dumb mistakes from breaking your app.
    • Prettier: Makes your code look good, even if you don’t.
    • Concurrently: Lets you run all these checks at once.
    1. Update your package.json

    Add the necessary scripts to your package.json file.

    "scripts": {
  "lint": "next lint",
  "lint:fix": "next lint --fix",
  "typecheck": "tsc --noEmit",
  "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
  "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
  "check": "concurrently --names \"lint,typecheck,format\" --prefix-colors \"yellow,blue,green\" \"npm run lint\" \"npm run typecheck\" \"npm run format:check\""
}

    How to Use It

    1. Format Your Files:

    Run this after you create or edit anything:

    npm run format:write

    It fixes your formatting so your code doesn’t look like it was written in a hurricane.

    1. Check Everything Before Committing:

    One command to rule them all:

    npm run check

    This runs:

    • Linting (ESLint): Keeps your code smart.
    • Type-Checking (TypeScript): Keeps your code safe.
    • Format-Checking (Prettier): Keeps your code pretty.
    1. Commit Only When It Passes:

    No excuses. If npm run check fails, fix it before you commit.

    Why Bother?

    Because debugging bad code at 3 a.m. isn’t fun. Because your future self (and your teammates) deserve better. Because no one respects a messy codebase.

    Lint it. Type-check it. Format it. And get back to vibing.

    You Might Also Like...