1. eslint와 prettier란?

---

1) eslint

• 자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 미리 정해둔 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해준다.

2) prettier

• 코드의 스타일만 정리해준다. 미리 규칙을 정하면 자동으로 규칙에 맞게 코드를 정리해주는 도구이다. 미리 정해둔 규칙에 따라 정렬해주기 때문에 가독성을 높혀주고 코드의 스타일을 통일시켜준다.

2. install

---

1) eslint

• create-next-app으로 프로젝트를 생성하면 ESLint가 기본으로 포함되어 있어 별도 설치가 필요하지 않다.

npx create-next-app@latest my-app --typescript --eslint

• create-next-app으로 생성된 기본 ESLint 설정 (eslint.config.mjs)

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [...compat.extends("next/core-web-vitals", "next/typescript")];

export default eslintConfig;

create-next-app 기본 ESLint 설정 특징

• next/core-web-vitals: Next.js의 핵심 웹 성능 지표 관련 규칙
• next/typescript: TypeScript 프로젝트용 Next.js 특화 규칙
• Flat Config: ESLint 9+ 버전의 새로운 설정 방식 사용
• @eslint/eslintrc: 기존 설정과 호환성을 위한 호환 레이어

추가 플러그인 설치 시

• 프로젝트에 추가 ESLint 플러그인을 설치할 때는 기본 설정을 확장하는 형태로 추가

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

2) prettier

npm install -D prettier

3) eslint-config-prettier

• eslint는 linting 기능을, prettier는 formatting을 담당하는 구조가 이상적이다. 하지만 eslint에는 일부 formatting 관련된 rule도 포함되어 있다.

• 이 rule들이 prettier와 다른 설정을 가지고 있다면 설정 충돌이 발생할 수 있으므로 eslint에서 formatting 관련 rule들을 모두 해제해야 할 필요가 있다. 이를 수동으로 진행할 수도 있지만 이를 적용해 주는 eslint plugin인 eslint-config-prettier가 존재하는데 불필요하거나 prettier와 충돌할 수 있는 모든 규칙을 비활성화해준다.

npm install -D eslint-config-prettier

4) eslint-plugin-import

• import 문의 순서를 자동으로 정렬하고 그룹별로 관리하기 위한 플러그인이다.

npm install -D eslint-plugin-import

3. setting

---

1) eslint 설정

• eslint에서 기본적으로 제공되지 않는 특정 환경을 위한 rule들을 추가하고 싶을 경우에는 plugin을 이용할 수 있다.

• 확장자 없이 설정하면 주석을 달 수 있다.

{
  "env": {
    "es6": true
  },
  "extends": ["react-app", "eslint:recommended", "prettier"],
  "rules": {
    "no-var": "error", // var 금지
    "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
    "no-console": ["warn", { "allow": ["warn", "error", "info"] }], // console.log() 경고
    "eqeqeq": "error", // 일치 연산자 사용 필수
    "dot-notation": "error", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn" // 사용하지 않는 변수가 있을 시 경고
  }
}

• package.json의 scripts에 lint: eslint --cache .와 같이 설정해주면 npm run lint 커맨드로 terminal에서 eslint를 실행시킬 수 있다. 그러나 cache된 파일이 저장된 장소인 eslintcache 파일이 생성되게 되는데 이 파일을 ignore 처리해주어야 다른 사람들과 conflict를 방지할 수 있다.

2) prettier 설정

• prettier는 프로젝트의 루트 디렉토리에 .prettierrc.확장자 파일을 통해서 설정을 할 수 있다.

• 설정파일의 확장자 형식은 다양하게 지원하고 있다. (JSON, YAML, JS, TOML)

// .js로 생성하는 이유 = 주석의 용이성을 위함
module.exports = {
  // 문자열은 작은 따옴표로 통일 (jsx는 이 설정을 무시함)
  singleQuote: true,
  // jsx에서 문자열은 작은 따옴표로 통일
  jsxSingleQuote: true,
  // 코드 마지막에 세미콜론 자동 완성
  semi: true,
  // 한 줄 최대 문자 수
  printWidth: 100,
  // 탭 사용을 금지하고 스페이스바 사용을 대체
  useTabs: false,
  // 들여쓰기 시 탭 너비
  tabWidth: 2,
  // 객체나 배열 키 : 값 뒤에 콤마 생성
  trailingComma: "all",
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호 생략
  arrowParens: "always",
  // JSX의 닫는 괄호를 줄바꿈 하지 않을 것인지 여부
  jsxBraketSameLine: "false",
};

• package.json의 scripts에 format: prettier --write --cache .와 같이 설정해주면 npm run format 커맨드로 terminal에서 prettier를 실행시킬 수 있다.

3) import 순서 관리 설정 (eslint.config.mjs)

