[나만무/개발단계] frontend Repo ESLint, Prettier 세팅

오늘은 FrontEnd 협업을 위해 코드스타일을 통일하는 ESLint와 Prettier 를 설정해 보았다.

이게 왜 필요할까?

사람들은 다양한 방식으로 코드를 짠다.
같은 컴포넌트라도 마지막 닫는 태그를 같은 줄에 넣는 분도 있고
줄을 넘겨서 넣는 분도 있다.

    <canvas
        ref={canvasRef}
    />

	 <canvas
        ref={canvasRef} />

이게 별거 아닌 것 같지만 코드가 몇백줄이 되는데 저런 것들이 중구난방으로
정리가 안되어있다면 읽기가 상당히 불편하다.
또한 Indent(들여쓰기), 함수의 brackets 라면 어떨까?

이런 것들을 VSC 등 IDE 환경에서 통일된 형태로 저장하여
협업시 더 쉽게 코드를 파악할 수 있도록 하기 위해 사용하였다.

ESLint와 Prettier는 무슨 차이에요?

ESLint는 파싱 형태부터 시작해서 플러그인, 세팅 등 에러가 발생할 가능성이 높은 패턴을 방지하는 개념.
즉 논리적, 문법적인 품질을 체크하는 역할을 수행한다.

반면 Prettier는 코드의 시각적 스타일을 설정해서 정해진 규칙에따라 코드를 전면 재작성하는 역할을 수행한다.

보통 ESLint의 코드 스타일링 기능을 끄고 Prettier에 전부 위임하는 식으로 진행된다.
이를 수행하는 플러그인이 바로 eslint-config-prettier

React + TypeScript + Vite에서의 ESLint 설정

원래 .eslintrc 파일로 설정하는 줄 알았는데
최신 버전의 eslint는 flat Config라고 하는 eslint.config.js 를 활용하는 방법으로 대체되었다고 한다.

eslint.config.js

vite를 활용하여 프로젝트르 시작하게 되면 자동으로 생기는 파일.
React 플젝에서 사용할 설정을 일부 정의하고 있으나 추가적으로 필요한 것들이 있다.

import js from '@eslint/js' // 기본 JS 규칙
import reactHooks from 'eslint-plugin-react-hooks' // React Hooks 규칙
import reactRefresh from 'eslint-plugin-react-refresh' // Hot Reload 지원
import globals from 'globals' // window, document 등 전역 변수 설정
import tseslint from 'typescript-eslint' // TS 지원
import prettier from 'eslint-plugin-prettier' // Prettier 통합
import react from 'eslint-plugin-react' // React 규칙
import jsxA11y from 'eslint-plugin-jsx-a11y' // 접근성 규칙
import importPlugin from 'eslint-plugin-import' // import/export 규칙
import tailwindcss from 'eslint-plugin-tailwindcss' // tailwind CSS 규칙

export default tseslint.config(
  { ignores: ['dist'] }, // 빌드 결과물 폴더 무시
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tseslint.parser,
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        ...globals.browser,
        React: 'readonly',
      },
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true
        }
      }
    },
    settings: {
      react: {
        version: '19.1', 
        runtime: 'automatic'
      },
      'import/resolver': {
        node: {
          extensions: ['.js', '.jsx', '.ts', '.tsx', '.css']
        }
      }
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      'prettier': prettier,
      'react': react,
      'jsx-a11y': jsxA11y,
      'import': importPlugin,
      'tailwindcss': tailwindcss
    },
    rules: {
      ...js.configs.recommended.rules, // 추천 규칙 적용
      ...reactHooks.configs.recommended.rules, // 추천 규칙 적용
      'react/react-in-jsx-scope': 'off',
      'prettier/prettier': 'error', // 규칙 위반시 에러 표시
      'arrow-body-style': 'off', // 화살표 함수 스타일 제한 해제
      'prefer-arrow-callback': 'off',
      'react/jsx-no-target-blank': 'off', // target = "_blank" 시 보안경고 해제
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true }
      ],
      'no-unused-vars': 'off', // TS 사용, 기본 미사용 변수 규칙 끄기
      // 미사용 변수 규칙 설정
      '@typescript-eslint/no-unused-vars': ['warn', {
        'varsIgnorePattern': '^_',
        'argsIgnorePattern': '^_',
        'ignoreRestSiblings': true
      }],
      // 일치연산자 강제(!==, ===)
      'eqeqeq': ['error', 'always'],
      // tailwindcss 관련 규칙, 클래스명 순서와 커스텀 클래스명 허용
      'tailwindcss/classnames-order': 'warn',
      'tailwindcss/no-custom-classname': 'off'
    }
  }
)

