Development tips

생산성 향상을 위한 ESLint, Prettier 공유 컨피그 만들기

0

모든 개발자가 공감할 수 있는 문제. 바로 프로젝트를 시작할 때마다 반복적으로 설정해야 하는 ESLint와 Prettier입니다. 이 작업은 귀찮고 시간이 많이 소요되며, 팀원마다 설정이 다를 경우 코드 일관성을 유지하기 어렵습니다. 이런 문제를 해결하기 위해 팀만의 공유 컨피그를 만드는 방법을 소개하려고 합니다. 이 글에서는 ESLint와 Prettier를 효과적으로 설정하는 방법, 그리고 팀 전체의 생산성을 높이는 방법을 알아보겠습니다.

pexels

공유 컨피그의 필요성

ESLint와 Prettier는 JavaScript나 TypeScript 프로젝트에서 코드 품질과 일관된 형식을 유지하는 데 필수적인 도구입니다. 하지만 매번 프로젝트를 생성할 때마다 ESLint/Prettier 설정을 반복하는 것은 번거롭습니다. 공유 컨피그를 사용하면 이러한 문제를 해결할 수 있습니다.

ESLint와 Prettier의 장점

1. ESLint

ESLint는 코드에서 잠재적인 문제를 빠르게 찾고 수정할 수 있게 도와줍니다. 예를 들어, 변수 선언 시 사용하지 않는 변수를 경고해줍니다. 이는 코드의 가독성을 높이고, 버그를 줄이는 데 큰 도움이 됩니다.

2. Prettier

Prettier는 코드 형식을 자동으로 맞춰줍니다. 이 도구를 사용하면 개발자는 코드 서식에 신경 쓰지 않고 오로지 코드 작성에만 집중할 수 있습니다. 일관된 코드 스타일은 팀의 협업 효율을 극대화합니다.

공유 컨피그 설정하기

1. ESLint 공유 컨피그

먼저, ESLint 공유 컨피그를 설정해보겠습니다. Airbnb의 eslint-config-airbnb 패키지는 많은 프론트엔드 개발자들이 사용하는 대표적인 설정입니다. 하지만 이 설정은 때때로 너무 엄격하여 작업 흐름을 방해할 수 있습니다. 이를 개선하기 위해 Microsoft의 @rushstack/eslint-config를 대안으로 선택할 수 있습니다.

{
  "name": "@org/eslint-config",
  "main": "index.js",
  "version": "1.0.0",
  "dependencies": {
    "@rushstack/eslint-config": "3.6.8",
    "@rushstack/eslint-patch": "1.10.1",
    "eslint-plugin-react": "7.34.1",
    "eslint-plugin-react-hooks": "4.6.0"
  },
  "peerDependencies": {
    "eslint": ">= 8",
    "typescript": ">= 5"
  }
}

2. Prettier 공유 컨피그

Prettier 공유 컨피그도 설정해보겠습니다. 아래는 일반적인으로 자주 사용되는 Prettier 설정입니다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "useTabs": false
}

React 프로젝트에 ESLint/Prettier 적용하기

Vite 기반의 React 프로젝트를 생성하고 공유 컨피그를 적용해보겠습니다. 프로젝트 폴더에 `.eslintrc.cjs` 파일을 생성하고 아래와 같이 설정합니다.

require("@org/eslint-config/patch");

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "@org/eslint-config",
    "@org/eslint-config/mixins/react"
  ],
  settings: {
    react: {
      version: "18.2"
    }
  },
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname
  }
};

추천 규칙 및 플러그인

1. 네이밍 컨벤션 규칙

@typescript-eslint/eslint-plugin의 `@typescript-eslint/naming-convention` 규칙을 사용하여 이름에 대한 컨벤션을 정의할 수 있습니다. 예를 들어, 인터페이스 이름에는 `I`를 붙이지 않도록 설정할 수 있습니다.

{
  "rules": {
    "@typescript-eslint/naming-convention": [
      "warn",
      { "selector": "variable", "format": ["camelCase", "PascalCase", "UPPER_CASE"] },
      { "selector": "function", "format": ["camelCase", "PascalCase"] },
      { "selector": "typeLike", "format": ["PascalCase"] },
      { "selector": "interface", "format": ["PascalCase"], "custom": { "regex": "^I[A-Z]", "match": false } },
      { "selector": "typeAlias", "format": ["PascalCase"], "custom": { "regex": "^T[A-Z]", "match": false } }
    ]
  }
}

2. 절대 경로 강제 규칙

import 경로를 절대 경로로 사용하는 규칙을 설정할 수 있습니다.

{
  "rules": {
    "no-relative-import-paths/no-relative-import-paths": [
      "warn",
      { "allowSameFolder": true, "rootDir": "src", "prefix": "@" }
    ]
  }
}

3. 구조 분해 할당 강제 규칙

구조 분해 할당을 강제하는 규칙을 설정할 수 있습니다.

{
  "prefer-destructuring": [
    "error",
    {
      "VariableDeclarator": {
        "array": false,
        "object": true
      },
      "AssignmentExpression": {
        "array": false,
        "object": false
      }
    }
  ]
}

4. Tailwind CSS 클래스 자동 정렬 플러그인

Prettier의 prettier-plugin-tailwindcss를 사용하여 Tailwind CSS 클래스 네임을 자동으로 정렬할 수 있습니다.

{
  plugins: ['prettier-plugin-tailwindcss']
}

결론

공유 컨피그를 통해 팀의 생산성을 높이고, 코드 일관성을 유지할 수 있습니다. ESLint와 Prettier 설정은 팀원 간의 원활한 협업과 코드 품질 향상에 큰 도움이 됩니다. 공유 컨피그 패키지를 도입함으로써 더 나은 개발 환경을 구축할 수 있는 만큼, 여러분도 팀의 생산성을 높이고 싶다면 공유 컨피그를 도입해보세요!

Leave a Reply