ESLint 시작하기

ESLint는 JavaScript 코드의 품질과 일관성을 향상시키기 위해 설계된 강력하고 확장 가능한 린팅 도구다.

ESLint의 주요 특징과 장점은 다음과 같다:

1. 코드 품질 향상
   • ESLint는 코드에서 잠재적인 오류, 버그, 안티 패턴 등을 식별하여 개발자에게 경고하거나 오류를 표시한다.
   • 이를 통해 코드의 오류를 조기에 발견하고 수정할 수 있어 런타임 오류를 방지하고 디버깅 시간을 단축할 수 있다.
2. 코드 일관성 유지
   • ESLint를 사용하면 팀 전체에서 코딩 스타일과 규칙을 통일할 수 있다.
   • 들여쓰기, 세미콜론 사용, 변수 명명 규칙 등과 같은 코딩 컨벤션을 정의하고 강제할 수 있다.
   • 이는 코드 가독성을 높이고 협업을 원활하게 하며 유지보수성을 향상시킨다.
3. 플러그인 아키텍처
   • ESLint는 완전한 플러그인 기반 아키텍처로 설계되어 있다.
   • 모든 린팅 규칙은 개별 플러그인으로 구현되며, 필요에 따라 런타임에 추가하거나 제거할 수 있다.
   • 이를 통해 프로젝트의 요구 사항에 맞게 ESLint를 유연하게 구성할 수 있다.
4. 확장성
   • ESLint는 커뮤니티에서 개발한 다양한 플러그인, 구성, 파서를 지원한다.
   • 이를 통해 프레임워크(React, Vue.js 등), 라이브러리(jQuery, Lodash 등), 언어 확장(TypeScript, Flow 등)별로 특화된 규칙을 적용할 수 있다.
   • 필요에 따라 커스텀 규칙을 작성하여 ESLint의 기능을 확장할 수도 있다.
5. 자동화된 코드 수정
   • ESLint는 --fix 옵션을 제공하여 일부 규칙 위반 사항을 자동으로 수정할 수 있다.
   • 이를 통해 수동으로 코드를 수정하는 시간을 절약하고 린팅 과정을 더욱 효율적으로 만들 수 있다.
6. 통합 가능성
   • ESLint는 다양한 개발 도구 및 워크플로우와 쉽게 통합할 수 있다.
   • 에디터 플러그인, 빌드 도구, CI/CD 파이프라인 등에 ESLint를 통합하여 개발 과정 전반에 걸쳐 일관된 코드 품질을 유지할 수 있다.

이러한 특징들로 인해 ESLint는 JavaScript 프로젝트에서 코드 품질을 향상시키고 개발 팀 간의 협업을 원활하게 하는 데 매우 유용한 도구로 자리잡았다. ESLint를 적절히 구성하고 활용함으로써 더 안정적이고 유지보수 가능한 JavaScript 코드를 작성할 수 있다.

사전 요구 사항

ESLint를 사용하기 위해서는 Node.js 런타임 환경이 필요하다. 특히 ESLint는 SSL 지원으로 빌드된 Node.js 버전이 필요하다.

1. Node.js 버전 요구 사항
   • 현재 ESLint는 다음 버전의 Node.js를 지원합니다:
     • ^18.18.0 : Node.js 18.x 버전 중 18.18.0 이상
     • ^20.9.0 : Node.js 20.x 버전 중 20.9.0 이상
     • > =21.1.0 : Node.js 21.1.0 이상의 모든 버전
   • 이는 ESLint가 해당 Node.js 버전에서 제공하는 최신 기능과 API를 활용할 수 있도록 보장한다.
2. SSL 지원 요구 사항
   • SSL(Secure Sockets Layer)을 지원하는 Node.js가 필요하다.
   • SSL은 네트워크 통신을 암호화하여 데이터 전송의 보안을 강화하는 프로토콜이다.
   • ESLint는 원격 리소스(예: 플러그인, 구성 파일 등)를 다운로드하거나 액세스할 때 SSL을 사용하여 보안 연결을 설정한다.
   • SSL 지원 없이 빌드된 Node.js에서 ESLint를 실행하면 보안 관련 오류가 발생할 수 있다.
