연관 내용
[husky 설치 방법]
ESLint에 포맷터의 기능을 일부 가지고 있지만, 포맷터는 prettier를 사용할 것이다.
eslint와 prettier를 같이 사용할 수 있게 해주는 eslint-config-prettier도 설치해야 한다.
eslint 초기 셋팅 명령어
npm init @eslint/config
설치 완료! 👇🏻
.eslintrc.js
파일의 parserOptions에 추가한다.
project:'**/tsconfig.json',
.eslintrc.js
파일의 rules에 추가한다.
추가로 무시하고 싶은 규칙은 에러 메세지에 노출되는 키값 : "off"
로 아래와 동일하게 설정하면 된다.
rules: {
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/consistent-type-imports' : 'off',
'@typescript-eslint/no-misused-promises': 'off', // wrapAsync 함수로 해결 가능
},
⛔️ 'React' must be in scope when using JSX
5번 설정을 추가하지 않으면 발생하는 에러이다.
React를 import하지 않아서 발생하는 에러이다.
👉🏻 Next.js에서는 react가 내장되어 있어 따로 import 해줄 필요가 없으므로 설정 파일에서 off로 바꿔주면 된다.
return type 작성
@typescript-eslint/no-floating-promises
💡 JSX 파일의 return type 지정하는 방법
graphQL-codegen에서 받아오는 types 파일처럼 체크가 필요 없는 파일은 .eslintignore
파일을 만들어서 넣어주면 된다.
(업데이트된 버전에서는 자동으로 무시되므로 에러로 잡히지 않으면 설정해주지 않아도 된다.)
파일 위치: 프로젝트 폴더/.eslintignore
무시할 파일의 경로만 넣어주면 된다.
yarn lint
yarn add --dev --exact prettier
echo {}> .prettierrc.json
참고 : prettierrc.josn 이라는 설정 파일을 만들어 달라는 리눅스 명령어이다.
echo
: 화면에 출력해줘
{} > 파일명
: 객체의 내용을파일명
파일에 저장해줘. 파일이 없으면 새로 만들어준다.
yarn add --dev eslint-config-prettier
extends: ["plugin:react/recommended", "standard", "prettier"],
이렇게 추가하면 예쁘게 보여주는 건 prettier의 규칙을 따르게 된다.
저장할 때마다 formatter가 자동으로 작동되어 정렬을 맞춰준다.
1) code > 기본 설정 > 설정
2) format On Save 검색 > 체크
프로젝트의 참여자 모두에게 적용되게 하려면 VSC 설정 파일을 만들어서 설정해줄 수 있다.
1) 프로젝트 최상위에 새 폴더 .vscode
를 생성하고,
2) settings.json
파일을 만든다. 👈🏻 VSC의 설정을 이 파일에서 할 수 있다.
// settings.json 파일
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
각자의 설정(6-1)이 다르더라도, settings.json
에 있는 설정을 따르게 된다. (여러명이 협업하기에 good)