[React] Vite 프로젝트 세팅하기 - ESLint와 Prettier

Vite로 React 프로젝트 시작하기

npm create vite@latest

예전에는 React 프로젝트를 시작할 때, 일반적으로 CRA(create-react-app)로 개발환경을 구성했지만 요즘에는 Vite를 많이 사용한다. 시간이 흘러 이제 CRA는 더 이상 권장하지 않는 방법이 되었고, 심지어 CRA로 만든 프로젝트를 Vite로 마이그레이션 하는 추세인 것 같았다.

 

Vite는 CRA에 비해 상대적으로 작은 크기와 빠른 빌드 속도를 가지고 있기 때문에 빠르게 변화하는 개발 생태계에서 Vite가 대세로 자리 잡게 되었다. 어쨌든, Vite를 이용해서 빠르게 개발 환경을 세팅해 주고 이 글의 메인 주제인 ESLint와 Prettier를 세팅해 주겠다. (이 글의 카테고리가 React인 이유는 단순히 내가 리액트 프로젝트를 하기 때문이고, ESLint와 Prettier는 사실 리액트와 관련은 없다.)

 

ESLint와 Prettier 사용하기

ESLint는 코드의 품질을 검사해 주는 도구라면, Prettier는 설정한 규칙에 맞게 코드를 포맷팅 해주는 도구라고 생각하면 된다. 이 두 개는 협업을 할 때 코드 컨벤션을 서로 맞추기 위해 필요한 도구이며, 프로젝트의 유지 보수성을 높이고 버그를 줄이는 데 도움을 준다. 

 

ESLint는 '너 이거 오류야!'라고 설명해 주는 두뇌파라면, Prettier는 '틀린 거 내가 고쳐줄게!'라며 고쳐주는 행동파라고 생각하면 된다. 보통 ESLint와 Prettier를 따로따로 사용하는 경우는 없고, 두 개를 함께 사용하는 편이다.

npm install --save-dev --save-exact prettier

Vite의 경우 install 될 때 ESLint도 같이 포함돼서 설치되기 때문에 따로 설치할 필요는 없다. 대신, Prettier의 경우 포함되지 않기 때문에 위의 명령어를 통해 따로 설치해줘야 한다.

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'], // 'prettier' 추가
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

Vite로 초기 세팅을 한 뒤, .eslintrc.cjs를 들어가 보면 위 상태처럼 되어 있을 것이다. (Vite 5.1.6 버전 기준)

여기서 설치한 Prettier를 ESLint와 연동시키기 위해서는 plugins에 'prettier'라고 추가해줘야 한다. 

(아까 말했듯이 ESLint와 Prettier는 주로 함께 쓰이기 때문에 이렇게 ESLint에 Prettier를 플러그인으로 추가해 주는 작업이 필요하다.)

 

Prettier를 연동시킴과 동시에 포맷팅 규칙 설정을 위해 .prettierrc 파일을 만들어줘야 한다. Prettier로 설정해야 하는 규칙들에는 어떤 것들이 있는지에 대해서는 검색만 해도 쉽게 찾을 수 있으니 굳이 이 글에 포함하지는 않겠다.

npm install eslint-config-prettier

ESLint와 Prettier를 같이 사용할 때 필수적으로 설치해야 하는 라이브러리가 하나 있는데, 바로 eslint-config-prettier이다.

앞에서 설명했듯이 ESLint는 코드의 오류를 표시해 주는 린트 도구이고, Prettier는 코드를 설정한 규칙대로 포맷팅 해주는 포맷터이다. 서로가 각자의 역할을 충실히 하면 좋지만, 아무래도 두 개의 역할이 서로 비슷해서 가끔 서로의 역할을 침범하는 '충돌'이 발생할 수 있다.

 

eslint-config-prettier 라이브러리는 ESLint에서 Prettier와 충돌할 수 있는 규칙을 모두 무시함으로써 포맷팅 할 때 Prettier의 규칙이 더 우선시 될 수 있도록 하는 역할을 한다. 즉, 포맷팅 할 때 Prettier의 규칙이 1순위가 됨으로써 ESLint는 그저 오류를 검사하는 도구로만 자신의 역할을 수행하게 되고, 포맷팅은 오로지 Prettier의 규칙만 따르도록 하게 해 준다.

 

가끔 eslint-plugin-prettier라는 라이브러리를 사용하는 경우도 있을 텐데, 이것은 포맷팅 할 때 Prettier의 규칙뿐만 아니라  ESLint의 규칙으로도 동작하게 하는 라이브러리라서 Prettier가 ESLint처럼 오류를 출력해 주는 역할도 수행하게 한다.

이렇게 되면 오류 메시지가 너무 많이 떠서 정신이 없을뿐더러 속도도 느려지게 되고, 우리가 우려했던 서로의 영역을 침범하게 되는 것이기 때문에 대부분의 경우 이 라이브러리의 사용을 장려하지 않는다고 한다.

 rules: {
    '@typescript-eslint/no-unused-vars': 'off',
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'prettier/prettier': 'error', // prettier의 포맷팅 에러를 lint 에러 리포팅으로 볼 수 있도록 하는 규칙
    // 'semi': ['error', 'never'], 이렇게 규칙을 정할 수 있다.
  },

위 코드처럼 ESLint의 규칙을 rules 부분에서 정할 수 있다. 하지만, 나는 개인적으로 ESLint 규칙 따로, Prettier 포맷팅 규칙 따로 설정하는 건 귀찮을뿐더러 코드의 기준이 2개로 나뉠 수도 있기 때문에 가급적이면 Prettier의 규칙을 기준으로 해서 ESLint도 작동하게 하는 게 좋다고 생각한다. 

 

prettier/prettier: 'error' 속성을 넣어주면 ESLint의 오류 출력 기준이 Prettier의 포맷팅 규칙을 기준으로 하기 때문에 오류가 생기더라도 Prettier의 포맷팅으로 쉽게 수정할 수 있고, ESLint와 Prettier를 함께 사용하는 이유를 느낄 수 있어서 ESLint의 rules에는 이 속성을 넣어주는 편이 좋다고 생각한다. (이 속성은 정확히 말하자면, ESLint가 Prettier의 기준을 따른다기보다는 Prettier의 포맷팅 규칙대로 ESLint가 오류를 출력해 준다는 속성이다.)

😟 .prettierrc를 만들었는데 동작을 안 해요!
1) vscode에 'Prettier - Code formatter'가 깔렸는지 확인하기 (Prettier ESlint, ESlint도 깔아주기)
2) 설정에서 Default Formatter에 포맷터를 Prettier - Code formatter로 설정해주기
3) 설정에서 Format On Save에 체크박스를 체크해주기

1. npm create vite@latest // Vite 프로젝트 시작
2. npm install --save-dev --save-exact prettier // Prettier 라이브러리 설치
3. .prettierrc 파일 만들기 // Prettier 포맷팅 규칙을 설정하는 파일
4. npm install eslint-config-prettier // ESLint는 오류 검사만, Prettier는 포맷팅 역할만 수행하도록 하기
5. 'prettier/prettier': 'error'로 ESLint의 규칙은 Prettier의 포맷팅 규칙 따르기