Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Package.json Presets

You can use the config file to store some package.json presets that you can easily reuse among different projects or packages with similar characteristics, like scripts or dependencies.

Just like tsconfigs and global configurations, package.json presets can also extend one another.

Example

typescript:
  package_json_presets:
    # The base from which all the packages from a specific project will start
    base:
      author:
        name: Bruce Wayne
        email: i-may-or-may-not-be-batman@gotham.com
      license: Apache-2.0
      bugs:
        url: joker.com

    # Another preset defining some common dependencies and scripts
    frontend:
      extends: ["base"]
      scripts:
        build: vite build
        dev: vite dev
      devDependencies:
        # By default, these will be converted into version ranges
        # starting from the actual latest version for them
        tailwindcss: latest
        svelte: latest
        vite: latest

    # This will inherit the settings from `base` and `frontend`
    svelte_frontend:
      extends: ["frontend"]
      # But it can also override values selectively
      license: MIT

  package_presets:
    svelte_frontend:
      package_json: svelte_frontend
      dir: packages/svelte_frontend

After we run

sketch ts package --preset svelte_frontend

We get this output in the package.json file:

â„šī¸ Typescript and Oxlint are always added by default (along with Vitest for non-root packages), unless no_default_deps is set to true.

{
  "name": "svelte_frontend",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "license": "MIT",
  "packageManager": "pnpm",
  "scripts": {
    "build": "vite build", 
    "dev": "vite dev"
  },
  "bugs": {
    "url": "joker.com"
  },
  "author": {
    "name": "Bruce Wayne",
    "email": "i-may-or-may-not-be-batman@gotham.com"
  },
  "devDependencies": {
    "oxlint": "^1.16.0", 
    "svelte": "^5.39.2", 
    "tailwindcss": "^4.1.13", 
    "typescript": "^5.9.2", 
    "vite": "^7.1.6", 
    "vitest": "^3.2.4"
  },
  "dependencies": {}
}