eslint, prettier 설정 그만하고 싶다 (react-starter-cli 개발기)

멈출 수 없는 초기 세팅 지옥... 그만 제발 그만

React 프로젝트를 새로 만들 때마다 매번 설치하고 설정하고 설치하고 설정하고, 어휴 지겨워.

다른 프로젝트에서 복사하자니 프로젝트마다 미묘하게 다른 것을 일일히 읽고 수정하는 게 새로 작성하는 게 낫겠다 싶고, 그러다보면 매번 같은 일에 시간쓰는게 아깝게 느껴졌다. 그래서 만들었다! 내가 자주 쓰는 설정을 한 번에! 깔끔하게! 시작할 수 있는 CLI를!

GitHub : react-starter-cli
npm : init-react-env

 

지원 대상

• 프레임워크: Vite, Next.js
• 개발 도구: TypeScript, Tailwind CSS, ESLint, Prettier, Husky
• 패키지 매니저: pnpm, npm, yarn (pnpm, yarn 없을 경우 설치, npm 없을 경우 node 설치가 안된거라 오류 뱉기)

 

사용법

1) 설치

npm i init-react-env

2) 실행

npx init-env

프레임워크(Vite/Next.js)나 사용할 packageManager, TypeScript 사용 여부 등을 고르면 자동으로 프로젝트 생성부터 의존성 설치, build 모두 해주므로 바로 생성된 폴더로 들어가 바로 개발을 시작하면 된다.

 

 

생성 결과 예시 (v 1.0.4)

Vite

my-app/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── index.css
│   └── vite-env.d.ts
├── public/
│   └── vite.svg
├── index.html
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js
├── eslint.config.js      (선택)
├── .prettierrc           (선택)
├── .husky/               (선택)
└── package.json

Next.js (app 디렉터리)

my-app/
├── src/
│   └── app/
│       ├── layout.tsx
│       ├── page.tsx
│       └── globals.css
├── next.config.js
├── tsconfig.json
├── tailwind.config.js
├── .eslintrc.json        (선택)
├── .prettierrc           (선택)
├── .husky/               (선택)
└── package.json

 

 

소회

• 프로젝트 시작의 첫 30분이 사라졌다. 바로 화면부터 그릴 수 있다. 지금은 기본 설정만 해둔 상태인데 이후에 내가 자주 쓰는 설정을 추가해두면 eslint, prettier 설정하느라 시간을 5분 이상 안쓰지 않을까
• 팀으로 작업할 때 초반 규칙(포맷, 린트) 맞추기가 수월하다.
• prettier, eslint 간의 설정 충돌을 신경쓸 필요 없다. 또한 코드 스타일과 품질 검사용 설정을 미리 나눠둔 preset이 있으니 매번 어디에 어떤 것을 넣고 설정할까 고민하지 않아도 된다.

repo

GitHub: react-starter-cli

npm: init-react-env