Prettier

Vite로 프로젝트를 시작하면 Prettier는 우리가 npm 매니저를 활용하여 깔아야한다.

사용전 Extension 설치부터

이게 VSCode에서 코드를 동일한 스타일로 작성하기 위함이기에
Extension 설치는 필수.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
npm install -D prettier
npm install -D prettier prettier-plugin-tailwindcss

공식 문서에 더많은 옵션들이 있으나 지금 당장 필요한 설정들만 진행하였습니다.
(주석은 빼고 진행해야 합니다!)

{
  ------------------------
  기본 포맷팅 설정
  ------------------------
  // 한 줄의 최대 길이를 설정 (기본값: 80)
  // 이 길이를 초과하면 자동으로 줄바꿈이 발생
  "printWidth": 80,
  
  // 들여쓰기 시 사용할 공백 문자 수 (기본값: 2)
  // useTabs가 false일 때만 적용됨
  "tabWidth": 2,
  
  // 들여쓰기에 탭 문자 사용 여부 (기본값: false)
  // true: 탭 문자 사용, false: 공백 문자 사용
  "useTabs": false,
  
  // 문장 끝 세미콜론 사용 여부 (기본값: true)
  // true: 모든 문장 끝에 세미콜론 추가
  // false: 필요한 경우에만 세미콜론 추가
  "semi": true,
  
  ------------------------
  따옴표 관련 설정
  ------------------------
  // 문자열에 작은따옴표 사용 여부 (기본값: false)
  // true: 'string', false: "string"
  "singleQuote": true,
  
  // 객체 속성에 따옴표 추가 방식 (기본값: "as-needed")
  "quoteProps": "as-needed",
  // - "as-needed": 필요한 경우에만 따옴표 추가
  // - "consistent": 하나라도 따옴표가 필요하면 모든 속성에 따옴표 추가
  // - "preserve": 입력된 따옴표 스타일 유지
  
  // JSX에서 작은따옴표 사용 여부 (기본값: false)
  // singleQuote 설정과 독립적으로 동작
  "jsxSingleQuote": true,
  
  ------------------------
  쉼표 및 괄호 설정
  ------------------------
  // 객체, 배열 등의 후행 쉼표 설정 (기본값: "es5")
  "trailingComma": "es5",
  // - "all": 모든 구문에서 후행 쉼표 사용 (함수 인자 포함)
  // - "es5": ES5에서 유효한 위치에만 후행 쉼표 추가
  // - "none": 후행 쉼표 사용 안 함
  
  // 객체 리터럴의 중괄호 주위 공백 추가 (기본값: true)
  // true: { foo: bar }, false: {foo: bar}
  "bracketSpacing": true,
  
  // JSX 요소의 > 위치 설정 (기본값: false)
  // true: 마지막 줄에 > 위치, false: 다음 줄에 > 위치
  "bracketSameLine": false,
  
  // 화살표 함수 매개변수 괄호 사용 방식 (기본값: "always")
  "arrowParens": "always",
  // - "always": (x) => x
  // - "avoid": x => x (매개변수가 하나일 때)
  
  ------------------------
  특수 포맷팅 설정
  ------------------------
  // 줄 끝 문자 설정 (기본값: "lf")
  "endOfLine": "lf",
  // - "lf": \n (Unix)
  // - "crlf": \r\n (Windows)
  // - "cr": \r (Mac OS)
  // - "auto": 첫 줄 끝 문자 유지
  
  // 마크다운 텍스트의 줄바꿈 방식 (기본값: "preserve")
  "proseWrap": "always",
  // - "always": 항상 printWidth에 따라 줄바꿈
  // - "never": 줄바꿈 하지 않음
  // - "preserve": 원본 텍스트 줄바꿈 유지
  
  // HTML 공백 처리 방식 (기본값: "css")
  "htmlWhitespaceSensitivity": "strict",
  // - "css": CSS display 속성 기준으로 처리
  // - "strict": 모든 공백을 유지
  // - "ignore": 모든 공백을 무시
  
  ------------------------
  플러그인 설정
  ------------------------
  // Tailwind CSS 클래스 자동 정렬을 위한 플러그인
  "plugins": ["prettier-plugin-tailwindcss"]
}

• 복붙용

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "proseWrap": "always",
  "htmlWhitespaceSensitivity": "strict",
  "plugins": ["prettier-plugin-tailwindcss"]
}