VS code Extensions(확장기능) 설치
- html tag wrapper:
마크업 언어를 블록으로 묶어서 태그를 입력할 때, 사용한다. (블록 씌운 뒤, ctrl+i) - indent rainbow:
- live server:
코드 파일을 저장하면, 웹 브라우저에 바로 반영된다. (새로고침 필요없다.) - prettier:
- auto rename tag
마크업 언어에서 시작태그만 바꿔도 종료태그가 바뀐다. - eslint
- vscode incos
좌측 리스트의 아이콘이 생긴다.
1. Font 설치
- D2Coding ligature
2. .vscode 폴더 생성
- VSCode에서 원하는 프로젝트 폴더 오픈
( 해당 폴더 안에 있는 파일들만 다음 setting 값과 prettierrc 값이 적용된다. )
( 해당 폴더 안에 있는 파일들만 다음 setting 값과 prettierrc 값이 적용된다. )
- 프로젝트 루트 경로에 .vscode라는 이름의 폴더를 생성
- 해당 폴더는 VSCode에서 프로젝트 별 설정을 저장하는 전용 폴더
3. settings.json 파일 생성
- .vscode 폴더 안에 settings.json 파일을 새로 만듭니다.
- 이 파일에 원하는 설정값을 JSON 형식으로 작성합니다.
4. prettierrc 파일 생성
- 프로젝트 폴더 루트 경로에 .prettierrc 파일 생성
- .prettierrc파일에 아래의 설정 값 입력
코드 끝에 ';'을 붙이는 이유?
줄바꿈에 따라 코드를 구분하지만, 코드 압축을 할 때는 줄바꿈을 모두 없앤다. 그때 ';'이 코드의 구분자가 된다.
Git 설치
- git-hurb에 접속해서 repositories 생성, 생성된 주소 복사하기.
- 로컬에 원격저장소(깃허브)에 접근할 수 있도록 사용자, 이메일 등록
- 터미널창 열고 아래의 명령어로 원격 저장소의 사용자명과 이메일 등록
- git config --global user.name "계정"
- git config --global user.email "등록이메일"
- 아래의 명령어로 등록 내역 확인
- git config --global --list
vs code에서 git 불러오기
- 경로 폴더를 만든다.
- vs-code 프로그램 열어서, new window에 Clone-repositories 선택, 생성된 주소 붙여넣기.
- 주의사항: 윈도우에서 폴더부터 열고 파일을 생성한 뒤 연결 하려고 하면, 'Clone-repositories' 버튼이 아닌 'Initialize Repository' 버튼이 생긴다.
이때, 'Initialize Repository' 버튼을 누르면, 깃허브에 새 repositories를 만들어 버린다.
VS code 버전관리 3단계
- 저장 > Changes 확인
- [+] 버튼 > staged 확인
- 메세지입력 및 Commit > GRAPH 확인
Push
- Commit 이 끝난 뒤, 버튼이 Push로 바뀜. Push 클릭
- git-hub > repositories > project 클릭 > Commits 클릭 > 옵션에서 'split' 해주면 분할해서 확인 가능
GIT 커밋 컨벤션 (메세지 기본 구조)
- 형식:
- 타입: 내용
- 타입
- feat: 새로운 기능 추가
- fix: 버그 수정
- docs: 문서 수정
- style: 코드 스타일 변경, 정렬 병렬
- refactor: 코드 리팩토링, 코드 고도화
- test: 테스트 코드 추가/수정
- chore: 환경설정 변경
Tags:
웹개발_Tool
