chore: eslint-config-react 설정에 대한 설명주석 표시

.changeset/flat-phones-sit.md

@@ -0,0 +1,5 @@
+---
+"@musma/eslint-config-react": patch
+---
+
+chore: eslint 설정에 대한 설명주석

packages/eslint-config-react/index.js

@@ -1,83 +1,90 @@
 // eslint-disable-next-line no-undef
 module.exports = {
-  parser: '@typescript-eslint/parser',
+  parser: '@typescript-eslint/parser', // 타입스크립트에서 ESLint를 사용할 수 있게 하는 파서
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'plugin:prettier/recommended',
+    'eslint:recommended', // https://eslint.org/docs/latest/rules/ 에서 ✅ 표시된 모든 규칙 활성화
+    'plugin:@typescript-eslint/recommended', // https://typescript-eslint.io/rules 에서 ✅ 표시된 모든 규칙 활성화
+    'plugin:react/recommended', // https://github.com/jsx-eslint/eslint-plugin-react 에서 ✅ 표시된 모든 규칙 활성화
+    'plugin:react-hooks/recommended', // React Hook이랑 관련된 추천 규칙 (react-hooks/rules-of-hooks, react-hooks/exhaustive-deps)
+    'plugin:import/recommended', // https://www.npmjs.com/package/eslint-plugin-import 에서 ✅ 표시된 모든 규칙 활성화
+    'plugin:import/typescript', // tsconfig.json의 path 설정과 연계하여 상대 경로 가져오기를 절대 경로 가져오기로 변경 ~> https://github.com/hdoan741/eslint-plugin-absolute-imports/
+    'plugin:prettier/recommended', // "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off"  ~> https://github.com/prettier/eslint-plugin-prettier
   ],
