vs code 확장 프로그램 + git bash 사용

2019.3~2020.5 동안 웹 개발을 공부하면서, vs code를 메인 에디터로 사용을 하였고, 기억나는 데로 팁들을 정리해서 올려볼려고 합니다. 웹 프로그래밍 하시는 분들 중에 vs code를 에디터로 사용하시는 분들이 참고 하시면 좋을 것 같습니다.

1. vs code 확장 프로그램

1) Color Highlight

css에서 색깔을 미리볼 수 있도록 해주는 Color Highlight

css을 작성하면서 선택한 rgb나 색이 어떤 색인지 확인 할 수 있도록 주변에 테두리로 색을 보여주는 확장 프로그램입니다. 이거 말고도 비슷한 프로그램들이 많아서 color라고 치시면 찾으실 수 있을거 같습니다. 

2) Open in browser

html과 같은 파일을 브라우저에서 볼 수 있도록 해주는 확장 프로그램

웹 프로그래밍을 하게 되면 작업 중인 html 파일을 브라우저에서 봐야하는 일이 많고, vs code에서 오른쪽 버튼을 누르고 바로 들어갈 수 있도록 연결고리를 만들어주는 좋은 확장 프로그램 입니다. \

3) Indent-rainbow

들여쓰기를 확인 할 수 있는 줄별 색깔 highlighter

들여쓰기를 확인 할 수 있도록 형광색으로 들여쓰기가 된 부분 만큼 칠해주는 프로그램입니다. 아무래도 프로그래밍을 하면서 들여쓰기가 중요한 경우가 많기 때문에 요긴하게 쓰여지는 확장 프로그램인 것 같습니다. 제일 다운 잘 받았다고 생각하는 확장 프로그램입니다. 

 

2. git bash 명령어

code . -> 폴더를 오른쪽 마우스 버튼 누르고 git bash로 들어가서 vs code로 바로 넘어가는 단축어

cd 폴더명 -> 적어 놓은 폴더로 이동하기

cd .. -> 이전 폴더로 이동하기

pwd -> 현재 위치하고 있는 폴더 위치 

ls -> 현재 위치하고 있는 폴더 내의 폴더, 파일들의 목록들 나열

사실 폴더나 파일을 만드는 경우에는 단축 버튼이 있기 때문에 크게 사용하는 경우가 없었기 때문에 기본적으로 사용하게 되는 폴더 이동하기, 현재 폴더의 위치, 현재 폴더 내에 있는 폴더, 파일들의 목록 확인에 대한 단축어를 정리해 보았습니다. 

3. 기본적으로 자주 쓰는 단축키들

ctrl + s -> 저장 (저장은 가장 중요하기 때문에 생활화 해서 실수하더라도 저장 되있을 수 있도록!!!)

ctrl + `(~) -> vs code 에서 터미널 키는 단축키

ctrl + / -> 주석으로 바꾸거나, 주석 단축어를 불러주는 단축키

shift + 방향키 -> 방향키 방향으로 커서 위치 부터 드래그를 해주는 단축키

자기전에 생각나는 데로 적어본거라, 기억나는데로 또 추가 하도록 하겠습니다.