[스파로스 아카데미] 협업을 위한 ESLint + Prettier + Husky 설치 및 설정하기

입과한지 벌써 한달정도가 되었다..!!🕶️

그동안 이벤트 스토밍, ERD 설계 , api 명세서를 작성했고, 프론트엔드 코드 작성에 들어갔다

협업을 시작하기 전에 프로젝트에서 코딩 스타일을 일관성있게 유지하기 위해서 컨벤션을 정의했다

 

강사님께서 맞추라고 조언주신 부분들은 대략적으로

1. 컴포넌트 함수 선언 형식 ,컴포넌트가 아닌 함수 선언 형식
2. 변수명, 함수명은 카멜케이스로
3. import 문 그룹별 + 알파벳 순서로 정렬
4. 리액트 훅 그룹별 정렬
5. 커밋 메시지 컨벤션 등등..

 

그동안 프로젝트하면서 커밋 컨벤션이랑 변수명, 파일명 등등은 통일해서 하려고 했었지만

import 문이나 react hook 순서도 통일해야한다는 건 몰랐었는데,  ESLint + Prettier + Husky를 사용하면 쉽게 할 수 있다는 것을 알게되었다

---

 

💡ESLint + Prettier + Husky의 역할

1️⃣ESLint

 자바스크립트와 타입스크립트 코드의 문법과 스타일을 분석하고, 잠재적인 오류를 발견하는 정적 코드 분석 도구

코드의 문법 오류를 발견하면 에러 메시지를 표시해준다

 

2️⃣ Prettier

Prettier는 코드 포맷팅 도구로, 코드의 형식을 자동으로 정리해주는 역할을 한다. Prettier는 ESLint와 달리 코드의 스타일만을 관리하는 도구

 

prettier 설정 옵션

printWidth
한 줄의 최대 길이를 설정합니다. 이 값보다 길어지면 자동으로 줄바꿈을 적용합니다.
기본값: 80, 예시: printWidth: 100

tabWidth
설명: 탭 간격을 설정합니다. 탭을 사용할 때 몇 칸의 공백을 사용할지 설정합니다.
기본값: 2, 예시: tabWidth: 4

useTabs
설명: 탭 대신 스페이스(공백)를 사용할지 여부를 설정합니다.
기본값: false (스페이스 사용), 예시: useTabs: true (탭 사용)

semi
설명: 명령문 끝에 세미콜론(;)을 사용할지 여부를 설정합니다.
기본값: true, 예시: semi: false (세미콜론을 사용하지 않음)

singleQuote
설명: 문자열에서 큰따옴표(") 대신 작은따옴표(')를 사용할지 여부를 설정합니다.
기본값: false (큰따옴표 사용), 예시: singleQuote: true (작은따옴표 사용)

trailingComma
설명: 객체, 배열 등에서 마지막 요소 뒤에 쉼표를 추가할지 여부를 설정합니다.
옵션: 
"none": 마지막 쉼표를 허용하지 않음
"es5": ES5에서 허용하는 마지막 쉼표 (객체, 배열)
"all": 함수 매개변수와 같은 모든 가능한 곳에 마지막 쉼표를 추가
기본값: "es5", 예시: trailingComma: "all"

bracketSpacing
설명: 객체 리터럴에서 중괄호 내의 공백 사용 여부를 설정합니다.
기본값: true, 예시: bracketSpacing: false (공백 없이 {foo: bar})

jsxBracketSameLine
설명: JSX의 마지막 >를 다음 줄 대신 동일한 줄에 둘지 여부를 설정합니다.
기본값: false, 예시: jsxBracketSameLine: true

arrowParens
설명: 화살표 함수에서 매개변수가 하나일 때 괄호 사용 여부를 설정합니다.
옵션:
"always": 항상 괄호 사용
"avoid": 매개변수가 하나일 경우 괄호 생략
기본값: "always", 예시: arrowParens: "avoid" (하나의 매개변수일 경우 괄호 생략)

endOfLine
설명: 파일의 줄 끝 방식 설정 (Line ending)
옵션:
"lf": Line feed (\n)
"crlf": Carriage return + Line feed (\r\n)
"cr": Carriage return (\r)
"auto": 환경에 따라 자동 설정, 기본값: "lf"

htmlWhitespaceSensitivity
설명: HTML 파일에서 공백 민감도를 설정합니다.
옵션:
"css": CSS에서 공백을 처리하는 것처럼 설정
"strict": 모든 공백을 유지
"ignore": 모든 공백을 무시
기본값: "css"

proseWrap
설명: 마크다운 파일에서 줄바꿈 방식을 설정합니다.
옵션:
"always": 항상 줄바꿈 적용
"never": 절대 줄바꿈하지 않음
"preserve": 기존 줄바꿈을 유지
기본값: "preserve"

 

 

3️⃣ Husky

Husky는 Git 훅(Git hooks)을 관리하고, 이를 프로젝트 워크플로우에 통합하는 도구이다. Husky를 사용하면 Git 커밋이나 푸시 전에 자동으로 특정 스크립트를 실행할 수 있다

 

💡ESLint + Prettier 설치 과정

1️⃣  Pretter - Code Formatter + ESLint 설치 (vscode extesion)

2️⃣  extension setting 에서 Default Formatter 를 Prettier 로 설정하고 Format On Save 에 체크해주면 파일 저장시에 자동으로 정렬 해준다

 

이건 로컬환경에서만 적용되기 때문에 프로젝트에 적용해서 통일하려면 패키지 설치가 필요

---

💡ESLint + Prettier 프로젝트에 적용하기

1️⃣ prettier 설치

npm install --save-dev prettier

 

2️⃣ ESLint와 Prettier 통합을 위한 패키지 설치                                                                                                                                                                                                                                                 

npm install --save-dev eslint eslint-config-next eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier

 

3️⃣.eslintrc.json에 코드의 스타일 규칙을 정의

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "plugin:prettier/recommended"
  ],
  "plugins": ["import"],
  "rules": {
    "import/no-unresolved": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "bracketSameLine": true,
        "endOfLine": "auto"
      }
    ]
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": [
          "packages/module-a/tsconfig.json",
          "packages/module-b/tsconfig.json"
        ]
      }
    }
  }
}

 

4️⃣. setting.json에 코드 작성 및 저장 시 자동으로 포맷팅과 린팅이 적용하기 위한 내용 추가

{
  "workbench.iconTheme": "material-icon-theme",
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "files.autoSave": "afterDelay",
  "prettier.bracketSameLine": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // "extensions.ignoreRecommendations": true,

  // 저장 시 ESLint와 Prettier 자동 수정
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "editor.formatOnSave": true,
  // ESLint와 Prettier가 동작할 파일 유형 정의
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "workbench.editor.mouseBackForwardToNavigate": false,
  "editor.formatOnSave": true,
  "material-icon-theme.files.customClones": []
}

 

 

eslint와 prettier 설정을 하는데 팀원 중 한명은 되고, 한명은 안되는 상황들이 발생해서 애를 먹었는데 여러 방법을 시도해 본 결과 성공한 결과물을 정리해보았다. husky도 잘 안돼서 애먹었지만..   다른 교육생 분이 정리해 주신 글을 보고 성공할 수 있었다 👍

 

오류를 해결하는 과정이 힘들었긴 하지만 안해본 것들을 경험하고 성장할 수 있는 기회다 생각하고 많이 공부해서 능숙해질 수 있도록 다짐.. 지식 +1 이라니 럭키다니잔앙🍀▪️▪️