---
description: JavaScript Tooling
alwaysApply: false
---

# JavaScript Tooling

Modern JavaScript tooling configuration and best practices.

## TypeScript Configuration

```jsonc
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2022"
  }
}
```

## Package Management

- `"type": "module"` in package.json, `"engines": { "node": ">=20" }`
- Pin exact versions for apps, ranges for libraries
- Audit regularly (`npm audit`), prefer zero-dependency packages
- Check bundle size before adding (`bundlephobia.com`), remove unused (`npx depcheck`)

## Linting (ESLint Flat Config)

```javascript
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.strictTypeChecked,
  { rules: {
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/no-floating-promises': 'error',
    '@typescript-eslint/no-misused-promises': 'error',
    'no-console': ['warn', { allow: ['warn', 'error'] }],
  }},
);
```

## Build Tools

- **Vite** (frontend): `target: 'es2022'`, sourcemaps, manual chunks for vendor splitting
- **tsup** (libraries): ESM output, `dts: true`, `treeshake: true`, `splitting: true`

## Git Hooks

```jsonc
{
  "scripts": {
    "prepare": "husky",
    "check": "npm run typecheck && npm run lint && npm run test"
  },
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml}": ["prettier --write"]
  }
}
```

## Debugging

- Node.js: `node --inspect-brk app.js` + Chrome DevTools
- Use structured logging over `console.log` — never log passwords, tokens, or PII