24.08.12 day44 ESLint

ESLint

ESLint는 JavaScript 및 TypeScript 코드에서 발견될 수 있는 문제를 식별하고 수정하기 위해 사용되는 정적 코드 분석 도구이며, 개발자가 더 깨끗하고 일관된 코드베이스를 유지하는 데 도움이 된다.

개념

• Linting: 코드에서 잠재적인 문제나 스타일 위반 사항을 찾아내는 과정이며, Lint라는 용어는 원래 프로그램에서 남아 있는 작은 오류나 버그를 지칭하는 데 사용되었다.
• ESLint는 이러한 linting을 자동화하는 도구로, 코드의 품질을 높이고, 버그를 줄이며, 코드 스타일을 일관되게 유지하는 데 도움을 준다.

주요 기능

• 코드 분석
  • ESLint는 소스 코드를 읽고, 규칙을 기반으로 분석하여 문제를 식별한다.
  • 예를 들어, 변수 선언 후 사용하지 않는 변수, 예상하지 못한 전역 변수 사용, 타입 오류 등을 감지할 수 있다.
• 규칙 정의 및 적용
  • ESLint는 기본적으로 수백 개의 규칙을 제공하며, 개발자는 이를 활성화하거나 비활성화할 수 있다.
  • 또한, 자신만의 규칙을 정의하여 팀 내 코드 스타일을 유지할 수 있다.
• 자동 수정(Auto-fix)
  • ESLint는 여러 가지 문제를 자동으로 수정할 수 있다.
  • 예를 들어, 잘못된 들여쓰기, 세미콜론 누락, 작은 스타일 문제 등은 명령어로 자동 수정할 수 있다.
• 확장성
  • ESLint는 플러그인, 설정 파일, 사용자 정의 규칙을 통해 확장할 수 있다.
  • 이로 인해 다양한 프로젝트에 적합하게 커스터마이징할 수 있다.

ESLint 설정

• .eslintrc 파일
  • ESLint는 프로젝트의 루트 디렉토리에 .eslintrc 파일을 통해 설정된다.
  • 이 파일은 JSON, YAML, 또는 JavaScript 형식으로 작성될 수 있으며, 어떤 규칙을 사용할지, 어떤 환경에서 코드를 실행할지 등을 정의한다.
• 규칙 설정
  • ESLint는 각 규칙에 대해 "off", "warn", "error" 등의 레벨을 설정할 수 있다.
  • 예를 들어, quotes 규칙을 "error"로 설정하면, 잘못된 따옴표 사용 시 에러가 발생하게 된다.

// .eslintrc.json의 예시
{
    "root": true,
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    }
}

ESLint 플러그인

• 플러그인 시스템: ESLint는 플러그인을 통해 추가 기능을 제공할 수 있다. 예를 들어, React, TypeScript, Vue.js 등 특정 프레임워크에 특화된 플러그인을 설치하여 ESLint를 확장할 수 있다.
• 설치 및 사용: 예를 들어, TypeScript를 사용하는 프로젝트에서는 @typescript-eslint/eslint-plugin과 @typescript-eslint/parser를 설치하여 TypeScript 코드에 ESLint를 적용할 수 있다.
• 예시:
  • eslint-config-airbnb-base: 에어비엔비 린트 플러그인
  • eslint-config-next: Next.js 전용 린트 플러그인
  • eslint-plugin-react: 리액트 전용 플러그인
  • eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인
  • eslint-config-prettier: 요건 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인
  • @typescript-eslint/eslint-plugin: : 타입스크립트 전용 린트

ESLint와 코드 스타일 가이드

• ESLint는 유명한 코드 스타일 가이드와 함께 자주 사용되는데, 예를 들어, Airbnb 스타일 가이드는 많은 JavaScript 개발자들이 사용하는 일관된 코드 스타일을 제공하며, ESLint 설정을 통해 쉽게 적용할 수 있다.
• ESLint는 코드 스타일링 도구인 Prettier와 함께 사용할 수 있다. Prettier는 코드의 형식을 관리하고, ESLint는 로직과 관련된 문제를 다루는 방식으로 통합하여 사용할 수 있다.

ESLint 사용 예시

• 프로젝트 설정: 새로운 프로젝트에서 ESLint를 설정하려면 eslint --init 명령어를 사용하여 간편하게 초기 설정을 할 수 있으며, 이 명령어는 질문에 따라 적절한 ESLint 설정 파일을 생성해준다.
• 명령어 사용: eslint . 명령어로 현재 디렉토리의 모든 파일을 분석할 수 있으며, eslint --fix . 명령어로 자동 수정 가능한 문제들을 해결할 수 있다.

ESLint 장점

• 버그 방지: 코드 작성 시 실수를 줄이고 잠재적인 버그를 사전에 방지할 수 있다.
• 일관된 코드 스타일 유지: 팀 내에서 일관된 코드 스타일을 유지하는 데 중요한 역할을 한다.
• 리팩토링 도우미: 코드 리팩토링 시 발생할 수 있는 문제를 사전에 감지할 수 있다.

ESLint 설치는 해당 리액트 폴더의 터미널에 라이브러리를 설치해야 한다.

$ npm install -D eslint

 

설치한 후에는 vscode의 확장 프로그램에서 ESLint Extension을 설치해서 사용하면 된다.