웹 퍼블리싱 작업을 하다보면 편집기가 필요합니다.
처음에 html을 배우기 시작했을 때는 메모장을 이용했고,
지금은 유물이 된 국산 웹 에디터 프로그램 나모 웹에디터도 사용한 적이 있었습니다.
한글 문서 만들듯 할 수 있지만, 그 뒤에 어마무시한 지저분한 코드 때문에
어느 샌가 Adobe 드림위버 Code View에서 한줄 한줄 코드를 직접 작성하게 되었지요.
드림위버도 이제 역사 속에 사라졌는데, 어찌되었던 간에 비주얼 편집기 기능이 있는 Tool이라
코드뷰만 쓰는 나에겐 필요이상 프로그램이 무거웠는데
2011년쯤이던가? 같은 회사 개발자 분에게 Visual Studio Code를 추천 받고
그 후엔 VS코드는 계속 내 애착 편집기가 되었습다.
그런데 편하면서 불편한 점이, 드림위버에는 기본으로 있는 기능이 확장 기능, Extension으로 설치해서 써야하기에, 내가 필요한 것만 설치해서 쓸 수 있다는 장점도 있지만, 포맷이라도 하고 새로 설치할때마다 내가 뭘 설치했는지 기억이 가물가물 거린다는 것.
암튼, 포맷은 지난 여름에 했지만, 그동안 딱히 VS코드로 딥한 작업 할 일이 없어 미뤄왔던
익스텐션 설치를 하면서 이번에는 기록을 좀 남겨보려고 합니다.
일단 검색을 통해 추천 익스텐션 알아보기~
여러 블로그 중 아래 두 블로그를 중심으로 참고하였습니다!
각 포스팅 설명을 보고 나름 신충히 결정해서 설치한 VS코드 익스텐션은 아래와 같습니다.
1. Live Server - 코드 미리보기 관련 익스텐션
퍼블리싱을 하다보면 어느 정도 이후에는 레이아웃 파일들을 따로 분리 페이지에 불러오기 때문에
데스크탑 환경에서는 실제 모습을 정확히 확인하기 어렵습니다.
그래서 ftp로 서버에 돌려두고 확인하는데 굳이 FTP로 서버에 파일을 업로드 하지 않더라도, 내 컴 자체를 가상 서버로 하여 웹페이지를 미리 볼 수 있게 하는 익스텐션입니다.
퍼블리싱 작업하면서 디자인 확인할 때 유용할 것 같아 설치합니다.
설치하면 에디터 하단에 GoLive버튼이 생기는데 해당 버튼을 누르면 실행 할 수 있다고 합니다.
2. 코드 자동 완성을 위한 익스텐션.
오타쟁이가 꼭 아니더라도 빠른 작업을 위해선 필수!
일단 아래처럼 HTML 이랑 CSS 랑 Path만 설치
예전에는 Jquery 이런것도 설치했는데, 지금은 굳이 필요 없을 것 같고,
차후 퍼블리싱 작업 하면서 필요한 건 추가 설치 할 예정이네요.
2-1. HTML CSS Support - html 자동완성 익스텐션
2-2. Html to CSS autocompletion
2-3. CSS peek
코드 자동완성 관련은 아니지만 html 태그와 연결한 style이 어떤 내용인지 바로바로 보여주는 익스텐션입니다.
2-4. Path Intellisense - 경로 자동 완성 익스텐션
3. 코드는 열고 닫는 것이 중요하다! 코드 열고 닫기 관련 익스텐션
3-1. Bracket Pair Color DLW
열고 닫는 괄호가 여러개 중첩되었을 때, 어느 것에 대응된 괄호인지 컬러로 구분해 주는 익스텐션
3-2. Auto Close Tag
html인 경우 여는 태그와 닫는 태그에 태그이름을 쌍으로 똑같이 적어야 한다!
열고 닫는 태그 중 하나를 수정하면 다른 하나를 자동으로 수정해주는 익스텐션
3-3. Auto Rename Tag
4. 코드 들여쓰기 관리 익스텐션
언어에 따라 들여쓰기가 틀리면 오류가 나는 것도 있고, 협업할 때 가독성 문제도 있으니 들여쓰기는 습관화 하면 좋습니다.
참고한 블로그에서 추천해주는들여쓰기 자동 완성해주는 익스텐션은 지원 중단 + 어차피 자동 써도 눈으로 다시 확인하는 스타일이라 PASS 하고 아래 하나만 설치했습니다.
4-1. indent-rainbow
5. 버전관리 관련 익스텐션
올라운더긴 하지만, 출발점이 웹디자인과 퍼블리싱이였기에 깃을 잘 사용하진 못했습니다.
그러나 점점 깃을 안하고는 협업이 어렵다는 생각이 들어 현재 조금씩 공부하며 사용 중인데
git 버전관리를 시각화하여 보여주는 익스텐션도 있어 같이 설치하였습니다.
5-1. GitLens
버전 관리 프로그램인 git 을 통해 누가 어떤 내용으로 수정했는지 알려주는 익스텐션
VS코드 자체에 Git 기능은 있지만 git을 별도 설치해야 해당 기능을 쓸 있으니 이점 유의해 주세요.
(이번 프로젝트 부터는 git으로 퍼블리싱 코드 개발자에게 공유하기로 했는데,
사실 그냥 제공만 하는 거라 굳이 수정 들어올 일이 없어 딱히 필요 없지만
다음에 좀 더 다인원이 참여하는 프로젝트를 하게 될 시를 대비해서 어떤식으로 나오는지 보려고 설치했네요.)
예전에는 언어별 코드 자동완성이랑 indent-raibow 이렇게 밖에 익스텐션을 안썼는데
이번에는 꽤 처음부터 많이 설치하고 시작하네요.
써보고 나서 영 아니다 싶은건 코멘트를 남기기도록 하겠습니다.
뭐, 대부분 천명이상 다운로드 받고 별점도 4점 이상들인 익스텐션이라 그런일을 별로 없을 것 같긴 하지만요!
(뭐가 뭔지 모를 때는 남들이 많이 쓰는거 쓰는 게 가장 좋은 선택이더군요!)