새로운 환경에서 vscode 설치할 때마다 확장 프로그램들을 하나씩 검색해서 다시 찾는 게 귀찮았기 때문에 백업할 겸 블로그 작성 연습을 해보려 합니다.
vscode ?
Visual Studio Code는 아주 간단히 설명하자면 코드 편집 및 개발을 할 수 있는 에디터입니다.
저 같은 경우 vscode에 있는 유용한 확장 프로그램들 덕분에 좀 더 편히 코드를 작성할 수 있는 게 좋아서 vs code로 정착하게 되었습니다. 사실 처음 배울때 이걸로 시작해서 그냥 이게 편하기도 함
vscode는 깃허브, ftp등 여러가지와 연결(연동?)해서 사용할 수 있는데
ftp연결 설정은 추후 정리용으로 글을 작성해볼 생각입니다. 아마 이 게시글에 추가가 될지도 모르겠네요.
설치 및 팁
1. 다운로드
사이트 : https://code.visualstudio.com/
저같은 경우엔 윈도우에서 사용하기 때문에 따로 만질거 없이 쭉 설치를 진행했습니다.
2. 설치 후 오픈
오픈시에 가장 먼저 웰컴 페이지가 등장합니다.
저는 이게 싫어서 하단의 show welcome page on startup을 체크를 해제 하는편입니다.
3.exetension(확장 프로그램)
확장 프로그램을 쓰면 정말 편하기때문에
html으로 주로 작업을 하는 입장에서 편했던 확장프로그램을 몇개 적어두겠습니다.
html css support - 자동완성 기능
HTML to CSS autocompletion - 여는 태그 수정시 닫는 태그도 수정
Live Preview - 실시간 미리보기
서버를 쓰지 않고 연습을 막 시작한 입문 뉴비 시절에 자주 썼었던 기능입니다.
입사 후에는 그냥 테스트 서버로 보는게 편해서 더이상 쓰지 않지만 그래도 입문 뉴비땐 정말 편했어요.
fontsize shortcuts - 작업 화면 폰트 사이즈 조절
Ctrl + + / Ctrl + - 로 조절
beautify - 코드 깔끔히 정리
가장 자주 쓰는 기능인데 단축키를 설정해서 쓰면 편합니다.
단축키 설정 방법
파일 > 기본 설정 > 바로 가기 키(Ctrl + K → Ctrl + S)
beautify 검색시 [ Beautify file / Beautify selection ] 두개가 뜨는데 저는selection만 단축 설정했습니다.
4. 기타 짜잘한 팁들
Alt + z
한 화면에 여러창을 켜고 작업하면 내용이 넘쳐서 안보일때가 있는데 그럴때 쓰면 되는 단축키입니다.
! + Tab
느낌표 탭시에 html을 구성하는 가장 기본 코드 등장
별건 아니지만 완전 뉴비땐 이것도 몰랐기 때문에 그냥 적어둡니다
근데 나중에 반응형하려면 이걸로 부족하더라... 있는 코드 따와서 쓰게되는편
생각보다 글을 작성하는게 어렵고 뭘 써야 할지도 모르겠어요. 하지만 계속 쓰다 보면 언젠가는 나아질 거라 생각하고 추후에는 정말 다른 사람들에게 도움이 되는 글들을 써보고 싶습니다.
