ESLint 설정

코드 컨벤션

**명명 규칙**
1. 컴포넌트 - Pascal Case
2. 그 외 파일 - Kebab Case (ex. hook-bookmark.ts)
3. const variant - Upper Case
4. 변수명, 타입 - Camel Case
5. 리액트 훅 - React객체를 사용
6. 함수는 화살표 함수 사용
7. 컴포넌트 타입은 React.FC<Props>

**import 순서**
1. 외부 라이브러리
2. 내부 라이브러리
3. 컴포넌트
4. asset 등 기타

**export**
1. 컴포넌트, 커스텀훅만 export default

**비동기**
1. async / await 사용

**컴포넌트 내부 선언 순서**
1. 리액트 훅
2. 라이브러리 훅
3. 커스텀 훅
4. 변수 및 상수
5. 함수
6. useEffect (상태값을 의존성으로 갖는 것 -> 초기 렌더링 순)
7. 파생되는 값

**타입 스크립트 컨벤션**
1. 타입 전역 선언 = 전역 상태값에 대한 타입, 서버 요청 response값에 대한 타입
2. 특정 값에 대한 타입은 type으로 객체에 대한 타입은 interface로
3. any, as 사용 x

**스타일(tailwind CSS) 컨벤션**
1. variant로 선언
```
const StMainSidebar = {
  mainSideBar: "flex flex-col items-center basis-1/3",
  logo: "w-[200px] h-[200px] my-[60px]",
  // ...
}
```
2. 반응형 작업을 위한 스타일 객체 리터럴 선언 (width, height, margin, padding, flex-direction, gap)
```
const width = {
  "w-full": "w-full sm:w-[300px]",
};
```

//...

컨벤션에 해당하는 eslint설정

{
  "extends": [
    "eslint:recommended", // ESLint의 기본 권장 규칙을 적용합니다.
    "plugin:@typescript-eslint/recommended", // TypeScript 코드 검사를 위한 기본 권장 규칙을 적용합니다.
    "plugin:react/recommended", // React 코드 검사를 위한 기본 권장 규칙을 적용합니다.
    "plugin:react-hooks/recommended", // React Hooks 사용을 위한 권장 규칙을 적용합니다.
    "plugin:prettier/recommended", // Prettier와 ESLint의 충돌을 방지하며, Prettier 규칙을 ESLint에 적용합니다.
    "plugin:@tanstack/eslint-plugin-query/recommended" // TanStack Query 라이브러리 사용을 위한 권장 규칙을 적용합니다.
  ],
  "parser": "@typescript-eslint/parser", // TypeScript 코드 분석을 위해 사용되는 파서입니다.
  "parserOptions": {
    "project": "./tsconfig.json" // TypeScript 프로젝트 설정 파일(tsconfig.json)의 위치를 지정합니다.
  },
  "plugins": ["react", "import"], // ESLint에 추가적인 검사 기능을 제공하는 플러그인들을 등록합니다.
  "rules": {
    "react/prop-types": "off", // React의 prop-types 검사를 비활성화합니다.
    "@typescript-eslint/naming-convention": [
      "error", // 명명 규칙 위반 시 오류를 발생시킵니다.
      {
        "selector": "variable", // 변수에 적용할 규칙입니다.
        "format": ["camelCase", "UPPER_CASE", "PascalCase"] // 변수 이름은 camelCase, UPPER_CASE 또는 PascalCase를 따라야 합니다.
      },
      {
        "selector": "variable", // 변수 선택자를 다시 정의하며, 특정 유형에 대한 규칙을 설정합니다. (화살표 함수나 일반적인 함수 표현식)
        "types": ["function"], // 함수 유형의 변수에 대한 설정입니다.
        "format": ["PascalCase", "camelCase"], // 함수 이름은 PascalCase 또는 camelCase를 사용해야 합니다.
        "leadingUnderscore": "forbid" // 이름 앞에 밑줄을 사용할 수 없습니다.
      },
      {
        "selector": "function", // 함수에 적용할 규칙입니다.
        "format": ["camelCase"] // 함수 이름은 camelCase를 따라야 합니다.
      },
      {
        "selector": "typeLike", // 클래스와 인터페이스 같은 타입 정의에 적용할 규칙입니다.
        "format": ["camelCase", "PascalCase"] // 타입 이름은 camelCase 또는 PascalCase를 따라야 합니다.
      }
    ],
    "new-cap": ["error", { "capIsNew": false, "newIsCap": true }], // 생성자 함수는 대문자로 시작해야 하며, new 키워드 사용 시 해당 규칙을 강제합니다.
    "import/order": [
      "error", // import 순서 규칙 위반 시 오류를 발생시킵니다.
      {
        "groups": [
          "builtin", // 노드 내장 모듈
          "external", // npm 패키지 등 외부 모듈
          "internal", // 프로젝트 내부의 별칭 경로로 설정된 모듈
          "parent", // 상위 디렉토리에 있는 모듈
          "sibling", // 같은 디렉토리에 있는 모듈
          "index" // 현재 디렉토리의 index.js 또는 index.ts
        ],
        "newlines-between": "always" // 그룹 사이에는 항상 새 줄을 추가합니다.
      }
    ],
    "import/no-anonymous-default

 

패키지 설치

npm i @typescript-eslint/parser
npm i @typescript-eslint/eslint-plugin
npm i -D eslint-plugin-react

npm i -D eslint-plugin-import
npm i -D eslint-plugin-prettier
npm i -D @tanstack/eslint-plugin-query
npm i -D lint-staged
npm i -D prettier
npm i -D eslint-config-prettier

 

순서주의

npm i -D eslint-config-next (먼저 설치할 경우 오류나는 경우 있음)

 

React import 설정 비활성화 시키고 싶을 때

// tsconfig.json

"moduleResolution": "node",
"jsx": "react-jsx",

이후 node_modules, yarn.lock 등 삭제 후 다시 yarn install

 

Resolve error: typescript with invalid interface loaded as resolvereslintimport/order 오류 발생 시

// .eslintrc.json

  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      },
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      }
    }
  }

import/resolver 부분 추가

jest 설치 후 tsconfig.json 오류 시
npm i -D @babel/core
npm i -D @babel/preset-env
npm i -D @babel/runtime

 

package.json에 추가
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint —ext .tsx —ext .ts src/ -—fix"
    ],
    "./src/**": [
      "prettier —write ."
    ]
  }

 

.gitignore에 .eslintcache 추가