React와 Vue를 사용하면서 cli를 통해 프로젝트를 생성하면 자동으로 eslint 설정이 만들어지는데,
늘 궁금했지만 귀찮아서 모르는척 지나친 날이 많았습니다.
코로나 때문에 강제 재택근무를 하게되어 남는시간에 eslint에 대해서 조금(?) 파헤쳐볼 생각으로 이 글을 작성하게 되었습니다. 틀린 부분이나 지적사항이 있으면 댓글 달아주시면 감사하겠습니다.
Lint(린트)
린트 또는 린터는 소스 코드를 분석하여 프로그램의 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시를 달아놓기 위한 도구들을 가리킵니다.(Wiki)
ESLint
ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드 또는 안티 패턴을 찾기 위해 사용하는 Javascript linter 입니다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있습니다.
왜 Lint를 사용할까요?
여러사람이 프로젝트를 잘 운영하기 위해서는 명확하고 일관된 코딩 규칙을 필요로 합니다. 서로가 일관성 없는 코드를 작성하게 되면 가독성이 떨어지고 코드리뷰에 제약이 발생하며 협업 또한 어렵게 됩니다. 이러한 문제는 코드가 제대로 작동한다는 확신을 얻어내기가 어렵습니다.
Lint는 코딩 컨벤션 외에도 스타일, 안티 패턴, 변수 범위등을 정적 분석을 통해 런타임 에러를 사전에 발견할 수 있습니다.
VSCode에서 ESLint 설치
VSCode에서 실시간으로 ESLint가 동작하도록 확장을 설치할수 있습니다.
vscode-eslint
