npm

ESLint 사용하기!

KUKJIN LEE
KUKJIN LEE
2024년 2월 15일
177

 

ESLint는 JavaScript 코드에서 문제를 식별하고 코드 품질을 향상시키기 위한 도구로서 사용되는 오픈 소스 린트 도구입니다. "린트"는 코드베이스에서 스타일, 오류, 버그 및 보안 문제를 찾아내는 도구를 일컫습니다. ESLint는 이러한 문제들을 찾아내고 개발자에게 경고 및 에러 메시지를 제공하여 더 나은 코드 작성을 돕습니다.

 

설치

프로젝트 루트 디렉토리에서 ESLint를 설치합니다.

npm install eslint --save-dev

 

사용법

프로젝트 루트에 .eslintrc 또는 .eslintrc.json 파일을 생성하여 ESLint 설정을 정의하는 방법은 다음과 같습니다.

  1. extends: 이 항목을 통해 ESLint의 기본 규칙 세트를 확장할 수 있습니다. 예를 들어, eslint:recommended를 사용하면 ESLint에서 권장하는 기본적인 규칙 세트를 활성화할 수 있습니다. 이는 일반적인 JavaScript 에러를 잡고, 일관된 코드 스타일을 유지하는 데 도움이 됩니다.

  2. rules: 이 항목에서는 프로젝트의 특정 요구 사항에 맞춰 사용자 지정 규칙을 설정하거나 기존 규칙을 수정할 수 있습니다. 예를 들어, semi, indent, quotes와 같은 규칙을 설정할 수 있으며, 각 규칙은 배열 형태로 설정됩니다. 배열의 첫 번째 요소는 규칙의 에러 레벨("error", "warn", "off")을 나타내며, 두 번째 요소는 규칙의 구체적인 설정을 나타냅니다.

예시로, ESLint 설정 파일에 최소한으로 포함될 수 있는 설정은 다음과 같습니다.

{
    "env": {
        "browser": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "semi": ["error", "always"],
        "indent": ["error", 2],
        "quotes": ["error", "single"]
    }
}

 

장점

ESLint는 코드 품질과 개발 효율성을 향상시키는 데 중요한 역할을 하는 도구입니다. 이는 다음과 같은 주요 장점을 제공합니다:

  1. 일관된 코드 스타일: ESLint를 사용하면 팀 내에서 일관된 코드 스타일을 적용할 수 있습니다. 이는 코드의 가독성을 높이고, 협업 시 발생할 수 있는 문제를 줄여줌으로써 유지보수를 용이하게 합니다.

  2. 버그 예방: ESLint는 코드를 분석하여 잠재적인 버그를 사전에 식별하고 알려줍니다. 이를 통해 개발자는 일반적인 실수나 안티패턴을 피하고, 런타임 에러의 가능성을 줄일 수 있습니다.

  3. 보안 향상: 보안 취약점을 식별하는 데 ESLint가 활용될 수 있습니다. 예를 들어, 취약한 함수의 사용을 경고하거나, XSS 공격과 같은 보안 이슈를 탐지함으로써 애플리케이션의 보안 수준을 높일 수 있습니다.

  4. 커스터마이징 가능: ESLint는 매우 유연하게 설정할 수 있어, 다양한 규칙을 프로젝트의 요구 사항에 맞게 조정할 수 있습니다. 이는 프로젝트의 고유한 코딩 규칙이나 스타일 가이드를 적용하는 데 큰 도움이 됩니다.

ESLint의 이러한 장점들은 프로젝트의 코드 품질을 개선하고, 개발 과정을 더욱 효율적으로 만들어줍니다. 따라서, ESLint는 현대의 소프트웨어 개발 프로젝트에서 필수적인 도구 중 하나로 여겨집니다.

 

단점

ESLint는 협업 프로젝트에서 코드 작성의 기준을 명확하게 하고, 코드 품질을 유지하기 위해 매우 유용한 도구입니다. 그러나 그 사용은 몇 가지 단점을 수반할 수 있습니다:

  1. 설정 복잡성: ESLint는 매우 유연하고 강력한 도구로, 다양한 설정과 규칙을 제공합니다. 이는 사용자에게 큰 이점을 제공하지만, 동시에 설정 과정이 복잡하고 시간이 많이 소요될 수 있습니다. 특히 처음 ESLint를 사용하는 경우, 올바른 설정을 파악하고 프로젝트에 적용하는 데 어려움을 겪을 수 있습니다.

  2. 오용 가능성: ESLint의 규칙을 너무 많이 활성화하거나 너무 엄격하게 설정할 경우, 개발자가 불필요한 경고와 에러 메시지에 시달릴 수 있습니다. 이는 개발 과정을 방해하고, 팀 내에서 규칙에 대한 불만이나 혼란을 초래할 수 있습니다.

이러한 단점에도 불구하고, ESLint의 사용은 여전히 많은 이점을 제공합니다. 이를 통해 개발자는 코드의 일관성을 유지하고, 잠재적인 버그를 사전에 방지할 수 있으며, 전반적인 프로젝트 품질을 향상시킬 수 있습니다. 그러나 이러한 이점을 최대화하기 위해서는 ESLint 설정을 신중하게 고려하고, 팀 내에서 규칙에 대한 합의를 이루어야 합니다. 또한, 새로운 규칙을 도입할 때는 적응 기간을 고려하고, 점진적으로 규칙을 적용하여 팀원들이 새로운 코드 스타일에 적응할 수 있도록 해야 합니다.

"rules": {
    "semi": ["error", "always"],
    "indent": ["error", 2],
    "quotes": ["error", "single"]
}
#eslint#eslint란#eslint-plugin#eslint:recommended#vscode eslint