pnpm + vite 프로젝트 설치 명령어

빠른 빌드 속도와 경량화된 설정으로 많이 사용한다고 한다.

 

1. 전역에 pnpm 설치

npm install -g pnpm

---

2. React + Typescript 프로젝트 생성

// 현재 경로에 프로젝트 폴더 생성
pnpm create vite@latest project-name -- --template react-ts

// 현재 경로에 프로젝트 생성
pnpm create vite@latest . -- --template react-ts

---

3. 프로젝트에 pnpm 설치

pnpm install

---

4. Eslint + Prettier 설치 및 기본 설정

pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

.eslintrc.cjs 생성 - lint 체크 설정

// .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021:  true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: { jsx: true },
    ecmaVersion:   'latest',
    sourceType:    'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
  settings: {
    react: { version: 'detect' },
  },
};

 

.prettierrc 생성 - 파일에 지정될 코드 설정

{
  "printWidth":    80,        // 한 줄 최대 길이 80자로 제한
  "singleQuote":   true,      // 문자열에 작은따옴표(') 사용
  "trailingComma": "all",     // 여러 줄일 때 후행 쉼표(, ) 삽입
  "endOfLine":     "auto"     // 운영체제에 맞춰 줄바꿈 방식 자동 선택
}

 

package.json scripts에 lint와 format 추가

"scripts": {
  "lint":   "eslint . --ext .ts,.tsx,.js,.jsx",
  "format": "prettier --write ." // 루트 아래 모든 파일들을 prettier 규칙에 맞게 변경
},

---

(선택) Git Hooks (Husky) + lint-staged

# 설치
pnpm add -D husky lint-staged

# husky 초기화 (pre-commit 훅 자동 생성)
npx husky-init
pnpm install

package.json에 해당 명령어 작성

// package.json
"scripts": {
  "prepare": "husky install",
  // ...기존 스크립트
},
"husky": {
  "hooks": {
    "pre-commit": "pnpm lint-staged"
  }
},
"lint-staged": {
  "*.{ts,tsx,js,jsx,json,css,md}": [
    "prettier --write",
    "eslint --fix"
  ]
},

이러면 코드를 커밋할 때 husky의 pre-commit이 실행되어 스테이징된 파일들에 prettier 포맷을 적용시킨다.

포맷 적용 중 오류가 발생하면 커밋이 중단된다.