overreacted
by Kyle

Next.js 项目基础配置

July 30, 2024

Prettier

Prettier 用于代码格式化 在Next.js项目中使用Prettier配合Eslint使用。

# install
npm install --save-dev --save-exact prettier eslint-config-prettier
# add `prettier` on `.eslintrc.json`
echo '{"extends": ["next/core-web-vitals", "prettier"]}' > .eslintrc.json
# add rules on `.prettierrc.json`
echo '{}' > .prettierrc.json

And then add some local config at .vscode/settings.json file

{
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "file",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

commitlint

使用commitlint对commit message根据@commitlint/config-conventional提供的规则进行校验

# install
npm install --save-dev --save-exact @commitlint/config-conventional @commitlint/cli
# configure commitlint to use conventional config
echo '{ "extends": ["@commitlint/config-conventional"] }' > .commitlintrc.json
# add npm script
npm pkg set scripts.commitlint="commitlint --edit --config .commitlintrc.json -e -V"

husky

husky 提供多种git hooks，让 commitlint 校验在对应的节点自动触发。

# install
npm install --save-dev --save-exact husky
# initial
npx husky init
 
# Add commit message linting to commit-msg hook
echo "npx --no-install commitlint --edit \$1" > .husky/commit-msg

References