eslint (한국어)

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


Installation

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

Installation

npm install eslint --save-dev

Usage

프로젝트 루트에 .eslintrc 또는 .eslintrc.json 파일을 생성하여 ESLint 설정을 정의합니다.

  • Name
    extends
    Type
    사용법
    Description

    이 부분에서는 기존에 정의된 ESLint 규칙을 확장하거나 기반 규칙 세트를 지정합니다. 예시에서는 eslint:recommended를 사용하여 기본적인 권장 규칙을 활성화했습니다.

  • Name
    rules
    Type
    사용법
    Description

    이 부분에서는 사용자 지정 규칙을 설정하거나 기존 규칙을 덮어쓸 수 있습니다. 예시에서는 semi, indent, quotes와 같은 규칙을 설정하고 있습니다. 각 규칙은 배열 형식으로 첫 번째 요소로는 에러 레벨을 나타내는 문자열("error", "warn", "off")을, 두 번째 요소로는 규칙의 설정을 나타내는 값을 가집니다.

최소한으로 작성된 eslint입니다. 세미콜론("semi"), 들여쓰기("indent"), 따옴표("quotes")에 대한 규칙입니다.

.eslintrc.json

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

장점

ESLint는 코드 스타일 일관성, 버그 예방, 보안 강화 및 코드 검사 규칙 커스터마이징을 통해 프로젝트의 품질을 향상시키는 도구입니다.

설명

  • Name
    일관된 코드 스타일
    Type
    장점
    Description

    ESLint를 사용하면 코드베이스 전체에서 일관된 코드 스타일을 유지할 수 있습니다. 이는 협업과 유지보수를 더 쉽게 만들어줍니다.

  • Name
    버그 예방
    Type
    장점
    Description

    ESLint는 잠재적인 버그를 식별하고 수정하는 데 도움을 줍니다. 코드에서 일반적인 실수나 안티패턴을 찾아내어 런타임 에러를 방지할 수 있습니다.

  • Name
    보안 향상
    Type
    장점
    Description

    ESLint는 보안 관련 취약점을 찾아내는 데 도움을 줄 수 있습니다. 예를 들어, 취약한 함수 사용이나 XSS(Cross-Site Scripting) 관련 이슈를 탐지할 수 있습니다.

  • Name
    커스터마이징 가능
    Type
    장점
    Description

    ESLint는 다양한 규칙을 커스터마이징하여 프로젝트에 맞게 설정할 수 있습니다. 이로써 프로젝트의 특정 요구사항에 맞는 코드 검사를 수행할 수 있습니다.

eslint

단점

설정 복잡성과 오용복잡성이 존재하지만, 협업 프로젝트 진행 시 코드 작성에 대한 기준을 잡기 위해 사용을 권장 드립니다.

  • 설정 방법을 모르면 설정부터 힘들어요.
  • 평소 사용하는 규칙과 달리 새로운 eslint를 도입했을 때, 코드 스타일이 달라지기 때문에, 적응 기간이 필요합니다.

설정 복잡성

"rules": {
    "semi": ["error", "always"],
    "indent": ["error", 2],
    "quotes": ["error", "single"]
}

설명

  • Name
    설정 복잡성
    Type
    단점
    Description

    ESLint는 다양한 설정과 규칙이 존재하기 때문에 처음에는 설정을 파악하는 데 시간이 걸릴 수 있습니다.

  • Name
    오용 가능성
    Type
    단점
    Description

    너무 많은 규칙을 활성화하거나 너무 엄격한 규칙을 설정하면 개발자들이 불필요한 경고와 에러 메시지로 인해 혼란스러울 수 있습니다.

eslint2