ESLint( 뜻,기능,사용하는 이유,자주 사용 규칙,플러그인,airbnb ESLint) 총정리

JavaScript 개발에서 깨끗하고 일관된, 오류 없는 코드를 유지하는 것은 매우 중요합니다.

이때 ESLint가 큰 도움을 줄 수 있습니다. ESLint는 개발자가 JavaScript 코드를 검사하고 문제를 찾아내며, 최선의 관행과 코딩 표준을 준수하도록 돕는 강력한 오픈 소스 도구입니다.

 

ESLint란 무엇인가요?

먼저 ESLint는 ES 와 Lint를 합친 것입니다.

ES는 Ecma Script로서, Javascript를 의미합니다.

Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다.

 

ESLint는 JavaScript 생태계에서 사용되는 정적 코드 분석 도구입니다.

JavaScript(또는 JSX, TypeScript)를 분석하여 오류, 잠재적 버그, 스타일 문제를 찾아내고, 특정 코딩 관행을 강제하도록 설정할 수 있어, 대규모 코드베이스를 관리하려는 팀에게 필수적인 도구입니다.

ESLint의 주요 기능

 

높은 구성 가능성: ESLint는 사용자 정의 규칙을 생성하거나 기존 규칙을 확장할 수 있습니다. Airbnb나 Google과 같은 인기 있는 스타일 가이드를 따라 ESLint를 설정할 수 있습니다.

 

플러그인 아키텍처: ESLint는 다양한 플러그인을 지원하여 React, Vue, TypeScript와 같은 여러 프레임워크와 라이브러리를 처리할 수 있도록 확장할 수 있습니다.

 

자동 수정 기능: ESLint는 --fix 옵션을 사용하여 일부 문제를 자동으로 수정할 수 있어, 코드베이스를 유지 관리하는 시간을 절약할 수 있습니다.

 

빌드 도구와의 통합: ESLint는 인기 있는 빌드 도구와 편집기와도 매끄럽게 통합되어, 코드를 작성하는 동안 실시간으로 린팅을 지원합니다.

ESLint를 사용하는 이유

일관성 유지: ESLint는 팀 내 모든 개발자가 동일한 코딩 표준을 준수하도록 보장해, 코드베이스의 일관성을 유지할 수 있습니다.

 

오류 예방: 개발 과정에서 잠재적 문제를 조기에 잡아내어, 버그가 실제로 제품에 도달하는 것을 방지합니다.

 

코드 품질 향상: ESLint는 최선의 관행을 촉진하여, 더 높은 품질의 유지 관리 가능한 코드를 작성할 수 있도록 돕습니다.

 

사용자 맞춤 설정: 엄격한 규칙이든, 느슨한 규칙이든, ESLint는 필요에 맞게 조정할 수 있어 코드 작성 및 검토에 유연성을 제공합니다.

ESLint 설정 방법

ESLint 설정은 매우 간단합니다:

1.ESLint 설치: npm 또는 yarn을 사용하여 프로젝트에 ESLint를 설치합니다.

npm install eslint --save-dev

 

2. ESLint 초기화: 아래 명령어를 실행하여 설정 파일을 만듭니다.

npx eslint --init

3.ESLint 구성: .eslintrc.json 파일에서 스타일 가이드를 선택하고 환경을 설정하며, 필요한 대로 규칙을 사용자 정의합니다.

4.ESLint 실행: ESLint를 사용하여 코드베이스를 분석합니다.

npx eslint yourfile.js

5.자동 수정: --fix 플래그를 추가하여 가능한 문제를 자동으로 수정할 수 있습니다.

npx eslint yourfile.js

 

ESLint와 인기 JavaScript 프레임워크

ESLint는 다양한 JavaScript 프레임워크와 잘 어울립니다:

• React: eslint-plugin-react를 사용하여 React-specific 코딩 표준을 준수할 수 있습니다.
• Vue.js: eslint-plugin-vue를 통합하여 Vue.js 코드 품질을 유지할 수 있습니다.
• TypeScript: TypeScript 프로젝트의 경우, @typescript-eslint/parser와 @typescript-eslint/eslint-plugin을 결합하여 사용할 수 있습니다.

