setup-nextjs-01-prettier-lintstaged.md

Add prettier, lint-staged and pre-commit hook to just created nextjs project

From scratch on POSIX system

1. Change into just created project directory

cd «project-name»

2. install/configure pre-commit hooks with husky, prettier [^1]

npm i -D eslint-config-prettier prettier lint-staged husky && 
npm pkg set scripts.lint-staged="{\"*.{js,jsx,ts,tsx}\": \"eslint --cache --fix\", \"*.{js,jsx,ts,tsx,md,css}\": \"prettier --write\"}" &&
npm pkg set scripts.prepare="husky install" &&
npx husky install &&
npx husky add .husky/pre-commit "npx lint-staged" &&
{ cat <<'EOF' > .eslintrc.json 
{
  "extends": ["next", "prettier"]
}
EOF
} &&
{ cat <<'EOF' > .lintstagedrc.js
const path = require("path"); 
const buildEslintCommand = (filenames) => 
  `next lint --fix --file ${filenames 
    .map((f) => path.relative(process.cwd(), f)) 
    .join(" --file ")}`;

module.exports = { 
  "*.{js,jsx,ts,tsx}": [buildEslintCommand],
};
EOF
} &&
echo '{}' > .prettierrc.json &&
git add . && git commit -m "init prettier, lint-staged, husky"

4. Start example app in development mode

npm run dev

Remarks

[^1] There are no "devDependencies" following nextjs ^13 initial package style

References

nextjs config