Skip to content

feature: prettier 추가 & eslint와 통합 #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
caseBread merged 2 commits into from
Oct 17, 2025
Merged

feature: prettier 추가 & eslint와 통합 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99b9887
feat : prettierrc추가
caseBread Oct 16, 2025
ee482c0
fix : eslint에서 prettier검사
caseBread Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .prettierrc
View file
Open in desktop
Copy link
Contributor

@dasosann dasosann Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p5 논의했던 부분 그대로 잘 들어있는 것 같습니다!

Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "all",
"tabWidth": 2,
"printWidth": 80
}
22 changes: 13 additions & 9 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
Expand All @@ -10,14 +10,18 @@ const compat = new FlatCompat({
});

const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
...compat.extends(
'next/core-web-vitals',
'next/typescript',
'plugin:prettier/recommended',
),
{
ignores: [
"node_modules/**",
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
'node_modules/**',
'.next/**',
'out/**',
'build/**',
'next-env.d.ts',
],
},
];
Expand Down
2 changes: 1 addition & 1 deletion next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { NextConfig } from "next";
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
/* config options here */
Expand Down
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Copy link
Contributor

@dasosann dasosann Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p5 prettier 설치한부분 확인했습니다! 따로 특별한 내용은 없어서 merge 하셔도 될 것 같습니다

Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.5.4",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"prettier": "^3.6.2",
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Prettier를 프로젝트에 추가하신 것을 환영합니다! Prettier가 의도치 않은 파일들(예: 빌드 결과물, node_modules)을 포맷팅하는 것을 방지하기 위해, 프로젝트 루트에 .prettierignore 파일을 추가하는 것을 강력히 권장합니다. ESLint의 ignores 설정은 Prettier CLI를 직접 실행할 때는 적용되지 않기 때문입니다.

다음과 같은 내용으로 .prettierignore 파일을 생성할 수 있습니다:

# Build output
.next/
out/
build/

# Dependencies
node_modules/

# Lock files
pnpm-lock.yaml
package-lock.json
yarn.lock

# Others
next-env.d.ts

"tailwindcss": "^4",
"typescript": "^5"
}
Expand Down
68 changes: 68 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const config = {
plugins: ["@tailwindcss/postcss"],
plugins: ['@tailwindcss/postcss'],
};

export default config;
20 changes: 10 additions & 10 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';

const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
variable: '--font-geist-sans',
subsets: ['latin'],
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
variable: '--font-geist-mono',
subsets: ['latin'],
});

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: 'Create Next App',
description: 'Generated by create next app',
};

export default function RootLayout({
Expand All @@ -23,7 +23,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang='en'>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
Expand Down
84 changes: 42 additions & 42 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,97 @@
import Image from "next/image";
import Image from 'next/image';

export default function Home() {
return (
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<div className='font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20'>
<main className='flex flex-col gap-[32px] row-start-2 items-center sm:items-start'>
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
className='dark:invert'
src='/next.svg'
alt='Next.js logo'
width={180}
height={38}
priority
/>
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
<ol className='font-mono list-inside list-decimal text-sm/6 text-center sm:text-left'>
<li className='mb-2 tracking-[-.01em]'>
Get started by editing{' '}
<code className='bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded'>
src/app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
<li className='tracking-[-.01em]'>
Save and see your changes instantly.
</li>
</ol>

<div className="flex gap-4 items-center flex-col sm:flex-row">
<div className='flex gap-4 items-center flex-col sm:flex-row'>
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className='rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto'
href='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
className='dark:invert'
src='/vercel.svg'
alt='Vercel logomark'
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className='rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]'
href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<footer className='row-start-3 flex gap-[24px] flex-wrap items-center justify-center'>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className='flex items-center gap-2 hover:underline hover:underline-offset-4'
href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
src='/file.svg'
alt='File icon'
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className='flex items-center gap-2 hover:underline hover:underline-offset-4'
href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
src='/window.svg'
alt='Window icon'
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className='flex items-center gap-2 hover:underline hover:underline-offset-4'
href='https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
src='/globe.svg'
alt='Globe icon'
width={16}
height={16}
/>
Expand Down