Next.js 15 + eslint + prttier + husky + lint-staged 으로 프로젝트 세팅하기

npx create-next-app@latest

What is your project named?
Would you like to use TypeScript? No / **Yes**
Would you like to use ESLint? No / **Yes**
Would you like to use Tailwind CSS? No / **Yes**
Would you like your code inside a `src/` directory? No / **Yes**
Would you like to use App Router? (recommended) No / **Yes**
Would you like to use Turbopack for `next dev`?  No / **Yes**
Would you like to customize the import alias (`@/*` by default)? No / **Yes**
What import alias would you like configured? @/*

npm install -D prettier

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "singleAttributePerLine": false,
  "bracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "embeddedLanguageFormatting": "auto",
  "experimentalTernaries": false,
}

{
  // 화살표 함수의 매개변수 괄호 여부 (x) => x
  "arrowParens": "always",

  // 객체 리터럴의 중괄호 안쪽 공백 여부 { foo: bar }
  "bracketSpacing": true,

  // 줄 끝 문자를 LF(Line Feed)로 통일
  "endOfLine": "lf",

  // HTML 공백 처리 방식을 CSS 디스플레이 속성에 따라 결정
  // => inline 요소의 공백은 유지하고, block 요소의 공백은 무시
  "htmlWhitespaceSensitivity": "css",

  // JSX/HTML 속성을 한 줄에 하나씩 작성할 것인지
  "singleAttributePerLine": false,

  // JSX 태그의 닫는 괄호(>)를 같은 줄에 배치할 것인지
  "bracketSameLine": false,

  // JSX 속성에 작은 따옴표를 사용할 것인지
  "jsxSingleQuote": false,

  // 한 줄의 최대 길이를 몇 자로 제한할 것인지
  "printWidth": 80,

  // 마크다운 등의 prose 텍스트를 printWidth에 맞춰 줄바꿈할 것인지 유지할 것인지
  "proseWrap": "preserve",

  // 객체 속성에 따옴표를 필요한 경우에만 사용
  "quoteProps": "as-needed",

  // 문장 끝에 세미콜론 추가
  "semi": true,

  // '작은따옴표'를 사용할 것인지
  "singleQuote": false,

  // 탭 너비
  "tabWidth": 2,

  // 가능한 모든 곳에 후행 쉼표 추가
  "trailingComma": "all",

  // 들여쓰기에 탭을 사용할 것인지 공백을 사용할 것인지
  "useTabs": false,

  // 템플릿 리터럴 내의 코드를 자동으로 포맷팅
  "embeddedLanguageFormatting": "auto",

  // 삼항 연산자의 실험적 포맷팅 기능을 활성화 할건지
  "experimentalTernaries": false,
}

npm install -D eslint-config-prettier

// eslint.config.mjs

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import eslintConfigPrettier from "eslint-config-prettier";

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"),
  eslintConfigPrettier,
];

export default eslintConfig;

npm install -D husky

npx husky init

npm install -D lint-staged

import path from "path";

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(" --file ")}`;

const buildPrettierCommand = (filenames) =>
  `prettier --write ${filenames.join(" ")}`;

const config = {
  "*.{js,jsx,ts,tsx}": [buildEslintCommand, buildPrettierCommand],
};

export default config;

npm exec lint-staged