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 aversion
- since I already know that this
- 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 usedependencies
(because the distinction betweendependencies
anddevDependencies
doesn't exist at the root)
- since this is 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 installedhusky
andlint-staged
- added a
prepare
script which runshusky install
so thathusky
will automatically be installed in each contributor's local environment - installed
husky
in my local environment (.husky
directory) -
added a
lint-staged
configuration block topackage.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
Top comments (0)