ESLint

린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 이 용어는 C 언어 소스 코드를 검사하는 유닉스 유틸리티에서 기원한다.
ESLint는 EcmaScript용 Lint이다.

vscode 보면 코드 치다가 중간에 코드 이상하다고 잡아주는 친구들이다.

vscode extension으로 ESLint를 쓰는 경우 .eslintrc 파일로 설정할 수 있다. 다른 환경에서도 대부분 이런 설정 파일이 있다.

제약이 많기 때문에 굳이 쓰지 않고 그냥 vscode 설정을 올리는 게 낫다는 사람들도 있다. 걸리는 설정들을 끄면서 작업하다보면 죄책감이 든다...

Prettier

이름 그대로 조금 더 예쁘게, 보기 좋게 해주는 것이다. 띄어쓰기, 간격, 코드 색깔.... 양식 같은 것을 바꿔준다. vscode에서는 vscode 설정의 전반을 담당하는 setting.json에서 설정해준다.

Lint와 Prettier 이 둘이 충돌하는 경우가 있다. 이 경우 추가 플러그인을 통해 해결할 수가 있다.

참고 자료

https://ko.wikipedia.org/wiki/%EB%A6%B0%ED%8A%B8_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)

https://velog.io/@treejy/React-ESLint%EC%99%80-Prettier%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EC%A7%80#:~:text=Prettier%EB%8A%94%20%EC%9D%BC%EA%B4%80%EC%A0%81%EC%9D%B8%20%EC%BD%94%EB%93%9C,%EA%B0%99%EC%9D%80%20%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%84%20%EA%B5%90%EC%A0%95%ED%95%B4%EC%A4%80%EB%8B%A4.