[Vite ReactTs Project] Initial Settings

**포맷팅: 코드 스타일을 검사하고 수정하는 작업

**린팅: 코드의 구조를 검사하고 잘못 작성된 코드가 없는지 확인(정적 분석)

Prettier + ESLint(포맷팅과 린팅 규칙의 충돌을 방지를 위한 설정)
Prettier : Prettier라이브러리 코드 포맷팅 진행

Prettier관련 라이브러리

eslint-config-prettier : ESLint가 Prettier코드 포맷을 따라 린팅할수 있도록 설정을 맞춰준다.
eslint-plugin-prettier : ESLint가 Prettier코드 포맷을 따라 린팅할수 있도록 플러그인을 제공한다.

npm install -D prettier eslint-config-prettier eslint-plugin-prettier
echo "{}" > .prettierrc // 파일 생성

ESLint 설정

Pretter : 포맷팅 작업 (코드 스타일 검사 & 수정)
ESLint : 린팅 작업

eslint.config.js에 eslint-config-pretter 모듈 설정 추가

import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier"; //추가 
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import globals from "globals";
import tseslint from "typescript-eslint";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
  eslintConfigPrettier, // 추가 
);

린팅 작업 중 Prettier 코드 스타일 규칙을 따르지 않을 경우 에러 발생하도록 규칙 지정

import prettier from "eslint-plugin-prettier"; // 추가 
... , 
plugins: {
            'react-hooks': reactHooks,
            'react-refresh': reactRefresh,
            prettier  // 추가 
        },
rules: {
            ...reactHooks.configs.recommended.rules,
            'react-refresh/only-export-components': [
                'warn',
                {allowConstantExport: true},
            ],
            "prettier/prettier": "error"  // 추가 
        },

https://junhyunny.github.io/vite/react/eslint-and-prettier-setup-in-vite/

Prettier 옵션

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "semi": false,
  "experimentalTernaries": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 4,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto"
}

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "semi": false,
  "experimentalTernaries": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 4,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto"
}