React : react 초기세팅 - commit 을 정리된 상태로 넘기기

ESLint , Prettier, husky 를 활용해
git commit 전에 알아서 정리시켜서 commit 시키기

코드를 쓰다보면 어느순간 코드가 지저분해지는 경우가 있다.
이럴때 일일히 commit 전에 코드를 정리해주고 commit 시키는 경우가 많은데,
정리를 해서 넘겼더라고 구문오류같은걸 따로 표현해주지 않아
commit 전에 코드에 문제가 없는지 확인하는 작업이 필요하다.

코드 정리와 체크 등을 commit을 함과 동시에 체크하고 넘기는 방법이 있다.
모든 동작은 npm 파일을 만들어 준 후 내부에서 실행시켜주어야 한다
(초보자분들은 순서대로 그냥 따라하세요)

1.ESLint

ESLint는 여러가지 코딩스타일 및 규칙들을 설정할 수 있고, 프로그래밍 도중에 발생하는 오류코드들을 확인시켜줄 수 있는 도구입니다.

npm i eslint -D
npx exlint --init

To check syntax and find problems 체크!

.eslintrc.js 라는 파일로 이동
rules에 내가 설정하고 싶은 규칙을 넣는것이 가능하다.

2.Prettier

Prettier은 코드를 예쁘게 정리해주는 도구이다.

npm i prettier -D
npx prettier '파일명' --write => 예쁘게 자동으로 바꿔줌

VScode인 경우는 플러그인으로 세팅이 가능하고
라이브로 알아서 정리해주길 원할 경우

이미지와 동일하게 설정해주면 된다!

Format On Paste = 붙여넣기 할때도 Prettier 기능이 실행되도록
Format On save = 파일을 저장했을때 Prettier기능이 실행되도록

이렇게 설정해놓으면 저장과 동시에 예쁘게 정렬된 채로 알아서 정리된다!

eslint 와 prettier 의 속성이 충돌되는 경우가 있다.

이런경우 package.json 파일에 eslintConfig 안에 "prettier"을 추가로 넣어준다.
그러면 eslint가 동작할 때, prettier에서 임의로 바꾼 요소들은 넘어가준다.

2.husky

깃에 의한 액션에 대해 액션 실행 전 개발자가 임의로 동작을 설정할 수 있게 도와주는 도구이다.
예를들어, commit을 보내기 전에 eslint로 구문오류를 고쳐준다던지 prettier로 예쁘게 정리해준다던지에 대한 실행요소들을 commit 이전에 실행할 수 있도록 도와준다.

git init
npm i husky -D

git을 활용하는 도구이므로 git은 먼저 설치해주어야 한다.

npx husky install
npx husky add .husky/pre-commit "lint-staged"
npm i lint-staged -D

이제 commit 전에 lint-staged 가 먼저 실행한다.

"package.json"

 "scripts": { 
    "prepare" : "husky install",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

다음에 clone을 받을때 자동으로 husky 저장정보를 사용할 수 있다.

lint-staged 설정하기

"package.json"

"lint-staged": {
    "**/*.js" : [ //js파일들을 이 설정에 맞춰 정렬하겠다는 뜻
      "eslint --fix", //exlint를 활용하여 구문오류 고치기
      "prettier --write", //prettier 를 활용해 정리, npm i preettier -D를 먼저 설치해주어야 한다.
      "gid add" //최종파일 더하기
    ]
  },

"pre-commit"

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-statged

이제 자동으로 commit 전에 자동으로 설정이 가능하다!