Prepare our repo

Before we start building our application, we need to spend a little time preparing our repo.

In this post, we'll use pnpm to create our package.json file, install prettier, and configure husky and lint-staged to format any changed files with prettier when we commit them. We'll also create a minimal .gitignore file.

Create package.json

To generate a package.json file, I ran pnpm init inside our project directory. This created a package.json file with a few defaults:

{
  "name": "discord-server-info",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

These defaults are weak and don't really fit our use case so I updated the file to contain much more information:

{
  "name": "discord-server-info",
  "private": true,
  "license": "MIT",
  "description": "Explore Discord server data and statistics",
  "keywords": [
    "discord",
    "discord.js",
    "next.js",
    "prisma"
  ],
  "repository": "https://github.com/developer-dao/discord-server-info",
  "readme": "https://github.com/Developer-DAO/discord-server-info#readme",
  "bugs": "https://github.com/Developer-DAO/discord-server-info/issues",
  "scripts": {},
  "dependencies": {}
}

Let's look at some of the changes I made:

• removed version
  • since I already know that this package.json will eventually serve as the root for our monorepo, it won't have a version
• added description, keywords, repository, readme, bugs
  • these provide additional context about our package
• created empty dependencies
  • since this is the root package.json, we'll only use dependencies (because the distinction between dependencies and devDependencies doesn't exist at the root)

Create .gitignore

This file will eventually contain many files and folders that we don't want to commit to our repo, but for now we'll just add node_modules:

node_modules/

Create .prettierrc

This file contains the options for how prettier formats our files. I mostly use the default option, but I prefer a few overrides:

{
  "proseWrap": "always",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

Install prettier

To install prettier, I ran pnpm i -D prettier.

This adds prettier to our devDependencies. As mentioned above, we won't be using devDependencies but prettier has to be in this list of the next step to work.

We'll fix that later.

Configure husky and lint-staged

To install and configure husky and lint-staged, I ran pnpm dlx mrm@2 lint-staged.

This utility detects a number of tools in our repo that lint-staged supports and automatically installs + configures the dependencies we need for them.

In this case, it:

• detected prettier and installed husky and lint-staged
• added a prepare script which runs husky install so that husky will automatically be installed in each contributor's local environment
• installed husky in my local environment (.husky directory)

• added a lint-staged configuration block to package.json:
  

  "lint-staged": {
    "*.{js,css,md}": "prettier --write"
  }
  

Since I know ahead of time the types of files we'll be using in this project, I updated the lint-staged configuration to target them:

"lint-staged": {
  "*.{js,ts,tsx,md,json,yml}": "prettier --write"
}

Rename devDependencies to dependencies

Our final step is to change devDependencies to dependencies in our package.json file:

"dependencies": {
  "husky": "^8.0.1",
  "lint-staged": "^12.4.2",
  "prettier": "^2.6.2"
}

We also need to run pnpm i for this update to take effect.

---

With all of these changes made, we now have the tooling in place to automatically format the files in our codebase with prettier anytime a contributor commits them.

You can view the PR for these changes here: https://github.com/Developer-DAO/discord-server-info/pull/9