GitHub 오픈소스 탐험

ESLint는 JavaScript 코드를 더욱 깨끗하고 일관되게 만들어주는 도구입니다. 하지만 기본 ESLint 설정만으로는 모든 코드 품질 문제를 해결하기에는 부족할 수 있습니다. 이러한 문제를 해결해줄 강력한 도구가 바로 'eslint-plugin-unicorn'입니다. 이 플러그인은 200개 이상의 강력한 ESLint 규칙을 제공하여 코드 품질을 한층 더 높여줍니다. 그럼 이 유용한 플러그인에 대해 자세히 살펴보겠습니다.

왜 eslint-plugin-unicorn인가?

'eslint-plugin-unicorn'은 단순히 코드 스타일을 강제하는 것이 아니라, JavaScript와 TypeScript의 모범 사례를 따르도록 도와줍니다. 이 플러그인은 코드 오류를 사전에 방지하고, 더 나은 코딩 습관을 형성하는 데 큰 도움을 줍니다. 또한, CSS, HTML, JSON, Markdown 등 다양한 파일 형식도 지원하므로, 다양한 프로젝트에 유용하게 활용될 수 있습니다.

주요 기능과 특징

200개 이상의 규칙: 다양한 상황에 맞는 규칙을 제공하여 코드 품질을 유지합니다.
코드 자동 수정: --fix 옵션을 사용하여 자동으로 수정할 수 있는 규칙을 지원합니다.
유연한 설정: 기본 제공되는 프리셋을 사용할 수 있으며, 필요에 따라 각 규칙을 세밀하게 설정할 수 있습니다.
광범위한 언어 지원: JavaScript뿐만 아니라 TypeScript, CSS, HTML 등 다양한 언어를 지원합니다.

설치하기

설치를 위해서는 먼저 ESLint가 필요합니다. 아래 명령어를 사용하여 eslint와 eslint-plugin-unicorn을 개발 종속성으로 설치하세요.

npm install --save-dev eslint eslint-plugin-unicorn

ESLint 버전은 >=10.4이어야 하며, Flat config와 ESM을 지원해야 합니다.

기본 사용법

설치가 완료되면, eslint.config.js 파일을 생성하거나 기존 설정 파일을 수정하여 플러그인을 사용할 수 있습니다. 아래는 기본 설정 예시입니다:

import eslintPluginUnicorn from 'eslint-plugin-unicorn';
import { defineConfig } from 'eslint/config';
import globals from 'globals';

export default defineConfig([
    {
        languageOptions: {
            globals: globals.builtin,
        },
        plugins: {
            unicorn: eslintPluginUnicorn,
        },
        rules: {
            'unicorn/prefer-module': 'error',
            // 추가적인 규칙을 여기에 설정할 수 있습니다.
        },
    },
    // 추가 설정...
]);

위 코드는 unicorn/prefer-module 규칙을 활성화하여, 모듈 시스템을 사용하는 것을 권장하는 설정입니다. 다양한 규칙은 공식 문서에서 확인할 수 있습니다.

실무에서 활용하기

이 플러그인은 실제 프로젝트에서 코드 리뷰와 유지보수를 더욱 수월하게 만들어줍니다. 예를 들어, 팀원들이 작성한 코드에서 unicorn/catch-error-name 규칙을 활성화하면, catch 문에서 오류 변수를 명시적으로 정의하도록 강제할 수 있습니다. 이는 코드의 가독성을 높이고, 실수를 줄이는 데 기여합니다.

또한, unicorn/better-dom-traversing 규칙을 활용하면 보다 효율적인 DOM 탐색 방법을 사용하도록 유도할 수 있습니다. 이러한 규칙들은 결과적으로 코드의 성능과 유지보수성을 높여줍니다.

비슷한 도구와 비교

ESLint 외에도 여러 규칙 기반의 코드 품질 도구들이 존재합니다. 예를 들어, Prettier는 코드 포맷팅에 중점을 둔 도구입니다. 그러나 Prettier는 코드 스타일만을 다루고, 논리적 구조나 모범 사례에 대한 체크는 수행하지 않습니다. 반면, eslint-plugin-unicorn은 코드 품질 전반에 걸쳐 더 폭넓은 규칙을 제공하므로, 둘을 함께 사용하는 것이 좋습니다.

개발자가 알아야 할 강력한 ESLint 규칙 모음