husky + lint-staged

Test Repo

GitHub - Kal-MH/husky_lint-staged_next

HEAD This is a Next.js project bootstrapped with create-next-app . First, run the development server: Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file. API routes can be accessed on http://localhost:3000/api/hello.

https://github.com/Kal-MH/husky_lint-staged_next

Git Hooks란?

1. git과 관련한 이벤트가 발생할 때, 특정 스크립트를 실행할 수 있도록 하는 기능을 말한다.
1. 클라이언트 훅 : commit, am, merge, push
2. 서버 훅 : Git repository로 push가 발생했을 때

husky란 무엇인가

Husky - Git hooks

Modern native Git hooks made easy

https://typicode.github.io/husky/#/?id=automatic-recommended

1. 수동으로 gitHooks를 설정하고, 다른 사람과 공유하는 방법도 있지만, 받는 사람 입장에서 따로 또 git hook을 실행시켜줘야 한다는 번거로움이 있다.

2. husky란 Git Hooks를 반드시 적용하게끔 강제할 수 있게 하는 도구.

실행해보자

npm i -D husky
npx husky install

> npx husky add .husky/pre-commit "npm test"

• pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

• pre-commit은 commit 전에 실행되는 스크립트 파일.

• .husky 파일 안에서 확인할 수 있다.

husky에 eslint, prettier 추가하기

// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

//.prettierrc.json
{
  "singleQuote": true,
  "endOfLine": "auto",
  "jsxSingleQuote": true,
  "bracketSameLine": true
}

//.eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["prettier", "@typescript-eslint"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "no-undef": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "prettier/prettier": "error"
  }
}

//.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint

lint-staged란 무엇인가

• 패키지 설치

npm i lint-staged -D

• package.json에 lint-staged 추가

"scripts": {
	...
},
...
,
"lint-staged": {
  "src/**/*.{ts,tsx}": "eslint --fix"
}

• pre-commit 파일에 명령어 추가

...

npx lint-staged

고려사항

1. 지금은 lint-staged에 바로 eslint명령어를 사용하도록 설정되어 있지만, 공식문서에서는 next lint를 이용해서 lint-staged를 사용할 수 있게도 한다네요? 나중에 refactoring이나 바꿔보고 싶을 때 참고하면 좋을 거 같습니다
Basic Features: ESLint | Next.js
Next.js provides an integrated ESLint experience out of the box. Add next lint as a script to package.json: Then run npm run lint or yarn lint: If you don't already have ESLint configured in your application, you will be guided through the installation and configuration process.

https://nextjs.org/docs/basic-features/eslint#core-web-vitals

2. next에서 제공하는 eslint rule은 다음과 같습니다. (+ typescript eslint, basic eslint rules)
Basic Features: ESLint | Next.js
Next.js provides an integrated ESLint experience out of the box. Add next lint as a script to package.json: Then run npm run lint or yarn lint: If you don't already have ESLint configured in your application, you will be guided through the installation and configuration process.

https://nextjs.org/docs/basic-features/eslint

Overview | typescript-eslint
@typescript-eslint/eslint-plugin includes over 100 rules that detect best practice violations, bugs, and/or stylistic issues specifically for TypeScript code. See Configs for how to enable recommended rules using configs. In some cases, ESLint provides a rule itself, but it doesn't support TypeScript syntax; either it crashes, or it ignores the syntax, or it falsely reports against it.

https://typescript-eslint.io/rules

Rules Reference - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

https://eslint.org/docs/latest/rules/

Bookmark

husky: git hook을 통한 테스트 및 린트 자동화

husky는 깃 훅에 따라 원하는 동작을 하게 도와주는 패키지입니다. git add나 commit, push가 시행되기 전이나 후에 원하는 스크립트를 실행시켜주죠. 오늘은 husky를 사용하는 방법에 대해 알아보겠습니다! 주로 사람들이 많이 사용했던 ver 4에서는 다음과 같이 husky를 package.json에서 설정했습니다. { "husky": { "hooks": { "pre-commit": "yarn test" } } } 그러나 이제는 버전 6이 나왔고, ver 6에 대한 사용법으로 살펴보겠습니다.

https://blog.pumpkin-raccoon.com/85