ESLint란

next.js 를 시작하면서 이것 저것 나오는데 궁금한 것들이 있어 정리해 보았습니다.

npx create-next-app@latest .

처음 next를 설치를 하게 되면서 여러가지 물어보더라고요

1. 타입스크립트를 사용할 거니? yes~! 이거 써야 할 말이 있으니까요?! 

다음 ESline을 사용할 거니? Would you like to use eslint? 

 

여시거 no를 사용하고 싶었지만 왜 no여야 하는지 왜 yes여야 하는지 고민을 해보고 싶었어요

물론 ESline을 사용하면 많은 어려움이 있었기 때문에 사용을 하고 싶지 않았어요

하지만 왜 나에게 문제가 발생을 했는지 찾는 것도 좋을 것 같아 ESline을 찾아봤어요

 

ESLint는 JavaScript 및 TypeScript 코드에서 오류를 찾아내고 스타일을 유지하도록 도와주는 정적 코드 분석 도구입니다.

아하 그렇구나?! 도와주는 코드구나?! 그런데 왜 나에게 시련을 주었을까?

 

다시 생각을 해보면 이전 JavaScript가 준 너프함과 안일함으로 인해 문제가 발생하지 않았나 생각해 봅니다.

그럼 다시 알아봐야죠?

 

ESLint의 주요 역할

1. 코드 품질 검사

- 문법 오류, 사용하지 않는 변수, 선언되지 않은 변수 사용 등 코드 품질 문제를 찾아냅니다.

예:

let unusedVariable;
console.log(a); // 'a' is not defined (에러)

 

2. 코드 스타일 유지

- 팀이나 프로젝트에서 일관된 코드 스타일을 유지할 수 있도록 규칙을 강제합니다.

예: 세미콜론 사용 여부, 들여쓰기 크기(스페이스 2개 vs 4개) 등.

 

3. 자동 수정 지원

- 일부 문제는 eslint --fix 명령어로 자동으로 해결 가능합니다.

예: 잘못된 들여쓰기, 세미콜론 누락 등.

 

이런 참 별거 아닌 내용이네요?! 

그런데 저는 엄청 고생한 기억이 있어서 더 찾아보았습니다.

 

ESLint의 구성 요소

1. 규칙(Rules)

- ESLint는 다양한 규칙을 제공하며, 필요에 따라 활성화하거나 비활성화할 수 있습니다.

예:

- no-unused-vars: 사용하지 않는 변수를 경고.

- eqeqeq: == 대신 === 사용을 강제.

커스터마이징 가능한 규칙 설정 예:

{ "rules": 
	{ 
        "semi": ["error", "always"], // 세미콜론을 항상 사용 
        "quotes": ["error", "single"], // 문자열은 항상 작은 따옴표 사용 
        "eqeqeq": "error" // '==' 대신 '===' 강제 
    } 
}

 

2. 플러그인(Plugins)

- React, TypeScript 등 특정 라이브러리나 프레임워크에 맞는 규칙을 추가로 지원.

예: eslint-plugin-react, eslint-plugin-import.

 

3. 환경(Environment)

- 코드를 실행하는 환경을 정의합니다.

예: 브라우저, Node.js, ES6 등.

{ "env": 
	{ 
    	"browser": true, 
        "node": true, 
        "es6": true 
    } 
}

 

역시 환경에서도 문제가 발생을 했네요 

꼭 뭔가 설치를 하면 안되고 받아오면 안되고 아주 난감했는데 이런 이유를 알게 되었네요

 

ESLint의 주요 장점

1. 코드 품질 개선
   • 실수로 발생할 수 있는 버그를 사전에 방지.
2. 일관된 코드 스타일
   • 여러 개발자가 참여하는 프로젝트에서 코드 스타일을 통일.
3. 자동화 가능
   • Prettier와 결합하거나 Git 훅에 추가하여 코드 스타일을 자동으로 검사 및 수정.

 

이런 이유로 사용해 보기 했어요