ESLint && Prettier && husky

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

Prettier · Opinionated Code Formatter

사용 이유

• 일관된 코드 스타일 유지
• 코드 품질 검사
• 자동 코드 포맷팅

💡 결과적으로 코드의 일관성, 품질, 가독성, 유지 보수성을 향상시키고 개발 과정에서 생산성을 높일 수 있습니다.

ESLint 사용 전제 조건

• Node.js  (^12.22.0, ^14.17.0, or >=16.0.0)

사용 방법

💡 프로젝트의 root 경로에 .eslintrc , .prettierrc 를 만들어 줍니다. ESLint & Prettier 는 프로젝트를 개발할 때 필요한 도구들이므로, 프로덕션 환경에서는 필요하지 않으니, —save-dev 로 install 하여 줍니다.

1. eslint: ESLint는 JavaScript 코드의 정적 분석을 수행하여 코드 품질을 검사하고 일관된 코드 스타일을 적용하는 도구입니다. 코드 스타일 규칙을 정의하고 해당 규칙을 준수하지 않는 코드에 대한 경고나 오류를 표시할 수 있습니다. 일반적으로 .eslintrc 또는 package.json 파일에서 ESLint 구성을 설정할 수 있습니다.
2. prettier: Prettier는 코드 포맷팅 도구로, 자동으로 일관된 코드 스타일을 적용하여 코드를 보기 좋게 만듭니다. Prettier는 자동으로 줄바꿈, 들여쓰기, 콤마 및 세미콜론 위치 등을 조정하여 코드를 정렬합니다. 코드 포맷팅 규칙을 설정하고 프로젝트에 적용할 수 있으며 .prettierrc 혹은 .prettierrc.json , .prettierrc.js 등을 통해서 설정을 적용할 수 있습니다.
3. eslint-config-prettier: ESLint와 Prettier는 모두 코드 스타일을 관리하는데 사용되지만, ESLint의 일부 규칙과 Prettier의 일부 규칙이 충돌할 수 있습니다. eslint-config-prettier는 ESLint의 규칙 중 Prettier와 충돌하는 규칙을 비활성화하여 두 도구가 함께 사용될 때 일관된 코드 스타일을 유지할 수 있도록 도와줍니다.
4. eslint-plugin-prettier: 이 플러그인은 ESLint에서 Prettier를 실행할 수 있도록 해줍니다. Prettier는 주로 코드 포맷팅을 담당하지만, ESLint에서 실행되어야 하는 일부 규칙도 있을 수 있습니다.
   eslint-plugin-prettier Prettier를 사용하여 코드를 자동으로 포맷팅하고, 포맷팅 결과에 대한 ESLint 경고를 제공합니다.
5. eslint-plugin-import: JavaScript 또는 TypeScript 프로젝트에서 import 및 export 문에 대한 다양한 규칙을 제공합니다. 이 플러그인은 모듈 가져오기 및 내보내기의 동작을 분석하고, 모듈 간의 종속성을 관리하는 데 도움을 줍니다.

• npm install --save-dev eslint
• npm install -—save-dev prettier
• npm install --save-dev eslint-config-prettier
• npm install —-save-dev eslint-plugin-prettier
• npm install --save-dev eslint-plugin-import
• TypeScript 사용 시 npm install --save-dev @typescript-eslint/parser
• TypeScript 사용 시 npm install --save-dev @typescript-eslint/eslint-plugin
• JavaScript 사용 시 npm install --save-dev @babel/eslint-parser

.eslintrc - basic

• next.js , nuxt.js 는 기본적으로 eslint를 제공하며, eslint 관련 패키지 참고 시 사용가능.

