NextJs TypeScript setup with Prettier, Husky.
source link: https://dev.to/ankusht2307/nextjs-typescript-setup-with-prettier-husky-3dih
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
NextJs TypeScript setup with Prettier, Husky.
Let's get started with the NextJs setup with TypeScript. The configuration will be scalable with added configurations.
Let's create our app first by running the following command:
npx create-next-app@latest
You'll be presented with options. You can select each according to your preferences.
What is your project named? nextJs-awesome-setup
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customise the default import alias? No / Yes
Till now every step was generic which you can also find from here.
Deleting package.lock.json
file and node_modules
folder.
Then run:
yarn
We have now converted our app to support yarn
instead of npm
. Which will be quite beneficial in the longer run.
Try running yarn dev
to check if everything is working as expected.
yarn dev
Prettier configuration
yarn add -D prettier
This will install the required dependencies
touch .prettierrc
This will create configuration file for Prettier where you can define your own custom rules.
Some common rules:
{
"semi": true,
"trailingComma": "none",
"singleQuote": true,
"printWidth": 80
}
Paste these rules as is in the .prettierrc
file we have just created.
Create .prettierignore
to ignore certain files and folders
touch .prettierignore
Add node_modules
and .next
folders
Add this line in package.json
under scripts
"format": "npx prettier --write ."
Now you can finally test if it works, run
yarn format
Hope, it worked.
Husky configuration
Some information about husky
- Install
husky
npm install husky --save-dev
- Enable
git
hooks
npx husky install
- To automatically have Git hooks enabled after install, edit
package.json
npm pkg set scripts.prepare="husky install"
After running this you should have this in your package.json
{
"scripts": {
"prepare": "husky install"
}
}
Create a hook which gets triggered whenever you make a commit
npx husky add .husky/pre-commit "yarn format"
git add .husky/pre-commit
Now whenever you do a new commit, your code should format itself before commit.
Bonus point: You run any script here using &&
and it will execute whenever you make commit for example your can run test every time before you make commit by adding:
yarn format && yarn test
TLDR! This setup guide offers you code formatting and check before making a commit, so that you don't push anything that looks bad.
Happy Coding!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK