Prettier, ESLint 설정 관리하기

Prettier (react)

{
  "semi": true, // 문장 끝에 세미콜론을 붙일지 여부
  "trailingComma": "es5", // 객체나 배열 등의 마지막 요소 뒤에 콤마를 붙일지 여부
  "singleQuote": true, // 문자열을 작은 따옴표(')로 감쌀지 여부
  "printWidth": 80, // 줄 바꿈을 할 문자열 길이
  "tabWidth": 2 // 탭의 너비
}

ESLint (react)

{
  "env": {
    "browser": true, // 브라우저 환경에서 실행할지 여부
    "es6": true // ES6 문법을 사용할지 여부
  },
  "extends": [
    "eslint:recommended", // 기본적인 규칙 적용
    "plugin:react/recommended" // React 관련 규칙 적용
  ],
  "parserOptions": {
    "ecmaVersion": 2018, // 사용할 ECMAScript 버전
    "sourceType": "module", // 모듈 형태로 작성한 코드를 사용할지 여부
    "ecmaFeatures": {
      "jsx": true // JSX 사용 여부
    }
  },
  "plugins": [
    "react" // React 관련 플러그인
  ],
  "rules": {
    "no-console": "warn", // 콘솔 사용 금지
    "no-unused-vars": "warn", // 사용하지 않는 변수는 경고
    "react/prop-types": "warn" // 프로퍼티 타입 정의하지 않은 경우 경고
  }
}

Prettier (next,Ts)

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "jsxBracketSameLine": false, // JSX 태그의 마지막 꺾쇠 괄호를 다음 줄에 쓸지 여부
  "arrowParens": "avoid", // 화살표 함수의 인자에 괄호를 사용할지 여부
  "useTabs": false, // 탭 대신 스페이스를 사용할지 여부
  "endOfLine": "auto", // 파일의 끝 줄바꿈 문자를 플랫폼에 맞게 설정
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "tabWidth": 2 // JSON 파일의 들여쓰기 너비 설정
      }
    }
  ]
}

ESLint (next,Ts)

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true // Node.js 환경에서 실행할지 여부
  },
  "extends": [
    "next", // Next.js에서 기본으로 사용하는 규칙 적용
    "next/core-web-vitals", // Core Web Vitals 관련 규칙 적용
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended", // TypeScript 관련 규칙 적용
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking" // 타입 체크까지 하는 규칙 적용
  ],
  "parser": "@typescript-eslint/parser", // TypeScript 코드를 파싱할 파서 지정
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json" // TypeScript 설정 파일 지정
  },
  "plugins": [
    "@typescript-eslint" // TypeScript 관련 플러그인
  ],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "warn",
    "@typescript-eslint/explicit-module-boundary-types": "off" // 모듈의 반환 타입을 명시하지 않아도 되는 경우가 있어 off 설정
  }
}

자주 사용하는 것들의 설명을 적어 주석으로 정리하였다.