// 기본 샘플 설정 파일이며, 절대적인 Setting은 아닙니다. 프로젝트 별 상이하고 필요 옵션은 ESLint 공식 문서 참고.
{
  "root": true, // Monorepo 환경에서 유용하지만 ESLint 설정 파일이 하나만 있는 코드 저장소에서도 혹여나 상위 폴더에 있는 설정 파일에 영향을 받는 일이 없도록 root 옵션을 true로 설정하는 경우가 많음.
  "env": {
    "browser": true, // 브라우저 환경을 사용한다.
    "node": true, // Node.js 환경을 사용한다.
    "es6": true // ECMAScript 2015 (ES6) 환경을 사용한다.
  },
  "parser":"@typescript-eslint/parser", // TypeScript 사용시, JavaScript 사용시 "@babel/eslint-parser" 사용
  "parserOptions": {
    "ecmaVersion": "latest", // 가장 최근에 지원되는 버전을 사용
    "sourceType": "module", // module로 설정된 경우에는 import 구문을 사용하는 것이 유효
    "ecmaFeatures": {
      "jsx": true // jsx 활성화 *jsx 구문 지원과 react 지원은 틀리므로 react를 사용하는 경우 eslint-plugin-react 사용
    }
  },
  "plugins": ["import", "@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended", //사용하지 않는 변수와 같은 코드 품질 검사는 ESLint 추천 규칙 사용
    "plugin:@typescript-eslint/recommended", // TypeScript 사용 시 적용
    "plugin:prettier/recommended" // eslint-config-prettier를 실제로 활성화시켜서 중복되는 룰을 끄도록 하는 설정.
  ],
  "rules": {
    "no-var": "error",
    "no-empty-static-block": "error", // 빈 함수를 허용하지 않음.
    "require-await": "error", // async 사용 시 await 사용 필수
    "@typescript-eslint/no-unused-vars": "off" // 타입 스크립트 사용 시 인터페이스 충돌 방지
  }
}

.eslintignore

// node_modules 은 기본적으로 무시함. ignore 필요한 폴더 추가

build
dist
public

eslint:recommended 가 지원하는 rules

• ✅ - "eslint:recommended" 의 extends의 포함 Rules Reference - ESLint - Pluggable JavaScript Linter

  • 🔧 - --fix 옵션으로 자동으로 수정

    Command Line Interface Reference - ESLint - Pluggable JavaScript Linter

.prettierrc

{
  "singleQuote": true, // 작은 따옴표로 문자 감싸기
  "semi": true, // 세미콜론을 코드 끝에 사용
  "useTabs": false, // 탭을 사용할지 여부
  "tabWidth": 2, // 들여쓰기 간격
  "trailingComma": "all", // 객체나 배열의 마지막 요소 뒤에 항상 쉼표를 사용하도록 설정합니다.
  "printWidth": 80, // 한 줄의 최대 길이를 나타냅니다. 코드가 지정된 길이를 초과할 경우 줄 바꿈을 합니다.
  "arrowParens": "always" // 화살표 함수의 매개변수 주위에 괄호를 사용할지 여부를 결정
}

extends && plugins EsLint

• npm install --save-dev **eslint-plugin-unused-imports :** 사용하지 import 자동 삭제해주는 eslint plugin

  • .eslintrc 에 추가

    ```jsx
    "plugins": ["unused-imports"],
    "rules": {
        "unused-imports/no-unused-imports": "error"
      }
    ```

    https://github.com/sweepline/eslint-plugin-unused-imports

EsLint 자동화 설정

npm install --save-dev husky : husky는 front-end 개발 환경에서 git-hook을 쉽게 제어 할 수 있게 도와주는 툴이다. git-hook 은 git에서 특정 이벤트 (commit,push etc...)가 발생했을때 hook을 통해 특정 스크립트를 실행할 수 있도록 도와줍니다.

npm install --save-dev lint-staged : lint-staged는 Git에 의해 스테이징된(staged) 파일에 대해 린트 검사를 실행하는 도구입니다. Git의 pre-commit 훅에 통합되어 변경된 파일만 선택적으로 린트 검사를 수행할 수 있습니다.

npx husky-init : .husky 디렉토리가 생성되고, 해당 디렉토리 내부의 스크립트를 수정하여 원하는 동작을 설정할 수 있습니다. 주로 .husky/pre-commit 파일을 수정하여 코드 커밋 전에 실행할 스크립트를 추가하면 됩니다.

./husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src --fix" // eslint를 사용하여 프로젝트의 소스 코드를 린트 검사하고, 가능한 경우에는 자동으로 코드 스타일을 수정
  },
"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // lint staged 실행
    }
  },
"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": "npm run lint" //  실행 전 npm run lint 실행
  }

위의 모든 내용을 설정 후 .eslintrc 에 적용된 rules와 extends에 eslint:recommended 에 에러가 발생 시 커밋 불가능