[Javascript] - ESLint 간단하게 알아보기

October 19, 2022

ESLint와 Prettier를 사용하는 이유

ESLint와 Prettier는 보통 프로젝트 시작 단계(초기 셋팅)에서 코드 포맷팅과 코드 품질을 위해서 사용합니다.

  • 코드 포맷팅 : 코드 컨벤션을 설정하기 위함.
  • 코드 품질 : 잠재적인 오류나 버그를 찾는 역할

ESLint 적용하기

목적

코드 검사 및 수정

적용 방법

  1. node.js 설치가 필수, node package를 이용.

    // .eslintrc.js
    module.export = {
      rules: {
        'no-unexpected-multiline': 'error',
        'no-extra-semi': 'error',
      },
    }
    
    // package.json > script : { "lint" :  "eslint src" }
    // src에 해당하는 모든 코드를 검사
    
    // npm run lint 명렁어 실행
    
  2. package.json 파일 아래에 script 문에 { "lint" : "eslint src" }를 작성합니다. 이것으로 npm run lint 명령어를 실행하면 src에 해당하는 모든 코드를 검사합니다.

    --fix 옵션을 이용하여 잘못된 부분은 수정되도록 설정도 가능합니다.

  • eslint.org/docs/rules 을 참고하면 스패너 모양은 --fix 옵션을 이용하여 수정 가능 하다는 것을 알려줍니다.
  • ✔️ 표시가 되어있는 경우 "extends" : "eslint:recommended" 를 적용했을 경우 적용되는 룰입니다.

    // .eslintrc.js
    module.export = {
      extends: ['eslint:recommended'],
    }
    

Prettier 적용하기

목적

코드 포맷팅, 코드의 일관성을 유지할 수 있습니다.

적용 방법

$ npm install prettier      // 설치
$ npx prettier src/**/*     // 실행
$ npx prettier src/**/* --write     // 실행 후 적용

prettier는 eslint와 달리 규칙이 미리 셋팅되어있습니다. 따라서 추가 설정업시 바로 사용이 가능합니다.

ESLint + Prettier

코드 포맷팅을 맞추더라도 코드 품질과 관련된 검사는 ESLint의 몫입니다.

ESLint는 prettier와 통합하는 방법을 제공해줍니다.

  • eslint-config-prettiereslint-plugin-prettier
  • prettier 포맷팅 규칙을 eslint에 추가합니다. 서로 충돌하는 옵션이 있다면 prettier의 규칙을 사용하도록 하는 도구입니다.

    $ npm install eslint-config-prettier eslint-plugin-prettier
    
    // .eslintrc.js
    module.export = {
      extends: ['eslint:recommended', 'plugin:prettier/recommended'],
    }
    

Git hook을 이용한 자동화 방법

Git hook이란?

husky를 이용, 커밋 시점에 어떤 일을 작동시킬 수 있습니다. 이것을 이용해서 커밋 시점에 ESLint를 체크할 수 있습니다.

설치 방법

  1. 허스키를 설치합니다.

    $ npm install husky
    
  2. 깃 훅 테스트 방법, 아래 페키지를 작성 후 $ git commit --allow-empty -m "husky test" 명령어 실행 => 콘솔창 확인

    // package.json
    {
      "husky": {
        "hooks": {
          "pre-commit": "echo '커밋전 출력'"
        }
      }
    }
    
  3. 테스트 완료 후 아래로 수정

    // package.json
    {
      "husky": {
        "hooks": {
          "pre-commit": "npm run lint"
        }
      }
    }
    

최적화

위 방법은 모든 소스 코드를 검사하는 방법입니다. 만약 코드가 많아져서 모든 코드를 검사하면서 커밋이 느려질 수 있는데 이럴경우 lint-staged를 이용하여 변경(스테이징)된 파일만 린트를 수행할 수 있는 도구입니다.

$ npm install lint-staged
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts}": "npm run lint"
  }
}

에디터의 확장 프로그램을 이용한 방법.

커밋 시점이 아닌 개발 단계에서 ESLint & Prettier 적용이 가능합니다.

VS Code의 ESLint와 Prettier 확장 프로그램을 설치해서 사용합니다.

사용법은 아래를 참고해주세요.

// settings.json
{
  "eslint.enable": true, // eslint 활성화
  "editor.codeActionsOnSave": {
    // 저장시 eslint 규칙에 맞게 수정
    "source.fixAll.eslint": true
  }
}

results matching ""

    No results matching ""