ESLINT

ESLint란?

ESLint는 JavaScript와 TypeScript 코드를 분석하여 문법 오류, 잠재적인 버그, 코딩 스타일 문제를 찾아내는 정적 분석 도구(린터)입니다. 오픈소스 프로젝트로, 개발자가 코드 품질을 유지하고 팀 내에서 일관된 코딩 규칙을 적용할 수 있도록 도와줍니다.

주요 기능

1. 문제 탐지: 코드에서 오류나 안티 패턴(잘못된 코딩 방식)을 사전에 발견합니다.
   • 예: 사용되지 않는 변수(no-unused-vars), 정의되지 않은 변수 사용 등.
2. 코딩 스타일 강제: 팀이나 프로젝트의 코딩 규칙을 정의하고 준수하도록 합니다.
   • 예: 세미콜론 사용 여부(semi), 들여쓰기 크기(indent) 등.
3. 자동 수정: --fix 옵션을 사용하면 일부 문제를 자동으로 수정할 수 있습니다.
4. 확장성: 플러그인과 규칙을 추가해 Vue, React, TypeScript 등 다양한 환경에 맞게 커스터마이징 가능.
5. 통합성: Webpack, Vite, VS Code 같은 도구와 쉽게 통합됩니다.

---

설치 및 설정

1. 설치

프로젝트에 ESLint를 설치하려면 다음 명령어를 사용합니다:

npm install eslint --save-dev

2. 초기화

설치를 마친 후, ESLint 설정 파일을 생성합니다:

npx eslint --init

• 이 명령어는 대화형 질문을 통해 .eslintrc 파일을 생성합니다.
• 질문 예:
  • 코드 검사 목적(문법, 문제 탐지, 스타일 등).
  • JavaScript 모듈 타입(ESM, CommonJS 등).
  • 프레임워크(Vue, React 등) 사용 여부.

3. 설정 파일 예제

.eslintrc.json 파일의 기본 설정 예시:

{
  "env": {
    "browser": true, // 브라우저 환경 변수 허용
    "es2021": true   // ES2021 문법 지원
  },
  "extends": [
    "eslint:recommended" // ESLint 기본 추천 규칙
  ],
  "rules": {
    "no-unused-vars": "warn", // 사용되지 않는 변수 경고
    "semi": ["error", "always"] // 세미콜론 필수, 위반 시 오류
  }
}

• env: 코드가 실행되는 환경을 정의.
• extends: 미리 정의된 규칙 세트를 가져옴.
• rules: 사용자 정의 규칙을 추가하거나 덮어씀.

---

사용 방법

1. 코드 검사

특정 파일이나 디렉토리를 검사하려면:

npx eslint your-file.js

모든 JavaScript 파일을 검사하려면:

npx eslint .

2. 자동 수정

수정 가능한 문제를 자동으로 고치려면:

npx eslint your-file.js --fix

3. VS Code 통합

VS Code에서 ESLint 확장을 설치하면 실시간으로 오류를 표시하고 저장 시 자동 수정하도록 설정할 수 있습니다.

---

주요 규칙 예시

1. no-console: 콘솔 로그 사용 금지.

   "no-console": "error"
   

2. indent: 들여쓰기 스타일 강제.

   "indent": ["error", 2] // 2칸 들여쓰기
   

3. quotes: 따옴표 스타일 설정.

   "quotes": ["error", "single"] // 홑따옴표 사용
   

---

Vue나 TypeScript와 함께 사용

Vue 프로젝트

Vue를 사용할 경우 eslint-plugin-vue 플러그인을 추가합니다:

npm install eslint-plugin-vue --save-dev

설정:

{
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended"
  ],
  "rules": {
    "vue/multi-word-component-names": "off" // 컴포넌트 이름 규칙 비활성화
  }
}

TypeScript 프로젝트

TypeScript를 사용할 경우 @typescript-eslint 플러그인을 추가합니다:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

설정:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ]
}

---

언제 사용하면 좋을까?

• 코드 품질 유지: 버그를 줄이고 가독성을 높이고 싶을 때.
• 팀 협업: 팀원 간 일관된 코딩 스타일을 유지하고 싶을 때.
• 프로젝트 확장: 대규모 프로젝트에서 일관성과 유지보수성을 확보하고 싶을 때.

ESLint는 단순한 도구지만, 프로젝트의 요구사항에 따라 규칙을 자유롭게 조정할 수 있어 매우 강력합니다. 추가로 궁금한 점이 있으면 말씀해주세요!