React / Eslint(airbnb ...?) prettier 적용하기

+ 250416 수정 내용▼

- eslint-plugin-import, eslint-plugin-jsx-a11y 부분 import, plugin, rules에 빼먹은거 수정

- 그 외 에어비엔비 규칙 일부 추가

---

원래 제목에는 airbnb 형식이라고 썼었는데

사실 airbnb 패키지는 내가 이 포스트에서 작성한 Flat Config 형식에서는 아직 지원하지 않고 있다...

 

수정 전에도 eslint-config-airbnb는 flat config에서 아직은 사용할 수 없기 때문에 rules에서 수동으로 불러와줘야 한다고 중간에 작성해두긴 했으나 아예 끌올해둔다...

 

왜냐하면 기존 .eslintrc 파일 형식에서는 "extends":["airbnb"] 를 추가해주는 식으로 사용이 가능하지만

Flat Config 형식에서는 룰을 직접 풀어서 써야하기 때문에 직접 다 가져오는게 아니고서야 이전처럼 패키지 설치, 한줄추가로 사용할 수가 없다고 한다.

 

* react + javascript 프로젝트 기준입니다.

 

 

 

1. 프로젝트 생성

npm create vite@latest my-app -- --template react
// 완료되면 프로젝트 폴더로 이동
cd my-app
// 설치
npm install

 

• my-app : 생성할 프로젝트 이름
• -- --template react : 자바스크립트 기반 React 템플릿으로 지정
  
  • --template react : React + JavaScript
  • --template react-ts : React + TypeScript
  • --template vanilla : 일반 JS
  • --template vanilla-ts : 일반 TS

* -- --로 써야하는 이유

