The Ultimate Guide to a Clean, Consistent Package.json Structure

Have you ever opened a project and felt totally overwhelmed by a messy package.json? We've all been there. Having random field ordering, scattered dependencies, and inconsistent structure can make even the simplest project feel chaotic.

Normalizing your package.json

Realistically, there's no one right answer to this problem, but that doesn't mean we can't standardize the field ordering based on what's considered logical:

{
  "name": "project-name",
  "version": "0.0.1",
  "description": "What this project does",
  "keywords": ["relevant", "tags"],
  "homepage": "https://project.com",
  "license": "MIT",
  "author": "Your Name",
  "private": true,
  "files": ["dist"],
  "main": "index.js",
  "types": "index.d.ts",
  "type": "module",
  "exports": {...},
  "bin": {...},
  "repository": {...},
  "scripts": {...},
  "dependencies": {...},
  "devDependencies": {...},
  "peerDependencies": {...},
  "engines": {...}
}

Why should you care?

Having a consistent structure for all your projects can really help:

• Knowing exactly where to find what you need is key.
• Switching between projects is requiring less mental effort.
• Maintaining clean, organized codebases makes for better first impressions.

The Impact

Trying to be a neutral and predictable solution, our approach tries to save you time by eliminating the need to hunt for scripts or look for type fields. The world is a better place when everything has its place and is in its place.

It's a small change, but it makes a big difference. Your future self will thank you.

Bonus: VS Code Extension fields

If you're getting into VS Code extension development, you'll need a few extra fields in your package.json, right? We've got your back. We'll mirror the logic order of the other template we mentioned above:

{
  "name": "extension-name",
  "displayName": "Extension Display Name",
  "publisher": "your-publisher",
  "version": "0.0.1",
  "description": "What your extension does",
  "keywords": ["vscode", "extension"],
  "categories": ["Other"],
  "galleryBanner": {...},
  "icon": "images/icon.png",
  "homepage": "https://your-extension-homepage.com",
  "license": "MIT",
  "author": "Your Name",
  "private": false,
  "files": ["dist"],
  "main": "./dist/extension.js",
  "types": "./dist/extension.d.ts",
  "type": "module",
  "exports": {...},
  "bin": {...},
  "repository": {...},
  "scripts": {...},
  "dependencies": {...},
  "devDependencies": {...},
  "peerDependencies": {...},
  "eslintConfig": {...},
  "engines": {...}
  "activationEvents": ["..."],
  "contributes": {...}
}