Vue3: 프로젝트 폴더/파일 구성, ESLint

새로 만든 Vue 프로젝트의 폴더/파일 구성

폴더/파일내용
.vscodeVisual Studio용 설정 파일
dist배포용 파일 세트를 저장
node_modules라이브러리를 저장
public웹으로 공개할 파일을 저장
src소스 코드 파일을 저장
src/assets그림 등의 애셋을 저장
src/components컴포넌트 파일을 저장
src/App.vue메인 단일 컴포넌트 파일
src/main.ts메인 스크립트 파일
.eslintrc.cjsESLint 관련 파일
.gitignoreGit에서 제외할 파일을 설정
env.d.ts환경 변수를 설정하는 파일
index.html탑 페이지
package-lock.jsonnpm 의존 관계 설정 파일
package.jsonnpm 관련 설정 파일
README.mdReadMe 파일
tsconfig.*.jsonTypeScript 관련 설정 파일
vite.config.tsVite 관련 설정 파일

배포용 파일이 저장된 dist 폴더

프로젝트를 만든 직후에는 dist 폴더가 존재하지 않음. 아래 명령으로 배포용 파일을 작성하는 빌드를 진행하면 폴더가 생성된다.

1
npm run build

ESLint 실행

ESLint를 사용한다고 선택한 Vue 프로젝트의 경우 아래 명령 실행하면 ESLint가 실행되어, 소스코드의 문제점을 지적해준다.

1
npm run lint

또한 Prettier로 Format Document(문서 서식)을 선택하면 코드를 자동으로 정렬해준다.

1
키보드 단축키: Ctrl + Shift + P -> Format Document(문서 서식)

이것도 살펴보세요!

무료 AI 도구, Gemini CLI 소개 및 사용법

이거 보고 커서에디터 삭제했다 (Gemini CLI) 위 유튜브를 보고 제미나이 CLI를 설치해봤습니다. 일반적인 LLM을 사용하듯 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다