vite + typescript 환경에서 eslint, prettier, husky, lint-staged 설정

Eslint

eslint는 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.

vite 프로젝트를 생성하면 아래와 같이 eslint가 기본적으로 설치된다.
에디터에서 사용하기 위해 vscode eslint extension을 설치한다.

// .eslintrc.cjs
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

// package.json
"devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "typescript": "^5.2.2",
    "vite": "^5.3.1"
  }

eslint-config-airbnb

eslint 규칙을 직접 설정할 수도 있지만 airbnb 스타일 가이드를 사용하고자 한다.

사용 이유

• Airbnb 스타일 가이드는 코드 품질을 보장하기 위해 포괄적인 규칙 세트를 제공한다.
• Airbnb는 대규모 소프트웨어 프로젝트에서 널리 사용되며, 많은 회사들이 Airbnb의 스타일 가이드를 자체 프로젝트에 적용한다.
• Airbnb 팀은 스타일 가이드를 지속적으로 업데이트하고 유지보수한다.
• Airbnb 스타일 가이드는 자바스크립트 뿐만 아니라 리액트 규칙도 함께 있다.
• ESLint와 쉽게 통합될 수 있으며, Prettier와 같은 다른 도구와 함께 사용하기에도 용이하다.
• 문제 해결이나 설정에 관한 정보를 쉽게 찾을 수 있다.

사용 방법

https://www.npmjs.com/package/eslint-config-airbnb
eslint-config-airbnb 라이브러리는 기본적으로 ECMAScript 6+와 리액트를 포함하는 airbnb ESLint 규칙을 제공하고 아래 5개의 패키지들을 필수로 한다.

• eslint
• eslint-plugin-import : ES6의 import, export 구문을 지원하는 필수 플러그인
• eslint-plugin-react : react 규칙이 들어있는 플러그인
• eslint-plugin-react-hooks: react hook 규칙이 들어있는 플러그인
• eslint-plugin-jsx-a11y: JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인

설치

npm install -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

타입스크립트

https://www.npmjs.com/package/eslint-config-airbnb-typescript
타입스크립트 사용하면 eslint-config-airbnb-typescript도 사용해준다.
npm install -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@ @typescript-eslint/parser

eslint 적용

다음과 같이 extends를 설정해준다.

// .eslintrc.cjs
extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
	'plugin:prettier/recommeded'
  ],

Prettier

prettier는 일관성 있는 코드 스타일을 유지할 수 있게 도와주는 도구이다.

사용

• npm i -D prettier
• prettier extension 설치
• vscode prettier 적용

prettier 설정

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto"
}

eslint와 prettier 동시 설정

eslint는 prettier의 formatting 기능도 포함되어 있어 충돌 발생 가능성이 있다.
이를 해결하기 위해 추가적인 plugin을 설치해준다.

eslint-config-prettier는 prettier와 충돌 가능성이 있는 옵션을 모두 off해주는 역할을 한다.

eslint-plugin-prettier는 prettier에 위반된 부분을 eslint error로 걸리도록 하는 역할을 하는데, 에러메시지가 지나치게 많아지고 느려지는 문제때문에 사용하지 않는 것을 권장한다.

설치

npm i -D eslint-config-prettier

// .eslintrc.cjs
extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
	'plugin:prettier/recommeded'
  ],

husky

https://typicode.github.io/husky/
협업 과정에서 개발자들끼리 합의한 eslint나 prettier 등 지켜야 하는 규칙들이 존재하는데, 이런 코드 스타일은 개개인의 에디터에서 적용한다.

개인 사용자가 error나 warning을 무시한 채, 협업 프로젝트에 코드를 커밋하고 푸시하는 것에 제한이 필요하다.
이를 제한하지 않으면 규칙없이 작성된 코드가 머지되고 배포될 가능성이 생긴다.

git에는 hook 기능이 존재하는데, 특정 이벤트(add, commit, push 등)를 실행할 때, 그 이벤트에 hook을 설정하여 hook에 설정된 스크립트를 실행할 수 있다.

git hook을 관리할 수 있게 해주는 husky라는 패키지가 있다.
쉽게 말해서 git 명령어가 실행되면 미리 지정해놓은 스크립트가 실행되도록 관리해주는 도구이다.
여기서는 commit 전에 eslint와 prettier를 작동하게 하고자 한다.

설치

// 설치
npm install husky --save-dev

// git hook 활성화
npx husky init

npx husky init 명령어 실행하면 package.json 파일에 아래와 같은 스크립트가 생성된다.

"scripts": {
  "prepare": "husky install" 
}

// 새로운 hook 추가
npx husky add .husky/pre-commit "npm lint --fix"

이제 커밋을 하면 lint 스크립트 실행 후 커밋이 진행된다.

추가적으로 협업 개발자가 npm install할 때 husky도 install하게 해주는 스크립트도 추가해준다.
postinstall은 npm install 직후 자동으로 실행된다.

"scripts": {
  "prepare": "husky install",
  "postinstall": "husky install"
}

lint-staged

https://github.com/lint-staged/lint-staged
위 작업에서 끝내면 모든 파일을 대상으로 lint 스크립트가 실행된다.
프로젝트 파일 수가 많아질수록 실행 속도도 늘어날 것이다.
그래서 변경된 소스에서만 hook이 동작되도록 설정하는 것이 필요하다.
이를 해결하기 위해 lint-staged 패키지를 사용한다.

설치

npm install lint-staged --save-dev

설치 이후 package.json에 원하는 스크립트를 추가한다.
나는 아래의 스크립트를 추가했다.
커밋시에 lint와 prettier를 동시에 진행할 수 있다.

// package.json
"lint-staged": {
    "*.{ts, tsx}": [
      "eslint --fix"
    ],
    "*": [
      "prettier --write --ignore-unknown"
    ]
 },