ESLint

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn",
    "no-multiple-empty-lines": "warn",
    "no-console": ["warn", { "allow": ["warn", "error"] }],
    "eqeqeq": "warn",
    "dot-notation": "warn",
    "no-unused-vars": "warn",
    "react/destructuring-assignment": "warn",
    "react/jsx-pascal-case": "warn",
    "react/no-direct-mutation-state": "warn",
    "react/jsx-no-useless-fragment": "warn",
    "react/no-unused-state": "warn",
    "react/jsx-key": "warn",
    "react/self-closing-comp": "warn",
    "react/jsx-curly-brace-presence": "warn",
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  },
  "env": {
    "browser": true
  }
}

eslintrc 파일에서 entends에 react-app, plugin:prettier/recommended하고 rules에 지켜줘야 하는 걸 적어줌

https://github.com/eslint/eslint/tree/main/docs

https://github.com/eslint/eslint/tree/main/lib/rules

Prettier

// prettierrc 파일
// npm install -D prettier eslint-config-prettier

{
  "printWidth": 120,         // 줄바꿈 길이
  "singleQuote": false,      // 문자열 사용시 ''사용.
  "semi": true,              // 모든 구문 끝에 세미콜론 
  "trailingComma": "all",    // 맨 뒤에 있는 것도 쉼표를 추가함.
  "useTabs": false,          // 탭 대신 공백으로 들여쓰기
  "tabWidth": 2,             // 들여쓰기 크기를 2칸으로 함.
  "bracketSameLine": true    // 태그를 같은 줄에 넣음.
}

?? 아래 추가 안한 것들 중에 필요한게 있을까요?

  "arrowParens": "always",     // 화살표함수 작성시 매개변수가 하나만 있더라도 ( )로 감싸주기
  "endOfLine": "auto"          // OS에 따른 코드라인 끝 처리 방식 사용
  "bracketSpacing": true,   // 객체 괄호에 공백 삽입
 }