앞 내용을 아직 완벽히 숙지하지 못했으나 그래도 진도는 나가야한다.
코드캠프 3주차의 월요일이 찾아왔다.
블로그도 밀려있으니 신나게 써야한다.
15일차인 이 날은 프로젝트의 세팅을 위한 세가지 도구에 대해 배웠다.
eslint/ prettier/ husky
eslint
사용하지 않는 변수를 없애거나 문법의 통일성을 부여하는 도구
명령어 => npx eslint .
리엑트 메세지가 뜨는데
원래는 import ~react 를 작성해줘야 하나 우린 next를 쓰고 있기 때문에 안적어줘도 됨.
eslintrc.json 파일에서 rules 부분 아래와 같이 기재.
"rules": {
"react/react-in-jsx-scope": "off"
}
prettier
띄어쓰기, 줄바꿈 등 화면에 보이는 부분의 통일성 부여.
명령어=>npx prettier --write
최상위 폴더에서 .vscode안에 settings.json 파일 생성.
husky
우리가 git으로 commit하기 전 typescript, eslint, prerrier 을 잘 지켜서 코딩하였는지 검증.
yarn add -D husky@4
*허스키 설치/ @4 는 4 버전. 이후 버전은 라이선스 문제가 있다고 함.
-D는 devDependencies에 설치 되는 것.
여기서
dependencies는 프로그램 실행 시 작동하는 것.
devdependencies는 실행 전 준비하는 역할.
devdependencies 밖 영역에 추가로 입력해주자.
여기서
"hooks"-> 가로채다. 커밋 전에 검사하는 명령어.
"husky"-> 커밋 하기 전 린트 스테이지드를 실행해라
"lint-staged"-> 확장자ts, tsx에 npx eslint를 실행해라
**/.-> 모든 파일![]
이렇게 설정을 마치면 커밋을 해도
요렇게 나온다.
eslint를 무시하는 법.
eslintrc.json위치에 .eslintignore를 생성.
여기에 굳이 검사 안해도 되는 파일을 여기에 작성.
참고사항
기존 프리티어의 설정과 달라 저장할 시 프리티어 설정으로 인해 원래대로 돌아가는 경우가 있음.
처음 설치했을 시 세미콜론 설정이 달라 eslint에서는 에러로 판단하나 저장 시 다시 세미콜론이 생김.
Prettierrc.json 파일에 "semi":false 작성.
