[vue3] pnpm으로 프로젝트 생성하기 (ft. @tsconfig/node18/tsconfig.json 오류)

pnpm으로 vue 프로젝트 생성하기

vue3 프로젝트의 패키지 관리자를 pnpm으로 선택하고 프로젝트를 새로 생성해본다.

 

🛠 프로젝트 생성

$ pnpm create vue

위와 같이 프로젝트 생성 명령어를 사용한다. pnpm create vue@latest 와 동일하게 최신버젼의 vue를 사용한다.

만약, 특정 버젼의. vue를 사용하려면 "pnpm create vue@원하는버젼" 으로 명령어를 수정해준다.

 

🛠 옵션 선택하기

✔ Project name: …
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

프로젝트를 생성 명령어를 사용하면 위 처럼 옵션을 하나씩 선택하게 질의가 나온다.

 

1. 프로젝트 이름 -> 본인이 원하는 프로젝트 이름을 적는다.

2. 타입스크립스 사용여부 -> 타입스크립트는 사용한다.

3. JSX 사용여부 -> js에 html를 결합한 코드를 이용 가능하나 js 공식 문법이 아니기에 사용하지 않는다.

4. 라우터 사용 여부 -> url 변경의 라우터를 사용할 수 있기에 추가한다.

5. 피니아 사용여부 -> 스토어의 유용한 기능을 제공하니 사용한다.

6. vitest 사용여부 -> 개인 프로젝트라서 테스트가 수월하여 사용하지 않는다.

7. end-to-end test -> 마찬가지로 사용하지 않는다.

8. ESLint -> 문법 체크를 도와주는 기능인데 편리하니 사용한다.

9. Prettier -> 작성하 코드를 예쁘게 정리해주는 플러그인으로 편하니 사용한다.

추가한 플러그인

위 플러그인들은 필요시 다시 추가할 수 있으니 당장 무엇인지 모르겠으면 다 No를 선택해도 무방하다.

프로젝트 생성 완료

위 처럼 프로젝트가 생성이 완료됩니다.

선택한 옵션 구성에 따라서 모양이 조금은 다를 수 있습니다.

 

프로젝트 생성 후 json 파일에 빨간색 줄이 생기고 오류가 발생하는 경우가 있는데 이 경우에는 사용하고 있는 IDE를 껏다 켜주시면 됩니다.

생성된 파일의 설정을 IDE 잘 인식하지 못하는 경우가 종종 있습니다.

저의 경우도 "tsconfig.node.json" 파일에서 "extends": "@tsconfig/node18/tsconfig.json" 를 찾을 수 없다는 오류가 나왔는데 IDE로 사용하는 VScode 를 재부팅해주니 바로 해결되었습니다.