-  plugins: ['unused-imports'],
+  plugins: ['unused-imports'], // 사용하지 않는 import 모듈을 찾아 제거해주는 plugin ~> https://www.npmjs.com/package/eslint-plugin-unused-imports
   settings: {
     'import/resolver': {
+      // eslint-plugin-import의 경로 설정 옵션
       node: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx'], // 배열 안에 작성된 확장자를 생략
       },
       typescript: {},
     },
     react: {
-      version: 'detect',
+      version: 'detect', // React의 버전을 감지 (ESLint 플러그인이 사용 중인 React 버전에 따라 적절한 규칙 적용)
     },
   },
   rules: {
-    'react/react-in-jsx-scope': 'off', // import React from 'react' 제외
-    'import/default': 'off',
+    'react/react-in-jsx-scope': 'off', // ~> import React from 'react' 제외
+    'import/default': 'off', // 모듈에서 기본으로 내보내는 객체 또는 값을 검사하는 옵션 ~> 'off'
     'import/order': [
       // Import Sort
       'error',
       {
         groups: [
-          'builtin',
-          'external',
-          'internal',
-          ['parent', 'sibling', 'index'],
-          'type',
-          'unknown',
-          'object',
+          'builtin', // Node.js의 내장 모듈을 가져오는 import 문 ~> import fs from 'fs'
+          'external', // 프로젝트의 외부 종속성을 가져오는 import 문 ~> import React from 'react'
+          'internal', // 프로젝트 내부에서 정의한 모듈을 가져오는 import 문 ~> import combineTel from 'src/utils'
+          ['parent', 'sibling', 'index'], // 차례대로 ~> import 문에서 부모 디렉토리로부터 가져온 모듈, import 문에서 현재 파일과 동일한 디렉토리에 있는 모듈, 현재 파일과 동일한 디렉토리에 있는 'index.ts'와 같은 인덱스 파일을 모두 포함하는 그룹
+          'type', // import 문에서 타입 정의 파일을 포함하는 그룹
+          'unknown', // import 문에서 그룹에 명시되지 않은 모듈을 포함하는 그룹
+          'object', // import 문에서 JavaScript 객체 또는 모듈을 가져오는 그룹
         ],
         pathGroups: [
+          // 추가적으로 옵션을 설정하고 싶은 경로를 다시 그룹화
           {
-            pattern: '{react*, react*/**}',
-            group: 'external',
-            position: 'before',
+            pattern: '{react*, react*/**}', // 경로의 minimatch pattern ~> https://github.com/motemen/minimatch-cheat-sheet
+            group: 'external', // 프로젝트의 외부 종속성을 가져오는 import 문 ~> import React from 'react'
+            position: 'before', // 적용될 그룹에 배치될 위치 ~> before
           },
           {
             pattern: 'src/**',
-            group: 'internal',
+            group: 'internal', // 프로젝트 내부에서 정의한 모듈을 가져오는 import 문 ~> import combineTel from 'src/utils'
           },
         ],
-        pathGroupsExcludedImportTypes: ['react'],
-        'newlines-between': 'always',
+        pathGroupsExcludedImportTypes: ['react'], // 프로젝트의 외부 종속성을 가져오는 import 문에서 'react' 패키지 제거
+        'newlines-between': 'always', // 위의 그룹 간에 최소 한 줄 이상의 줄바꿈 강제 및 그룹 안에서 줄바꿈 금지
         alphabetize: {
-          order: 'asc',
-          caseInsensitive: true,
+          order: 'asc', // 알파뱃 순서를 오름차순
+          caseInsensitive: true, // 알파뱃에서 대소문자 무시
         },
       },
     ],
-    'react/prop-types': 'off',
-    'import/no-unresolved': 'off',
-    'import/no-named-as-default-member': 'off',
-    'import/no-named-as-default': 'off',
-    'eol-last': 'error',
-    'no-unused-vars': 'off', // or "@typescript-eslint/no-unused-vars": "off",
-    'unused-imports/no-unused-imports': 'error',
+    'react/prop-types': 'off', // React 컴포넌트의 prop-types를 정의하지 않았을 때 경고 발생 ~> 'off'
+    'import/no-unresolved': 'off', // 해석할 수 없는 모듈 경로를 감지하여 경고 발생 ~> 'off'
+    'import/no-named-as-default-member': 'off', // 한 파일 내에서 export default A와 export B로 내보냈을 때, import A, { B } 에 대해 경고 발생 ~> 'off'
+    'import/no-named-as-default': 'off', // 한 파일 내에서 export default A와 export B로 내보냈을 때, import A 에 대해 경고 발생 ~> 'off'
+    'eol-last': 'error', // 코드의 마지막 줄에 개행 문자가 있지 않으면 'error'
+    'no-unused-vars': 'off', // 사용되지 않는 변수를 사용하거나 가져오는 경우 경고 발생 ~> 'off'
+    'unused-imports/no-unused-imports': 'error', // 사용되지 않는 'import'문을 감지 'error'
     'unused-imports/no-unused-vars': [
       'warn',
       { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
+      // vars: 'all': 모든 변수에 대해 검사 수행
+      // varsIgnorePattern: 변수 이름이 _로 시작하는 것에 대해 검사에서 제외 ~> _timer
+      // args: 'after-used': 사용 후에만 인수를 검사하도록 지정
+      // argsIgnorePattern: '^_': 인수 이름이 밑줄로 시작하는 경우 검사에서 제외 ~> _onChange
     ],
     'react-hooks/exhaustive-deps': 'off', // useEffect, useCallback, useMemo 2번째 인자 안넣어도 경고 뜨지 않음
-    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+    'react/no-unknown-property': ['error', { ignore: ['css'] }], // 알 수 없는 속성이 React 컴포넌트에 사용되었을 때 경고를 발생, 'css' 속성을 무시하도록 지정합니다. (emotion)
     'prettier/prettier': [
+      // eslint-config-prettier와 eslint-plugin-prettier를 통해 Prettier와 통합하는 규칙
       'error',
       {
-        printWidth: 100,
-        semi: false,
-        singleQuote: true,
-        tabWidth: 2,
-        trailingComma: 'all',
+        printWidth: 100, // 한 줄에 출력할 수 있는 최대 문자 수를 100개로 설정
+        semi: false, // 세미콜론을 사용하지 않도록 설정
+        singleQuote: true, // 문자열을 작은따옴표로 표시
+        tabWidth: 2, // 탭 문자의 너비를 2로 설정
+        trailingComma: 'all', // 여러 줄로 구성된 배열 또는 객체 리터럴의 마지막 요소 뒤에 항상 쉼표를 사용하도록 설정
       },
     ],
   },