3. 공식 Node.js 배포판
   • 공식 Node.js 웹사이트에서 제공하는 Node.js 배포판은 기본적으로 SSL 지원을 포함하고 있다.
   • 따라서 공식 배포판을 사용하는 경우 별도의 SSL 구성 없이 ESLint를 사용할 수 있다.
   • 그러나 커스텀 빌드나 일부 패키지 관리자를 통해 설치한 Node.js는 SSL 지원이 포함되지 않을 수 있으므로 주의해야 한다.
4. SSL 지원 확인 방법
   • Node.js에서 SSL 지원 여부를 확인하려면 다음 명령을 실행할 수 있다:

     node -p "process.versions.openssl"

   • 위 명령은 설치된 Node.js의 OpenSSL 버전을 출력한다.
   • 출력 결과가 빈 문자열이 아니라면 SSL이 지원되는 것이다.

ESLint를 사용할 때는 호환되는 Node.js 버전을 설치하고 SSL 지원 여부를 확인하는 것이 중요하다. 공식 Node.js 배포판을 사용하면 대부분의 경우 SSL 지원이 기본적으로 포함되어 있으므로 추가 구성 없이 ESLint를 사용할 수 있다. 그러나 사용자 정의 빌드나 특정 패키지 관리자를 통해 Node.js를 설치한 경우에는 SSL 지원 여부를 별도로 확인해야 할 수 있다.

빠른 시작

다음 명령을 사용하여 ESLint를 설치하고 구성할 수 있다:

npm init @eslint/config@latest

npm에 배포된 특정 구성을 사용하려면 --config 옵션을 사용하고 패키지 이름을 지정할 수 있다:

# use `eslint-config-standard` shared config
# npm 7+
npm init @eslint/config@latest -- --config eslint-config-standard

그 후에는 다음과 같이 파일이나 디렉토리에서 ESLint를 실행할 수 있다:

npx eslint yourfile.js
# or
yarn run eslint yourfile.js

구성

ESLint 구성 파일(eslint.config.js 또는 eslint.config.mjs )은 프로젝트에서 ESLint의 동작을 제어하는 중심점이다. 이 파일에서 적용할 규칙, 사용할 플러그인, 확장할 공유 구성 등을 정의할 수 있다.

구성 파일의 주요 개념과 옵션의 특징은 다음과 같다.

1. 규칙(Rules)
   • ESLint의 핵심 기능은 코드에 대한 규칙을 정의하고 적용하는 것이다.
   • 규칙은 특정 코딩 스타일, 잠재적인 오류, 모범 사례 등을 강제하는 데 사용된다.
   • 각 규칙은 고유한 이름을 가지며, 구성 파일의 rules 섹션에서 활성화하고 구성할 수 있다.
   • 규칙의 값은 오류 수준(끄기, 경고, 오류) 과 추가 옵션을 정의한다.
   • 예를 들어, 'no-unused-vars': 'error' 는 사용되지 않은 변수를 오류로 표시하도록 설정한다.

// eslint.config.js
export default [
  {
    rules: {
      'no-unused-vars': 'error',
      'no-undef': 'error',
    },
  },
];

2. 오류 수준(Error Levels)
   • 각 규칙에는 위반 사항을 처리하는 방식을 결정하는 오류 수준이 할당된다.
   • off 또는 0 : 규칙을 비활성화한다. 위반 사항을 무시한다.
   • warn 또는 1 : 규칙을 경고로 활성화한다. 위반 사항을 경고로 보고하지만 ESLint 종료 코드에는 영향을 주지 않는다.
   • error 또는 2 : 규칙을 오류로 활성화한다. 위반 사항을 오류로 보고하고 ESLint 종료 코드를 1 로 설정한다.
3. 권장 구성(Recommended Configuration)
   • ESLint는 일반적으로 사용되는 규칙 세트를 포함하는 권장 구성을 제공한다.
   • js.configs.recommended 는 ESLint 팀에서 권장하는 규칙 세트를 나타낸다.
   • 권장 구성을 사용하면 프로젝트에 적합한 기본 규칙을 빠르게 설정할 수 있다.
   • 구성 파일에서 권장 구성을 확장한 후 개별 규칙을 추가하거나 수정할 수 있다.

// eslint.config.js
import js from '@eslint/js';

export default [
  js.configs.recommended,

  {
    rules: {
      'no-unused-vars': 'warn',
      'no-undef': 'warn',
    },
  },
];