기본 ESLint 설정 파일 (.eslintrc.json)

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    "no-console": "warn",  // 콘솔 로그를 경고로 처리
    "no-unused-vars": "warn",  // 사용되지 않는 변수를 경고로 처리
    "semi": ["error", "always"],  // 항상 세미콜론 사용
    "quotes": ["error", "single"],  // 싱글 쿼트 사용
    "indent": ["error", 2],  // 2칸 들여쓰기
    "eqeqeq": ["error", "always"],  // 일치 연산자(===) 사용 강제
    "curly": "error",  // 모든 제어문에 중괄호 사용 강제
    "react/prop-types": "off",  // React의 PropTypes 사용을 비활성화 (TypeScript 사용 시)
    "@typescript-eslint/no-unused-vars": ["warn"],  // TypeScript에서 사용되지 않는 변수 경고
    "@typescript-eslint/explicit-module-boundary-types": "off"  // 명시적 모듈 경계 유형을 비활성화
  }
}

 

2. 자주 사용하는 ESLint 규칙들

다양한 프로젝트에서 자주 사용하는 규칙들을 더 살펴보겠습니다.

 

no-console: warn
콘솔 로그를 경고로 처리합니다. 개발 과정에서 디버깅 목적으로 사용하는 콘솔 로그를 배포 전 제거하는 것을 권장합니다.

 

no-unused-vars: warn
선언된 후 사용되지 않는 변수에 대해 경고를 발생시킵니다. 불필요한 코드를 제거하는 데 도움을 줍니다.

 

semi: ["error", "always"]
모든 명령문 끝에 세미콜론을 강제합니다. 코드의 일관성을 유지하기 위한 규칙입니다.

 

quotes: ["error", "single"]
모든 문자열에 싱글 쿼트를 사용하도록 강제합니다. 일관된 코드 스타일을 유지할 수 있습니다.

 

indent: ["error", 2]
두 칸 들여쓰기를 강제합니다. 들여쓰기 규칙을 통일하여 가독성을 높입니다.

 

eqeqeq: ["error", "always"]
일치 연산자(===)를 항상 사용하도록 강제합니다. 타입 강제 변환에 의한 오류를 방지합니다.

 

curly: error
모든 제어문(예: if, else, for, while 등)에 중괄호를 사용하도록 강제합니다. 코드의 가독성을 높이고, 오류 발생 가능성을 줄입니다.

 

no-debugger: error
debugger 문법 사용을 금지합니다. 배포 시 디버깅 관련 코드를 제거하는 것을 보장합니다.

 

react/prop-types: off
TypeScript를 사용하는 경우, React의 PropTypes 사용을 비활성화합니다. PropTypes는 TypeScript에서 타입 검사 기능을 대신할 수 있기 때문에 비활성화하는 것이 일반적입니다.

 

@typescript-eslint/explicit-module-boundary-types: off
함수나 메서드에서 명시적인 반환 타입을 요구하지 않도록 설정합니다. 특히 코드가 명확하고, 타입이 추론될 수 있는 경우에는 필요하지 않기 때문에 꺼놓는 경우가 많습니다.

3. ESLint 플러그인

eslint-plugin-react: React 코드에서 linting을 적용할 때 유용한 플러그인입니다. JSX 문법을 검사하고, React 특유의 규칙을 강제할 수 있습니다.

 

eslint-plugin-import: 모듈의 import/export 문법을 검사하고, 불필요한 모듈 의존성을 제거하는 데 도움을 줍니다.

 

eslint-plugin-jsx-a11y: JSX에서 접근성 관련 문제를 감지하고, 접근성을 개선하기 위한 규칙을 적용할 수 있습니다.

 

eslint-plugin-prettier: Prettier와 ESLint를 결합하여 코드 포맷팅을 자동으로 적용하면서, ESLint 규칙과 충돌하지 않도록 조정할 수 있습니다.

4. Prettier와 ESLint의 결합

Prettier와 ESLint를 함께 사용하면 코드 스타일링과 린팅을 동시에 관리할 수 있습니다. ESLint와 Prettier의 규칙이 충돌하는 경우에는 eslint-config-prettier와 같은 설정을 통해 조정할 수 있습니다.

 

