ESLint & Prettier & tsconfig.json rule

Eslint

// .eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@tanstack/eslint-plugin-query/recommended",
    "plugin:prettier/recommended",
  ],

  // ESLint가 무시할 파일 또는 디렉토리 패턴을 정의
  ignorePatterns: ["dist", ".eslintrc.cjs"],

	// ypeScript 코드를 분석하기 위해 사용하는 파서
  parser: "@typescript-eslint/parser",

	// ESLint에 추가적인 기능을 제공하는 플러그인(refresh deprecated인듯?)
  plugins: ["react-refresh", "@tanstack/query"],

	// 
  rules: {
		// (얘도 빼도 될 것 같음)
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
    "@tanstack/query/exhaustive-deps": "error",
    "@tanstack/query/no-rest-destructuring": "warn",
    "@tanstack/query/stable-query-client": "error",
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
  },
}

Prettier

// prettierrc

{
	//import 순서 정렬 - 정렬 규칙은 생략
	"plugins": ["@trivago/prettier-plugin-sort-imports"]

	// OS에 따른 코드라인 끝 처리 방식 사용
  "endOfLine": "lf",

  // 줄 바꿈할 길이
  "printWidth": 80,
  
  // 들여쓰기 공백 수
  "tabWidth": 2,

	// 모든 구문 끝에 세미콜론 출력
  "semi": false,

  // 쌍따옴표 대신 홑따옴표 사용
  "singleQuote": true,

  // 탭 대신 공백으로 들여쓰기
  "useTabs": false,

	// JSX 구문에서, 컴포넌트의 props 가 한 줄에 하나의 항목만 표시
  "singleAttributePerLine": true,

	// 쌍따옴표 대신 홑따옴표 사용
  "jsxSingleQuote": true,

  // 가능하면 후행 쉼표 사용
  "trailingComma": "all",

	// 객체 괄호에 공백 삽입
  "bracketSameLine": true,

  // JSX 태그를 사용하는경우에 > 기호를 한줄에 사용할지 한줄 내려서 사용할지를 결정
  "jsxBracketSameLine": false,

  // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
  "arrowParens": "always"
}

타입스크립트 세부설정

// tsconfig.json

{
  "compilerOptions": {

		// ECMAScript 목표 버전 설정
    "target": "ES2020",

		//클래스 필드를 ECMAScript-표준 시맨틱으로 내보냅니다.
    "useDefineForClassFields": true,

		// 컴파일 과정에 사용될 라이브러리 파일 설정
    "lib": ["ES2020", "DOM", "DOM.Iterable"],

		// 선언 파일들의 타입 체크를 생략
    "skipLibCheck": true,

    /* Bundler mode */
    "module": "ESNext",
    "moduleResolution": "bundler",
		
		// TypeScript에서 .ts, .mts, .tsx와 같은 명시적인 확장자가 붙은 파일을 import 할 수 있게 한다
    "allowImportingTsExtensions": true,

		// 확장자가 .json인 모듈의 import를 허용하는 설정
    "resolveJsonModule": true,

		// 각 파일을 별도 모듈로 변환
    "isolatedModules": true,

		// 타입스크립트를 컴파일하면, JavaScript 변환 파일을 만들어 내지 않도록 하는 설정
    "noEmit": true,

		// tsx 파일을 jsx로 어떻게 컴파일할 것인지
    "jsx": "react-jsx",

    /* Linting */

		// 타입스크립트의 각종 타입 체킹 동작을 전부 활성화
    "strict": true,
		// 쓰지않는 지역변수 있으면 에러내기
    "noUnusedLocals": true,

		// 쓰지않는 파라미터 있으면 에러내기
    "noUnusedParameters": true,

		// switch문 이상하면 에러내기.
		//  예를들어 switch 문에서 비어 있지 않은 Case라면 반드시 break 문이나 return 문으로
		//  해당 Case를 종료시키도록 에러를 내준다
    "noFallthroughCasesInSwitch": true,

		// 파일의 이름을 대소문자 판별하게 하는 옵션
		//  프로그래밍 세계에선 같은 알파벳이라도 대소문자를 모두 구분하기 때문에 이 옵션은 가능한 true 권장
    "forceConsistentCasingInFileNames": false,

		// import 구문의 모듈 해석 시에 기준이 되는 경로를 지정(상대경로가 복잡하니까 절대경로 설정)

		// 기본 경로
    "baseUrl": "src",

		// 'baseUrl'을 기준으로 상대 위치로 가져오기를 다시 매핑하는 항목 설정
    "paths": {
      "@/*": ["*"]
    }
		
		// 아래 부분은 설정하지 않았었음(추가로 더하기)
		"@components/*": [
        "src/components/*" // import {} from '@components/파일' 할때 어느 경로로 찾아들어갈지 paths 설정
      ],

  },

  // 컴파일할 파일들을 지정하는 속성 (와일드 카드 패턴으로 묶어 표현)
  "include": ["src"],

		// 여러 개의 하위 프로젝트로 구성된 프로젝트의 의존 관계를 지정하는 속성
  "references": [{ "path": "./tsconfig.node.json" }]
}

gitignore(기본)

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

.env

.vscode / settings.json

{
	"typescript.preferences.importModuleSpecifier": "shortest",
}