ESLint는 JavaScript 및 TypeScript 코드에서 문법 오류, 코드 스타일 문제, 그리고 잠재적인 버그를 발견해주는 정적 코드 분석 도구입니다. 코드를 실행하지 않고도 규칙을 기반으로 코드를 분석하여 문제를 찾아냅니다. 팀 내의 일관된 코드 스타일을 유지하고, 코드 품질을 개선하는 데 큰 도움이 됩니다.
주요 기능:
-
코드 스타일 일관성 유지:
- 팀 프로젝트에서 각 개발자가 일관된 코드 스타일을 유지할 수 있게 해줍니다. 예를 들어, 들여쓰기, 세미콜론 사용 여부, 공백 등 다양한 스타일 규칙을 설정하고 강제할 수 있습니다.
-
잠재적인 오류 방지:
- 코드에서 실수하기 쉬운 부분을 미리 감지해줍니다. 예를 들어, 정의되지 않은 변수를 사용하거나, 변수 사용 후 값을 할당하지 않는 경우를 발견할 수 있습니다.
-
플러그인 및 확장성:
- ESLint는 플러그인 시스템을 통해 다양한 언어 확장 및 규칙을 추가할 수 있습니다. TypeScript, React, Vue 등의 환경에서도 ESLint를 사용할 수 있도록 지원합니다.
-
자동 수정:
- 일부 문제는 자동으로 수정이 가능하며,
--fix 옵션을 통해 간단한 스타일 문제를 자동으로 해결할 수 있습니다.
-
설정 가능:
.eslintrc 파일을 통해 원하는 규칙을 설정할 수 있습니다. ESLint는 규칙 기반으로 작동하며, 자신에게 맞는 규칙을 선택하고 커스터마이징할 수 있습니다.- 기본 제공되는 규칙 외에도, Prettier 같은 도구와 함께 통합해서 코드 스타일을 더욱 강화할 수 있습니다.
ESLint의 사용 예시:
-
설치: 프로젝트에 ESLint를 설치하려면 다음 명령어를 사용할 수 있습니다.
npm install eslint --save-dev
-
ESLint 설정 파일 생성: 프로젝트의 루트 디렉토리에서 아래 명령어를 실행하여 ESLint 설정 파일을 생성할 수 있습니다.
npx eslint --init
-
ESLint 설정 파일 예시 (.eslintrc.json):
{
"env": {
"browser": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"indent": ["error", 2],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}
env: 코드가 실행될 환경을 설정합니다 (브라우저, Node.js 등).extends: 기본 규칙 세트를 상속받습니다. 예를 들어, eslint:recommended는 ESLint에서 권장하는 기본 규칙을 사용합니다.rules: 사용자 정의 규칙을 설정할 수 있습니다. 예시에서는 들여쓰기를 2칸으로 지정하고, 작은 따옴표를 사용하도록 하며, 세미콜론을 항상 쓰도록 설정합니다.
-
ESLint 실행: 설정 후에는 아래 명령어로 ESLint를 실행할 수 있습니다.
npx eslint yourfile.js
ESLint의 장점:
- 코드 품질 개선: 미리 코드의 잠재적인 문제를 감지하여, 품질을 높일 수 있습니다.
- 팀 협업 효율성 향상: 코드 스타일 규칙을 통일하여, 팀 전체의 코드 일관성을 유지할 수 있습니다.
- 유지보수성 강화: 일관된 코드 스타일을 유지함으로써 유지보수 비용을 줄일 수 있습니다.
ESLint는 단순한 문법 검사 이상의 역할을 하며, 프로젝트의 코드 퀄리티를 높이는 중요한 도구입니다.