refactor: ESLint Prettier 공유 config 패키지 생성

[namdaeun]

📋 작업 내용

• eslint config & prettier 패키지 생성
• 공유 rule 적용

📌 PR Point

✅ 패키지 생성 이유 : 코드의 일관성 확보

• 그동안 crew와 playground가 각자 다른 레포에서 고도화 되었기 때문에 코드 스타일에도 많은 차이가 있고, ESLint와 Prettier Rule에도 차이가 컸어요.
• 따라서 공유 config 패키지 생성을 통해 모노레포 내 코드들이 일관된 코드 스타일을 유지할 수 있도록 규칙을 재생성했습니다.
• eslint와 prettier가 하는 역할이 다르기 때문에 별개의 패키지로 분리하여 각자의 규칙을 관리할 수 있도록 했습니다.

폴더 구조

ㄴ packages
     ㄴ eslint-config
          ㄴ index.js   // 기본 공통 규칙
          ㄴ next.js    // Next.js 프로젝트 전용 규칙
          ㄴ package.json
     ㄴ prettier-config
          ㄴ index.json   // 기본 공통 규칙
          ㄴ package.json
 

---

✅ ESLint Rule

프로젝트 간 일관성을 유지하고 버그를 줄이는 방향으로 설정했어요.

• import 강제 정렬 : playground에만 있던 rule이었지만 diff가 생길 때 혼란이 생길 수 있기 때문에 import 순서를 통일했습니다.
• react-hooks/rules-of-hooks: error, exhaustive-deps: warn : hooks 위반은 런타임 버그로 직결되므로, 명시적으로 선언했습니다.
• ignore pattern : playground에서 varsIgnorePattern, argsIgnorePattern 등 규칙이 자세하게 작성되어 있어서 이 부분을 따랐습니다.
• 그 외에도 불필요한 경고가 발생할 수 있는 부분들은 off로 작성해주었습니다.

index.js

module.exports = {
  parser: "@typescript-eslint/parser",
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  plugins: ["@typescript-eslint", "simple-import-sort"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  rules: {
    // TypeScript
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        varsIgnorePattern: "^_",
        argsIgnorePattern: "^_",
        caughtErrors: "all",
      },
    ],
    "@typescript-eslint/no-empty-interface": "off",
    "@typescript-eslint/ban-ts-comment": "off",

    // Import 정렬
    "simple-import-sort/imports": "warn",
    "simple-import-sort/exports": "warn",

    // React Hooks
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
  },
};

next.js

• jsx key의 경우 off를 하지 않으면 순서가 고정된 JSX 배열을 반환하는 패턴에서도 key를 강제해서 의미 없는 코드가 생기기 떄문에 off 해주었어요.

module.exports = {
  extends: ["./index.js", "next/core-web-vitals"],
  rules: {
    "react/display-name": "off",
    "react/jsx-key": "off",
    "@next/next/no-img-element": "off",
    "import/no-unused-modules": ["warn", { unusedExports: true }],
  },
};

---

✅ Prettier Rule

• prettier rule의 경우 crew보다 playground의 rule이 포맷 기준을 더 세세하게 정의하고 있어서 코드 스타일 불일치를 방지하고자 playground를 기반으로 rule을 정의했어요. semi의 경우 crew에서처럼 명시적으로 선언했어요.

{
  "arrowParens": "always",
  "endOfLine": "lf",
  "jsxSingleQuote": true,
  "printWidth": 120,
  "quoteProps": "consistent",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

---

✅ package.json

• 기존에 각 레포지토리에서 각각 선언한 eslint와 prettier package를 아래와 같이 root의 package.json에서만 워크스페이스 패키지에서 참조해주는 방식으로 변경해주었어요.

  "devDependencies": {
    "@sopt-makers/eslint-config": "workspace:*",
    "@sopt-makers/prettier-config": "workspace:*",
   }

아래 명령어를 통해 lint와 prettier 검사가 가능해요.

• yarn lint : "turbo lint",
• yarn lint:fix : "turbo lint -- --fix",
• yarn prettier : "turbo prettier",

---

참고

• rule 적용으로 인해 file changed가 다수 발생했습니다.
• 로직 변경이 없기 때문에 commit 위주로 봐주시면 감사하겠습니다 !!

[wuzoo]

고생하셨습니당

근데 prettier까지 따로 package로 뺄 필요가 있을까 싶은데, 루트 디렉토리에만 prettier config 파일이 존재하지 않나요 ?

[ExceptAnyone]

고생하셨습니다 ㅋㅋ