4. 플러그인 및 공유 구성
   • ESLint는 플러그인과 공유 구성을 통해 확장할 수 있다.
   • 플러그인은 추가적인 규칙, 환경, 구문 분석기 등을 제공하여 ESLint의 기능을 확장한다.
   • 공유 구성은 미리 정의된 규칙 세트와 플러그인의 조합으로, 특정 프로젝트 유형이나 프레임워크에 맞게 설계되었다.
   • npmjs.com에서 eslint-config 로 검색하여 커뮤니티에서 만든 공유 구성을 찾을 수 있다.
   • 구성 파일에서 플러그인과 공유 구성을 적절히 활용하면 ESLint를 프로젝트 요구 사항에 맞게 확장할 수 있다.
5. 구성 파일 형식
   • ESLint 구성 파일은 JavaScript 또는 JSON 형식을 사용할 수 있다.
   • JavaScript 형식(eslint.config.js)은 더 많은 유연성을 제공하며, 주석과 동적 로직을 포함할 수 있다.
   • JSON 형식(eslint.config.json)은 구성을 정적 데이터로 표현하며, 주석이나 동적 로직을 지원하지 않는다.

ESLint 구성 파일은 프로젝트의 코드 품질과 일관성을 유지하는 데 핵심적인 역할을 한다. 적절한 규칙을 선택하고, 오류 수준을 조정하며, 필요에 따라 플러그인과 공유 구성을 활용하여 프로젝트의 요구 사항에 맞게 ESLint를 사용자 정의할 수 있다. 구성 파일을 통해 팀 전체에 일관된 코딩 스타일과 모범 사례를 적용할 수 있으며, 이는 코드 품질 향상과 유지 관리성 증대로 이어진다.

전역 설치

ESLint를 전역으로 설치하는 것은 몇 가지 단점이 있어 일반적으로 권장되지 않는다. 대신 프로젝트별로 로컬에 ESLint를 설치하는 것이 좋다.

전역 설치의 문제점과 로컬 설치의 장점은 다음과 같다.

1. 버전 충돌 문제
   • 전역으로 설치된 ESLint는 시스템 전체에서 단일 버전으로 공유된다.
   • 각 프로젝트마다 다른 버전의 ESLint가 필요한 경우 버전 충돌이 발생할 수 있다.
   • 한 프로젝트에서 ESLint 버전을 업그레이드하면 다른 프로젝트에 영향을 줄 수 있다.
   • 로컬 설치를 사용하면 프로젝트별로 독립적인 ESLint 버전을 유지할 수 있어 버전 충돌을 방지할 수 있다.
2. 플러그인 및 공유 구성 종속성
   • ESLint 플러그인과 공유 구성은 특정 ESLint 버전에 따라 다를 수 있다.
   • 전역 ESLint와 호환되지 않는 플러그인이나 구성을 사용할 경우 오류가 발생할 수 있다.
   • 전역 설치 시에도 플러그인과 공유 구성은 여전히 프로젝트 로컬에 설치해야 한다.
   • 로컬 설치를 사용하면 ESLint와 플러그인, 구성 간의 버전 호환성을 보장할 수 있다.
3. 프로젝트 종속성 관리
   • 전역 설치는 프로젝트의 종속성 관리를 복잡하게 만든다.
   • package.json 에 ESLint를 명시적으로 포함하지 않으면 다른 개발자가 프로젝트를 설정할 때 누락될 수 있다.
   • 로컬 설치를 사용하면 package.json 에 ESLint와 관련 종속성을 명시할 수 있어 프로젝트 설정을 간소화할 수 있다.
4. CI/CD 통합
   • 전역 설치는 CI/CD 파이프라인에서 문제를 일으킬 수 있다.
   • 빌드 서버나 Docker 컨테이너에는 전역 ESLint가 설치되어 있지 않을 수 있다.
   • 로컬 설치를 사용하면 프로젝트 종속성으로 ESLint를 포함할 수 있어 CI/CD 환경에서 쉽게 재현할 수 있다.
5. 협업 및 일관성
   • 전역 설치는 팀 구성원 간에 ESLint 버전과 구성의 불일치를 초래할 수 있다.
   • 로컬 설치를 사용하면 모든 팀 구성원이 동일한 ESLint 버전과 구성을 공유할 수 있다.
   • 이는 일관된 코드 스타일과 린팅 규칙을 적용하는 데 도움이 된다.