• 첫번째 -- : 구분 역할(my-app까지만 create vite로 넘기고 그 뒤 내용은 실제 Vite CLI에 전달하도록 구분, 경계 표시자
• 두번째 -- : 실제 Vite CLI에 전달될 옵션

 

 

2. 필요 패키지 설치

npm install -D eslint@8.57.1 prettier @eslint/js eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks@4.6.0 eslint-config-prettier eslint-plugin-prettier

 

이때 npm install -D에서 -D는 --save-dev의 줄임말로, 개발 의존성으로 패키지를 설치하겠다는 뜻이다. (프로젝트를 실행할 때는 필요 없기 때문)

- eslint-plugin-react-hooks : use로 시작하는 함수를 훅으로 간주하고 (커스텀 훅도 포함) 검사

- eslint-plugin-jsx-a11y : JSX 내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백을 제공

- eslint-plugin-import :주로 모듈이나 import문 관련 규칙을 검사하는 eslint 플러그인

 

 

 

3. ESLint 설정 파일 수정

 

eslint v9부터 기존에 사용하던 .eslintrc.json|js|yaml 의 설정파일은 이제 더이상 사용되지 않으며, Flat config를 쓴다고 했다.

물론 내 프로젝트는 v8.57.1을 사용해서 .eslintrc.json 등을 써도 되긴하지만 어차피 이제 안사용된다는데 굳이...?

아무튼 2번까지 진행됐다면 eslint.config.js가 자동 생성돼있을 것이다.

 

eslint.config.js

import js from '@eslint/js';
import importPlugin from 'eslint-plugin-import';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import prettier from 'eslint-plugin-prettier';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';

export default [
  {
    ignores: ['dist', 'node_modules'],
  },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: globals.browser,
    },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier,
      'jsx-a11y': jsxA11y,
      import: importPlugin,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      ...jsxA11y.configs.recommended.rules,
      ...importPlugin.configs.recommended.rules,

      'prettier/prettier': [
        'error',
        {
          endOfLine: 'auto',
          singleQuote: true,
          trailingComma: 'all',
          tabWidth: 2,
          useTabs: false,
        },
      ],

      'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
      'react/react-in-jsx-scope': 'off',
      'no-unused-vars': ['warn', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'no-var': 'warn', // ← var 사용하면 경고
      'prefer-const': 'warn', // ← const 쓸 수 있을 때 let 쓰면 경고
      'import/order': [
        'warn',
        {
          // ← import 순서 관리
          groups: ['builtin', 'external', 'internal'],
          pathGroups: [
            {
              pattern: 'react',
              group: 'external',
              position: 'before',
            },
          ],
          pathGroupsExcludedImportTypes: ['react'],
          'newlines-between': 'always',
          alphabetize: {
            order: 'asc',
            caseInsensitive: true,
          },
        },
      ],
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
];

 

 

eslint.config.js 상세 설명

챗지피티의 힘을 빌렸습니다. 늘 감사합니다... 

 

import 부분

import js from '@eslint/js';
import globals from 'globals';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import prettier from 'eslint-plugin-prettier';

• @eslint/js: ESLint 공식 기본 규칙 모음. (ex. no-unused-vars, no-console 등)
• globals: 브라우저 환경에서의 전역 변수들을 정의 (window, document, console, 등).
• eslint-plugin-react: 리액트 관련 규칙을 제공하는 플러그인.
• eslint-plugin-react-hooks: useEffect, useState 등 리액트 훅 규칙을 검사.
• eslint-plugin-react-refresh: Vite의 Fast Refresh 관련 규칙.
• eslint-plugin-prettier: Prettier와 ESLint 통합용. Prettier 포맷팅 오류를 ESLint 에러로 보여줌

 

파일 무시 설정

  { // ESLint가 분석하지 않을 디렉토리 목록
    ignores: ['dist', 'node_modules'],
  },

 

실제 Lint 설정

  { // .js, .jsx 확장자의 모든 파일에 아래 설정 적용
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 'latest', // 가장 최신 ECMAScript 문법 사용
      sourceType: 'module', // ES 모듈 사용 가능 (import, export)
      parserOptions: {
        ecmaFeatures: {
          jsx: true, // jsx 문법 사용 가능
        },
      },
      globals: globals.browser,// window, document 등 브라우저 전역객체 허용
    },
    plugins: { 
    // 각 플러그인을 설정에서 사용할 수 있도록 불러옴
    // 이 이름들을 아래 rules에서 키로 사용(reactHooks, reactRefresh...)
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier,
      'jsx-a11y': jsxA11y,
      import: importPlugin,
    },
    rules: {
      // 기본 ESLint + React + React Hooks 추천 규칙
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      ...jsxA11y.configs.recommended.rules,
      ...importPlugin.configs.recommended.rules,
	  
      // .jsx 확장자가 아닌 파일에서 JSX 사용하는 걸 경고만 하도록 함
      'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
      // React 17+에서는 JSX 쓸 때 import React from 'react' 안 해도 되므로 끔
      'react/react-in-jsx-scope': 'off',
      // 안 쓰는 변수를 경고로 표시하되, 대문자나 _로 시작하는 변수는 무시 (보통 상수들)
      'no-unused-vars': ['warn', { varsIgnorePattern: '^[A-Z_]' }],
      // Vite에서 React Fast Refresh가 제대로 작동하게 하기 위한 규칙
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'no-var': 'warn', // ← var 사용하면 경고
      'prefer-const': 'warn', // ← const 쓸 수 있을 때 let 쓰면 경고
      'import/order': [
        'warn',
        {
          // ← import 순서 관리
          groups: ['builtin', 'external', 'internal'],
          pathGroups: [
            {
              pattern: 'react',
              group: 'external',
              position: 'before',
            },
          ],
          pathGroupsExcludedImportTypes: ['react'],
          'newlines-between': 'always',
          alphabetize: {
            order: 'asc',
            caseInsensitive: true,
          },
        },
      ],
    },
    settings: {
      react: {
      // 사용 중인 React 버전을 자동으로 감지해서 맞춤 규칙을 적용
        version: 'detect',
      },
    },

 

 

 

4. prettier 설정 파일

.prettierrc 

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto"
}

 

 

5. vscode에 적용

./vscode/settings.json 파일에 다음 내용을 추가한다.

특히 마지막에서 두번째 항목인 "eslint.experimental.useFlatConfig": true을 추가해야 flat config가 적용이 된다. ...

 

 

{
    "editor.formatOnSave": true,
    "editor.tabSize": 2, // 탭 크기를 2로 설정
    "editor.insertSpaces": true, // 탭 대신 공백 사용
    "editor.detectIndentation": false, // 파일 내용에 따라 자동으로 들여쓰기 감지 비활성화
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ],
    "eslint.experimental.useFlatConfig": true,
    "prettier.requireConfig": true
  }

 

 

 

 

참고
https://medium.com/@Dodo3/eslint-airbnb-%EC%84%A4%EC%A0%95-84b22d0cd31a
https://yangtinomad.com/entry/ReactTS-airbnb-eslint-prettier%EC%A0%81%EC%9A%A9