• React 프로젝트에서 import 문의 순서를 일관되게 관리하기 위한 ESLint 설정이다.
• eslint-plugin-import를 사용하여 import 문을 그룹별로 분류하고 자동 정렬한다.

설정의 장점

• 어떤 패키지에서 무엇을 import했는지 쉽게 파악 가능
• 서드파티 패키지와 로컬 파일을 구분하여 가독성 향상
• 팀 전체에서 일관된 import 순서 유지

Next.js 플랫 컨피그 방식 설정 예시

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import importPlugin from "eslint-plugin-import";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    plugins: {
      import: importPlugin,
    },
    rules: {
      "import/order": [
        "error",
        {
          groups: ["builtin", "external", "internal"],
          pathGroups: [
            {
              pattern: "{next/**,react}",
              group: "external",
              position: "after",
            },
          ],
          pathGroupsExcludedImportTypes: [],
          "newlines-between": "always",
          alphabetize: {
            order: "asc",
            caseInsensitive: true,
          },
        },
      ],
    },
  },
];

export default eslintConfig;

설정 옵션 설명

• groups: import 그룹의 순서를 정의 (builtin → external → internal → parent → sibling → index)
• pathGroups: 특정 패턴의 import를 별도 그룹으로 분류
  • react: React를 다른 외부 패키지보다 먼저 import
  • next/**: Next.js 관련 패키지를 별도로 그룹화
  • @/**: 프로젝트 내부 경로를 internal 그룹으로 처리
• pathGroupsExcludedImportTypes: pathGroups 설정이 적용될 import 타입 정의
• newlines-between: 각 그룹 사이에 빈 줄 추가
• alphabetize: 각 그룹 내에서 알파벳 순 정렬 (대소문자 구분 안함)

적용 결과 예시

import React from "react";

import { PropTypes } from "prop-types";
import styled from "styled-components";

import Image from "next/image";
import Link from "next/link";

import ErrorImg from "@/assets/images/error.png";
import colors from "@/styles/colors";

명령어

• 검사: npm run lint
• 자동 수정: npm run lint -- --fix

4) 프로젝트 전체 파일에 규칙 적용하기

핵심 명령어 (가장 많이 사용)

1. 프로젝트 전체 파일에 ESLint 적용

# 전체 파일 ESLint 검사만
npm run lint

# 전체 파일 ESLint 검사 + 자동 수정
npm run lint -- --fix

2. 프로젝트 전체 파일에 Prettier 적용

# 전체 파일 Prettier 포맷팅 적용 (파일 수정됨)
npm run format

# 전체 파일 Prettier 규칙 검사만 (파일 수정 안됨)
npm run format:check

3. 특정 파일/폴더에만 적용

# 특정 파일에만 ESLint 적용
npx eslint src/components/Header.tsx --fix

# 특정 폴더에만 ESLint 적용
npx eslint src/components/ --fix

# 특정 파일에만 Prettier 적용
npx prettier --write src/components/Header.tsx

# 특정 폴더에만 Prettier 적용
npx prettier --write src/components/

4. ESLint + Prettier 한 번에 적용

# 전체 프로젝트에 포맷팅 + 린팅 한 번에 적용
npm run format && npm run lint -- --fix

# 커밋 전 코드 검사 (파일 수정 없이)
npm run format:check && npm run lint

package.json 스크립트 설정

{
  "scripts": {
    "lint": "next lint",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

효율적인 사용 패턴

1. 개발 중 사용

# 코드 작성 후 정리
npm run format && npm run lint -- --fix

2. 커밋 전 검사

# 코드 품질 검사
npm run format:check && npm run lint

3. CI/CD 파이프라인용

# 자동화된 검사 (파일 수정 없이)
npm run format:check
npm run lint

자동화 설정

1. VS Code 설정 (.vscode/settings.json)

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

2. Git Hook 설정 (Husky + lint-staged)

# 설치
npm install --save-dev husky lint-staged

# package.json에 추가
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  }
}

주의사항

• 대용량 프로젝트: 전체 파일 검사 시 시간이 오래 걸릴 수 있음
• 캐시 활용: --cache 옵션으로 성능 향상 가능
• 점진적 적용: 기존 프로젝트에 적용 시 단계적으로 진행 권장

추가 유용한 스크립트

{
  "scripts": {
    "code-check": "npm run format:check && npm run lint",
    "code-fix": "npm run format && npm run lint -- --fix",
    "pre-commit": "lint-staged"
  }
}

참고

• Rules-Reference
• Options - Prettier
• [TypeScript] Eslint와 Prettier 설정
• [ESLint, Airbnb] import/extensions 규칙 설정하기
• [환경설정] ESLint for React, Test, Typescript, Prettier (단독 혹은 CRA, create-next-app과 함께 사용하기)
• Sorting your imports correctly in React
• eslint-plugin-import