출처
vite.config.js
alias
프로젝트의 경로를 @를 표시하면 src폴더를 가리키게 한다는 설정
package.json
의존성을 관리하는 파일
App.vue
프로젝트의 루트 컴포넌트. 어플리케이션이 실행되면 index.html을 실행하게 되는데, 그 때 index.html에 선언된 main 모듈을 가져오게 된다.
→ createApp(App) : 인스턴스를 생성하는 메서드
→ App은 루트 컴포넌트로 렌더링 될 App.vue가 들어가게 된다.
공식문서 스타일 가이드
컴포넌트 이름에 합성어 사용
내장 컴포넌트들을 제외하고 항상 합성어를 사용할 것을 적극 권장한다. 합성어를 사용하게 되면 HTML 엘리먼트들과의 충돌을 방지한다.
이렇게 조합해서 써야지 충돌 위험이 없다.
개인적으로 소문자 하이픈을 쓰는게 맞는거 같다.
prop 정의
prop은 가능한 상세하게 정의해야 한다. 최소한에 type은 꼭 명시하도록 하자
최대한 상세하게 정의하는 것이 좋으나,
최소한 타입 명시
컨벤션 룰 추가
eslint 툴로 컨벤션을 강제할 수 있다.
ESLint 공식 문서
•
공식문서 rule 위치
여기 들어가면 다양한 규칙이 있는데, 원하는 설정을 찾아서 추가하면 된다.
•
예시 → console.log 못쓰게 하기
찾아보면 console.log를 못쓰게 하는 설정이 있다.
•
.eslintrc.cjs 설정
루트 디렉토리에 .eslintrc.cjs 파일을 찾는다.
위 같이 설정하면,
개발 모드에서는 콘솔을 허락하고, 배포시에는 에러표시를 띄울 수 있다.
prettier / eslint 충돌 방지 설정
코드 붙여넣기
ESLint 자동 수정 설정
•
settings.json
코드 붙여넣기
유효성 검사할 언어를 설정 한다.
•
formartOnSave 설정
코드 붙여넣기
코드를 저장할 때 ESLint의 규칙을 적용하라는 코드