Prettier and Type Checking in CI

Formatting With Prettier

Prettier formats code; ESLint finds problems. Let Prettier own formatting (and disable ESLint formatting rules with eslint-config-prettier).

Example

npm install --save-dev prettier
npx prettier --write .

Example output

src/main.ts 32ms
src/routes/orders.ts 12ms
{
  "semi": true,
  "singleQuote": false,
  "printWidth": 110,
  "trailingComma": "all"
}

tsc --noEmit in CI

Bundlers like Vite, esbuild and Next.js dev mode do not fail on type errors (they only strip types). Add an explicit type-check step to CI so broken types never reach main.

Example

npx tsc --noEmit

Example output

src/cart.ts:14:22 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

14   addToCart(sku, "2");
                        ~~~

Found 1 error in src/cart.ts:14
# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npx tsc --noEmit
      - run: npx eslint .
      - run: npx prettier --check .
      - run: npm test

Tip: Add "typecheck": "tsc --noEmit" to package.json scripts and run it in a pre-push hook with Husky or lefthook.