Prepare our repo
Tags: prettier
Published: 2022-05-29 16:52:58

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

In this post, we'll use [`pnpm`](https://pnpm.io/) to create our `package.json` file, install [`prettier`](https://prettier.io/), and configure [`husky`](https://github.com/typicode/husky) and [`lint-staged`](https://github.com/okonet/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:

```json
{
  "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:

```json
{
  "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:

```json
{
  "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`:

    ```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:

```json
"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:

```json
"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