[Init] eslint, prettier 세팅

[hummingbbird]

✏️ Summary

• close [Init] eslint, prettier 세팅 #10
  eslint & prettier 룰을 세팅했습니다.

📑 Tasks

• eslint 룰 세팅 (eslint.config.js)
  코드 정적 분석 도구인 eslint 룰을 세팅했습니다. 각 룰이 어떤 역할을 하는지는 주석으로 설명해두었습니다.

rules: {
	"no-var": "error", // var 금지
    "no-console": ["warn", { allow: ["warn", "error"] }], // console.log 경고
	"import/first": "error", // import문 최상단 위치
    "import/no-duplicates": "error", // 중복 import 금지
    "import/prefer-default-export": "off", // named export 사용(최적화 관점)
}

이때 path alias도 인식할 수 있도록 "import/resolver" 설정을 추가해주었습니다.

"import/resolver": {
        typescript: {
          alwaysTryTypes: true,
          project: "./tsconfig.app.json",
        },
},

• prettier 룰 세팅 (.prettierrc)

{
  "arrowParens": "always", 
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "lf",
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "proseWrap": "preserve",
  "singleAttributePerLine": false
}

각 룰의 역할은 아티클에 작성해두었습니다😀

👀 To Reviewer

• 빨리 머지하는 게 좋을 거 같아 꼭 필요한 내용만 task에 작성하고, 자세한 내용은 아티클에 작성하겠습니다! 추가 및 삭제하고 싶은 룰 있으면 편하게 제안해주세요~!!

📸 Screenshot

선언하고 사용하지 않은 경우 error 발생

🔔 ETC

[github-actions]

🚀 빌드 결과

✅ 린트 검사 완료
✅ 빌드 성공

로그 확인하기

Actions 탭에서 자세히 보기

[odukong]

전반적으로 필요한 규칙들 잘 정의되어있는 것 같아요!!
typescript-eslint와 플러그인 설정들도 적절하게 배치되어 있고, 특히 빌드 결과물이나 설정 파일들은 별도 규칙을 적용하지 않도록 ignore 처리해주신 부분도 너무 좋아요🥰
저는 현재 규칙정도면 충분히 일관성 있게 프로젝트를 진행할 수 있을 것 같아요, 수고하셨어요(≧∀≦)ゞ

+추가적으로 저희 코딩 컨벤션을 보면, 화살표 함수를 권장하고 있는데 규칙에 포함시켜보는 것도 좋을 것 같아요!

"react/function-component-definition": [
  "warn",
  {
    namedComponents: ["arrow-function"],
  },
],

[odukong]

import를 할 때마다 모듈 종류에 상관없이 순서가 뒤죽박죽돼서 import문의 가독성이 좋지 않았던 경우가 많은데
그룹 별로 import 순서를 강제해서 일관성을 유지할 수 있게 되어 좋은 것 같아요 ♪(´▽｀)

[qowjdals23]

오호 import 순서 강제하는 거 너무 좋네요 😍

[u-zzn]

우와아 빠른 작업 정말 최고입니다!! 수고 많으셨습니다 🖤👍

import/resolver에 TypeScript 설정을 추가해서 path alias를 tsconfig.app.json 기준으로 해석하도록 한 점이 좋았습니다. alias 때문에 import/no-unresolved가 잘못 뜨는 경우를 깔끔하게 막아주는 설정 같았어요!! :)
그리고 @typescript-eslint/no-unused-vars에서 _ prefix를 예외 처리한 것도 불필요한 경고 노이즈를 줄이는 좋은 선택인 것 같습니다!!

세부적인 코멘트 하나만 확인해주시고 바로 머지해도 상관없을 것 같습니다 ☺️

[qowjdals23]

작성해주신 아티클도 읽어봤는데, ESLint / Prettier 역할 구분을 명확하게 적어주셔서 이해하기 너무 수월했습니다 !!!!
수빈님 말씀하신 것처럼 화살표 함수 추가되면 더 완벽할 것 같아요
세팅 잘 반영된 거 확인했고, 이제 팀 컨벤션 맞춰서 작업하기 훨씬 편해질 것 같네요~~ 고생 많으셨습니다 ❤️‍🔥

[u-zzn]

import/order에서 "type" 그룹을 별도로 두고 마지막에 배치한 구조는 타입 import와 런타임 import를 명확히 구분하려는 의도로 해석되는 것 같네용!!

다만 이 설정이 @typescript-eslint/consistent-type-imports와 함께 적용될 경우, type import가 항상 분리·이동되면서 import 관련 diff가 커질 수 있는 포인트가 될 수도 있다고 하네요 ㅠㅠ

수빈님이 위에서 리뷰 달아주신 것과 같이 import 정렬 컨벤션을 한 번 확정하고 가면 좋을 것 같습니다!! :)

제가 리뷰달고 있는 이 경우는 제가 생각했을 때는 아래 예시와 같이 타입 import는 import type으로 항상 분리하고, import/order의 "type" 그룹은 항상 마지막으로 두는 방식으로 가면 어떨까요?? ☺️
이렇게 하면 타입/런타임 import의 역할이 명확해지고, consistent-type-imports와 import/order가 만들어내는 결과가 항상 동일해져서 자동 정렬로 인한 불필요한 import diff를 줄일 수 있을 것 같습니다!!

import fs from "node:fs";

import React from "react";
import { useQuery } from "@tanstack/react-query";

import { Button } from "@/shared/ui/Button";

import type { User } from "@/entities/user/model";

[hummingbbird]

제가 이해하기로는 '코드 작성 시에 type import를 가장 마지막에 하는 컨벤션을 지키자~' 로 이해했는데 맞을까요~??(코드 수정 x)

[u-zzn]

넵 맞습니다!! :)
앞으로는 type import를 항상 마지막에 두는 컨벤션으로 맞춰가면 좋겠다는 제안이었습니다 🙂

[hummingbbird]

좋습니다! 웹파트 노션 > 코드 컨벤션 페이지에 해당 룰 추가해두도록 하겠습니다 좋은 의견 감사합니다 ☺️