ESLint를 전역으로 설치하는 것은 편리해 보일 수 있지만, 장기적으로는 유지 관리와 협업에 어려움을 겪을 수 있다. 프로젝트별로 로컬에 ESLint를 설치하는 것이 버전 호환성, 종속성 관리, CI/CD 통합, 팀 협업 측면에서 더 나은 접근 방식이다. 로컬 설치를 사용하면 프로젝트 요구 사항에 맞게 ESLint를 유연하게 구성하고, 일관된 개발 환경을 유지할 수 있다. 따라서 대부분의 경우 ESLint를 전역이 아닌 로컬에 설치하는 것이 좋다.

수동 설정

ESLint를 프로젝트에 수동으로 설정할 수 있다. 이 과정은 프로젝트의 특정 요구 사항에 맞게 ESLint를 구성하고자 할 때 유용하다.

1. 사전 요구 사항
   • ESLint를 설치하기 전에 프로젝트에 package.json 파일이 있어야 한다.
   • package.json 은 프로젝트의 메타데이터와 종속성을 관리하는 파일이다.
2. ESLint 패키지 설치
   • 프로젝트에 ESLint를 개발 의존성으로 설치한다.
   • 다음 명령을 사용하여 ESLint와 @eslint/js 패키지를 설치한다:

     npm install --save-dev eslint @eslint/js

   • @eslint/js 패키지는 ESLint의 기본 구성과 규칙을 제공한다.
3. 구성 파일 생성
   • ESLint 구성 파일인 eslint.config.js 를 프로젝트 루트 디렉토리에 생성한다.
   • 다음 명령을 사용하여 파일을 생성할 수 있다:

     touch eslint.config.js

   • eslint.config.js 는 ESLint의 동작을 제어하는 설정을 포함한다.
4. 구성 파일 작성
   • eslint.config.js 파일을 열고 ESLint 구성을 추가한다.
   • 다음은 기본적인 구성 예시다:

     import js from '@eslint/js';
     
     export default [
       js.configs.recommended,
     
       {
         rules: {
           'no-unused-vars': 'warn',
           'no-undef': 'warn',
         },
       },
     ];

   • js.configs.recommended 는 ESLint에서 권장하는 규칙 세트를 제공한다.
   • rules 객체에서 개별 규칙을 활성화하거나 비활성화할 수 있다.
   • 규칙의 값으로 off , warn , error 를 사용하여 규칙의 심각도를 설정할 수 있다.
5. 코드 린트 실행
   • ESLint CLI를 사용하여 코드를 린트한다.
   • 다음 명령을 사용하여 특정 디렉토리나 파일을 린트할 수 있다:

     npx eslint project-dir/ file1.js

   • npx 는 로컬에 설치된 ESLint 패키지를 실행한다.
   • 린트 결과에서 발견된 문제와 경고를 확인하고 해결한다.
6. 추가 구성 옵션
   • ESLint는 다양한 구성 옵션을 제공하여 프로젝트 요구 사항에 맞게 커스터마이징 할 수 있다.
   • eslint.config.js 에서 추가 규칙, 플러그인, 파서 등을 구성할 수 있다.
   • ESLint 공식 문서의 구성 섹션을 참조하여 사용 가능한 옵션과 설정에 대해 자세히 알아볼 수 있다.
7. IDE 통합
   • 많은 IDE와 텍스트 편집기에서 ESLint 통합을 제공한다.
   • ESLint 플러그인이나 확장 기능을 설치하여 코드 편집 중 실시간으로 린트 결과를 확인할 수 있다.
   • 이를 통해 개발 과정에서 빠르게 문제를 발견하고 수정할 수 있다.

ESLint를 수동으로 설정하면 프로젝트의 특정 요구 사항에 맞게 구성하고 커스터마이징 할 수 있다. 프로젝트 루트에 package.json 과 eslint.config.js 파일을 생성하고, 필요한 패키지를 설치한 후 구성 파일에 원하는 설정을 추가한다. ESLint CLI를 사용하여 코드를 린트하고 문제를 식별 및 해결할 수 있다. 추가적인 구성 옵션과 IDE 통합을 활용하여 개발 과정에서 ESLint를 효과적으로 사용할 수 있다.