프로젝트 ESLint 설정 in VSCode

npm install --save-dev eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-tailwindcss @typescript-eslint/eslint-plugin @typescript-eslint/parser

yarn add --dev eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-tailwindcss @typescript-eslint/eslint-plugin @typescript-eslint/parser

pnpm i -D eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-tailwindcss @typescript-eslint/eslint-plugin @typescript-eslint/parser

{
  // 플러그인 문서
  // https://github.com/jsx-eslint/eslint-plugin-react
  // https://typescript-eslint.io/
  // https://www.npmjs.com/package/eslint-plugin-jsx-a11y
  // https://www.npmjs.com/package/eslint-plugin-tailwindcss
  "extends": [
    "next/core-web-vitals", // Next.js 프로젝트일 경우
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:tailwindcss/recommended" // tailwindcss 사용 시
  ],
  "plugins": [
    "import",
    "@typescript-eslint",
    "tailwindcss", // tailwindcss 사용 시
    "jsx-a11y",
    "react"
  ],
  "parser": "@typescript-eslint/parser",
  "settings": {
    "tailwindcss": {
      // Tailwind를 사용하는 className override 함수를 지정합니다.
      "callees": ["cn"],
      "config": "tailwind.config.js"
    },
    "next": { // Next.js 프로젝트일 경우
      "rootDir": ["./src/"]
    },
    // React 버전을 지정합니다.
    // 지정하지 않을 경우, React 라이브러리 전체를 탐색하므로 린트 속도가 느려질 수 있습니다. ( 기본값: "detect" )
    "react": {
      "version": "18.3.1"
    },
    // typescript, node 모듈 설정
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "comma-dangle": ["error", "always-multiline"],
    "no-trailing-spaces": "error",
    "comma-spacing": ["error", { "before": false, "after": true }],
    "block-spacing": ["error", "always"],
    "semi-spacing": "error",
    "key-spacing": ["error", {
      "afterColon": true,
      "beforeColon": false
    }],
    "arrow-parens": ["warn", "always"],
    "arrow-spacing": ["error", { "before": true, "after": true }],
 
    // <img> 엘리먼트에 유의미한 대체 텍스트가 있는지 체크
    "jsx-a11y/alt-text": [
      "warn",
      {
        "elements": ["img"]
      }
    ],
    // 유효한 aria-* 속성만 사용
    "jsx-a11y/aria-props": "warn",
    // 유효한 aria-* 상태/값만 사용
    "jsx-a11y/aria-proptypes": "warn",
    // DOM에서 지원되는 role, ARIA만 사용
    "jsx-a11y/aria-unsupported-elements": "warn",
    // 필수 ARIA 속성이 빠져있는지 체크
    "jsx-a11y/role-has-required-aria-props": "warn",
    // ARIA 속성은 지원되는 role에서만 사용
    "jsx-a11y/role-supports-aria-props": "warn",
 
    // import React from 'react'; 를 사용하지 않아도 되도록 설정
    "react/react-in-jsx-scope": 0,
    // children이 없는 경우 self-closing 태그로 설정
    "react/self-closing-comp": ["error", {
      "component": true,
      "html": true
      }],
    // DOM에 정의되지 않은 속성 사용 체크
    "react/no-unknown-property": ["error", {
      "ignore": ["cmdk-input-wrapper"]
    }],
    // JSX가 여러줄로 이루어진 경우, 괄호로 감싸도록 설정
    "react/jsx-wrap-multilines": [
      "error",
      {
        "declaration": "parens-new-line",
        "assignment": "parens-new-line",
        "return": "parens-new-line",
        "arrow": "parens-new-line",
        "condition": "parens-new-line",
        "logical": "parens-new-line",
        "prop": "parens-new-line"
      }
    ],
    // 정의되지 않은 prop 사용 체크 ( 기본적으로 typescript에서 체크하므로 off )
    "react/prop-types": "off", // @see https://github.com/shadcn-ui/ui/issues/120
 
    // console.warn, console.error만 허용
    "no-console": ["error", {
      "allow": ["warn", "error"]
    }],
 
    // Tailwind 사용시 커스텀 클래스명 사용 체크
    "tailwindcss/no-custom-classname": "off",
 
    // import 순서 정렬
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]], // 그룹핑 순서
        "newlines-between": "always" // 그룹 사이에 빈 줄 추가 여부
      }
    ],
    
    // 사용하지 않는 변수 체크
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "varsIgnorePattern": "_.*",
        "argsIgnorePattern": "_.*",
        "args": "none"
      }
    ]
  }
}

{
    "eslint.format.enable": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "css.lint.unknownAtRules": "ignore", // Tailwind CSS 사용 시
    "typescript.preferences.importModuleSpecifier": "non-relative", // tsconfig의 path alias 사용 시
}

{
  "recommendations": [
    "dbaeumer.vscode-eslint"
  ]
}

dist
.cache
public
node_modules
*.esm.js