추가적으로 ESLint에 대해 찾아보니 유독 airbnb ESLint가 유독 인기가 많았는데 그래서 이유를 찾아봤다.

 

1. 광범위한 규칙 세트

• 포괄적인 규칙 세트: Airbnb의 ESLint 설정은 매우 포괄적이고 다양한 JavaScript 코딩 스타일 및 모범 사례를 다룹니다. 이 설정에는 여러 가지 코드 스타일 관련 규칙(들여쓰기, 따옴표 사용, 세미콜론 등)과 함께, 코드 품질을 유지하기 위한 많은 린팅 규칙이 포함되어 있습니다. 이를 통해 개발자들이 일관성 있는 코드를 작성하는 데 큰 도움이 됩니다.

2. 실제 경험 기반의 설정

• 검증된 설정: Airbnb는 대규모 코드베이스를 운영하는 회사로, 그들의 ESLint 설정은 실제로 검증된 코드 스타일과 모범 사례를 기반으로 합니다. 이 설정은 Airbnb의 경험에서 비롯된 것이므로, 다른 개발자들이 사용할 때도 신뢰할 수 있는 품질을 제공합니다.

3. 리액트와의 강력한 통합

• React 지원: Airbnb의 ESLint 설정은 React 개발에 최적화되어 있습니다. 이 설정은 JSX 구문, PropTypes, 컴포넌트 구조 등과 관련된 다양한 규칙을 포함하고 있어 React 개발자들에게 매우 유용합니다. 이는 많은 개발자들이 Airbnb ESLint 설정을 선호하는 이유 중 하나입니다.

4. 정기적인 업데이트

• 지속적인 유지보수: Airbnb는 ESLint 설정을 정기적으로 업데이트하여 새로운 ECMAScript 기능, 모범 사례, 린팅 규칙 등을 반영하고 있습니다. 이를 통해 개발자들은 최신 코드 스타일과 규칙을 적용할 수 있습니다.

5. 개발자 커뮤니티의 지지

• 커뮤니티의 광범위한 사용: Airbnb의 ESLint 설정은 오픈 소스 커뮤니티에서 널리 사용되고 지지를 받고 있습니다. 많은 오픈 소스 프로젝트와 기업들이 이 설정을 사용하고 있으며, 이를 통해 더 많은 피드백과 개선이 이루어지고 있습니다.

6. 일관성 있는 코드 스타일

• 팀 협업에 유리: 대규모 팀에서 일관된 코드 스타일을 유지하는 것은 매우 중요합니다. Airbnb의 ESLint 설정은 이러한 일관성을 유지하는 데 큰 도움을 줍니다. 팀 내 모든 개발자가 동일한 코드 스타일을 따르기 때문에 코드 리뷰 과정이 간소화되고, 코드베이스가 정돈됩니다.

 

ESLint는 현대 JavaScript 개발에서 코드의 품질과 일관성을 유지하는 데 필수적인 도구입니다.

특히, Airbnb ESLint 설정은 강력한 규칙 세트로 유명하며, 많은 개발자들 사이에서 인기를 얻고 있습니다. 이를 통해 개발자는 일관된 코드 스타일을 유지하며, 오류를 사전에 방지할 수 있습니다.

 

ESLint의 다양한 플러그인과 커스터마이징 옵션을 활용하면, 팀의 필요에 맞는 규칙을 설정할 수 있어, 프로젝트의 성공적인 진행을 돕습니다. 결과적으로, ESLint는 코드 품질을 높이고, 유지보수성을 강화하는 필수 도구로 자리매김하고 있습니다.

 

다음 글은 한번 내가 airbnb ESLint를 적용한 글을 써볼 예정이다.

 

import 깔끔하게 정리

Barrel export 패턴으로 import 깔끔하게 정리하기,react 리팩토링,가독성 높이기,index로 파일관리하기

콜백함수

자바스크립트 콜백함수(callback)에 대해 (개념,동작 원리,사용이유,장점,단점) 알아보자

바텀시트 구현

React에서 바텀시트(Bottom Sheet) 구현하기: 상세 가이드