[React] Vite 타입 스크립트 프로젝트에 ESLint / Prettier 설정하기

안녕하세요. J4J입니다.

 

이번 포스팅은 vite 프로젝트에 eslint / prettier 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

관련 글

 

[React] Vite 사용하기

 

 

반응형

 

 

설정 방법

 

[ 1. extension 설치 ]

 

대부분 vscode를 활용하여 개발을 하시고 계실 것이고 저 또한 vscode를 활용하여 개발을 하기 때문에 vscode 기준으로 설정을 해보도록 하겠습니다.

 

먼저 extension 설치를 진행해줘야 합니다.

 

다음과 같이 eslint와 prettier를 검색하여 모두 install을 해주시면 됩니다.

 

eslint extension

 

prettier extension

 

 

 

[ 2. 패키지 설치 ]

 

vite를 활용하여 프로젝트를 만드셨다면 일반적으로 다음과 같은 패키지들은 이미 설치가 되어 있을 겁니다.

 

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.45.0",
  }
}

 

 

 

혹시나 설치가 안되어 있으시다면 설치를 해주시면 되고 이 외에 prettier 관련 패키지가 없기 때문에 다음 명령어를 이용하여 추가 설치를 진행해 주시면 됩니다.

 

$ npm install -D prettier eslint-plugin-prettier

 

 

 

[ 3. eslint 설정 파일 수정 ]

 

만들어져 있는 프로젝트를 확인해보면 .eslintrc.cjs 라는 eslint 설정 파일이 존재할 것이고 해당 파일을 건들지 않았다면 다음과 같이 소스가 작성되어 있을 겁니다.

 

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 },
    ],
  },
}

 

 

 

 

해당 소스에 다음에 있는 추가적인 설정 값들만 더 넣어주시면 됩니다.

 

module.exports = {
  plugins: [
    '@typescript-eslint',
    'prettier'
  ],
  rules: {
    'prettier/prettier': [
      'error', {
          'endOfLine': 'auto'
      }
    ]
  },
}

 

 

 

[ 4. prettier 설정 파일 추가 ]

 

prettier 설정 파일이 존재하지 않으면 default 값으로 자동 적용이 되지만 커스텀하여 사용할 수 있도록 프로젝트 최상단에 .prettierrc 파일을 생성한 뒤 다음과 같이 원하는 설정 값들을 넣어주시면 됩니다.

 

prettier 설정 파일 위치

 

{
    "singleQuote": true, // 작은 따옴표 사용
    "semi": true, // 세미콜론 사용
    "tabWidth": 4, // 탭 너비 설정
    "trailingComma": "all", // 행 끝에 콤마 사용 설정
    "printWidth": 120, // 개행이 일어나는 한 행의 최대 너비
    "arrowParens": "always" // 화살표 함수 괄호 설정
}

 

 

 

[ 5. vscode setting 설정 ]

 

"ctrl + ," 키를 눌러보면 다음과 같이 Settings가 열리는 것을 확인할 수 있고 우측 상단에 보시면 JSON 파일로 설정할 수 있도록 변경해주는 아이콘이 있는 것을 볼 수 있습니다.

 

Settings JSON 설정 아이콘

 

 

 

해당 아이콘을 누른 뒤 다음과 같이 저장을 할 때 자동적으로 포매팅이 될 수 있도록 설정해 주시면 됩니다.

 

{
    // save를 할 때 typescript 파일에 포맷 적용
    "[typescript]": {
        "editor.formatOnSave": true
    },
    
    // save를 할 때 typescriptreact 파일에 포맷 적용
    "[typescriptreact]": {
        "editor.formatOnSave": true
    },
    
    // save를 할 때 ESLint 동작 설정
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
}

 

 

 

 

테스트

 

모든 설정이 완료되었다면 테스트를 해보겠습니다.

 

올바르게 적용이 되었다면 아무 파일이나 들어가서 다음과 같이 설정했던 포맷에 맞지 않는 코드를 작성할 때 빨간 줄로 표시가 되는 것을 볼 수 있습니다.

 

포매팅 적용 전

 

 

 

여기서 파일 저장을 해보면 다음과 같이 설정한 값에 맞게 자동적으로 포매팅이 되는 것을 확인할 수 있습니다.

 

포매팅 적용 후

 

 

 

 

ESLint, Prettier 로그 확인 방법

 

설정을 하시다보면 잘못 설정되어 올바르게 적용되지 않을 수 있습니다.

 

그럴 때 vscode에서 친절하게 로그를 남겨주는 상황이 생길 수 있습니다.

 

 

 

로그 확인은 아래 터미널쪽에 있는 OUTPUT 탭을 클릭하여 다음과 같이 ESLint 또는 Prettier을 선택하여 출력된 결과물을 볼 수 있습니다.

 

eslint output 로그

 

prettier output 로그

 

 

 

만약 설정에 문제가 발생된다면 위에처럼 로그가 몇 개 없는 것이 아니라 많은 양의 로그를 확인해 볼 수 있으니 설정이 올바르게 적용되지 않는다면 한번 확인해 보시는 것도 좋을 것 같습니다.

 

 

 

 

 

 

 

 

 

이상으로 vite 프로젝트에 eslint / prettier 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.