기본 콘텐츠로 건너뛰기

VisualStudio Code 에디터의 설치와 유용한 확장프로그램(플러그인)

SublimeText나 Atom에디터등 텍스트기반 에디터가 유행을 하자 MS에서도 Visual Studio를 기반으로 한 텍스트에디터를 출시하였고 다른 에디터들과 마찬가지로 무료로 서비스를 제공하고 있습니다.
저는 Notepadd++, SublimeText, Atom, Brackets, VisualStudioCode 에디터등을 두루두루 써보다가 VisualStudioCode에 정착을 했습니다.
원래는 Notepadd++를 요긴하게 잘 사용해 왔으나 플러그인 등이 부족하고 현재의 유행하는 편리한 기능의 에디터와는 다르기 때문에 좀더 편리한 에디터를 찾고자 했습니다. 그래서 여러가지 에디터들을 사용해 봤는데 SublimeText는 여러가지면에서 뛰어난 에디터이나 무료로 사용하려면 돈내라는 팝업을 견뎌내야하고 Atom, Brackets등은 아무래도 최적화에서 아직은 부족한지 코딩을 하다보면 가끔씩 딜레이 현상이 존재하여 짜증을 유발시킵니다. 그에 반해 Visual Studio Code는 딜레이도 심하지 않고 플러그인도 다양하고 업데이트도 자주 하는 등 제가 쓰기에 가장 적당한것 같아 VisualStudioCode에 일단 정착을 했습니다.

설치하기

VisualStudioCode 줄여서 보통 VSCode라고 하며 Windows, MacOS, Linux를 지원합니다.
Windows의 경우는 늘상 설치하는 것처럼 설치파일을 클릭하여 진행하면 됩니다.

홈페이지 : code.visualstudio
라이선스 : MIT

주요 단축키

  • Ctrl + Shift + P 또는 F1 : 모든 명령 찾기 및 실행
  • Ctrl + : 콘솔창 호출
단축키 다운로드(PDF) : keyboard-shortcuts-windows.pdf

주요 확장프로그램(플러그인)

Settings Sync

Settings Sync는 여러 장소에서 같은 환경의 VS Code를 사용할 수 있게 해주는 확장프로그램입니다. 집에 있는 컴퓨터에 설치한 확장프로그램이나 설정 정보를 사무실에 있는 컴퓨터에 똑같이 세팅을 해줄 수 있게 도와 줍니다.
VS Code에 설치되어 있는 확장프로그램과 설정정보를 github에 저장해 놓고 원하는 위치에 해당 정보를 내려받아서 똑같은 환경을 만드는 기능을 합니다. 해당기능은 Atom에디터에도 동일하게 있습니다.

단축키

  • Shift + Alt + U : 현재설정을 github에 올리기(저장)
  • Shift + Alt + D : github에 있는 설정을 내려받아 적용하기

자세히보기 이미지

View In Browser

View In Browser은 단순히 HTML파일을 브라우저에서 볼 수 있게 해주는 단순한 기능을 가지고 있지만 웹개발시 요긴하게 사용할 수 있습니다.

단축키

  • Ctrl + F1 : 브라우저 띄우기

자세히보기

ESLint

Javascript 개발 시 코드를 분석해 주는 확장기능입니다. 코딩스타일을 가이드해주기도 하고 체크도 해줍니다. Javascript개발자는 꼭 설치해야하는 필수탬입니다.

자세히보기

ftp-sync

VS Code에서 바로 FTP로 업로드 또는 다운로드 할 수 있는 기능을 제공합니다. 서버와 클라이언트 동기화를 기본기능으로 제공하고 열려져있는 파일을 수정하여 저장하면 자동으로 서버에 업로드가 됩니다. 아직 서브라임텍스트에서 제공하는 SFTP보다는 사용성이나 안정성에서는 부족하지만 그래도 무료이고 VS Code에서는 쓸만한 FTP 확장프로그램입니다.
자세히보기 이미지

vscode-icons

좌측에 있는 트리메뉴와 에디터 상단에 있는 탭메뉴의 타이틀명 앞에 아이콘을 붙혀 주어서 해당 파일이 어떤파일인지 직관적으로 알 수 있게 표시를 해 줍니다. 필수 확장기능은 아니긴 하지만 사용하면 편리한 기능정도 될것 같습니다.

자세히보기 이미지

Markdown

Markdown은 VS code에서 기본적으로 제공하는 기능입니다.
Markdown은 간단한 특정 규칙으로 글을 쓰면 자동으로 HTML코드로 변환를 시켜 주는 기능을 합니다. Markdown은 VS Code에서만 사용되는 것은 아니고 보통 github에 설명을 작성하는 용도로 사용됩니다. 사용법만 조금 익히면 HTML 태그 사용에 대한 고민없이 글을 쓰는데만 집중할 수 있어 주로 사용되는 방법입니다.

단축키

  • Ctrl + Shift + V : 새창으로 미리보기
  • Ctrl + K V : 서브창으로 미리보기 토글

다음은 Markdown과 같이 요긴하게 사용할 수 있는 확장프로그램들 입니다.

Markdown Shortcuts

Markdown에 대한 단축키를 제공해 주는 확장프로그램입니다. 단축키나 마우스의 오른클릭을 하면 메뉴로 보여주기때문에 쉽게 Markdown을 작성할 수 있게 해줍니다.

단축키 마우스 오른쪽버튼 클릭 후 Toggle 중 선택

  • Ctrl + B : 굵은 글씨
  • Ctrl + I : 글씨 기울기
  • Ctrl + L : 링크
  • Ctrl + Shift + L : 이미지 넣기
  • Ctrl + M --> Ctrl + C : 코드 블럭 생성/삭제
  • Ctrl + M --> Ctrl + I : 인라인 코드 블럭 생성/삭제
  • Ctrl + M --> Ctrl + B : 블릿 생성/삭제
  • Ctrl + M --> Ctrl + 1 : 리스트 생성/삭제
  • Ctrl + M --> Ctrl + X : 체크박스 생성/삭제

자세히보기 이미지

Markdown TOC((table of contents)

Markdown으로 작성된 글의 <h>태그를 기준으로 문서 상단에 자동으로 바로가기 목차가 생성해 줍니다.
목차가 생성되면 글내용을 한눈에 파악할 수 있고 바로가기도 진행할 수 있습니다.

단축키 마우스 오른쪽버튼 클릭 후 Markdown TOC 중 선택

  • Ctrl + M T : TOC 생성

자세히보기 이미지

Table Formatter

Markdown으로 표를 만들때 자동으로 가로 세로의 그리드를 맞추어 주어서 보기 편하게 만들어 줍니다.

적용방법 단축키는 따로 없고 Command 창을 통해 적용할 수 있습니다.

  • F1 을 눌러 명령창을 엽니다.
  • table을 입력하여 나오는 리스트 중 하나를 선택합니다.
  • Table Format All을 선택한 경우 문서 전체의 테이블을 정렬합니다.
  • Table Format Current을 선택한 경우 현재 커서가 있는 테이블만 정렬합니다.

자세히보기 이미지

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 ellipsis('...')를 처리하는 방법

이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '...'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함 text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함 white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능) 멀티라인 글자수 제한 멀티라인에 대해서 글자수를 제한하는 방법은 아래와 같습니다. <p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다.&nbsp; 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p> .txt_post { overflow: hidden; text-ove...
댓글 5개
자세한 내용 보기

Google 스프레드시트로 구글캘린더에 일정 연동하는 방법

저는 구글 제품을 많이 사용하는 편입니다. 제 주력 캘린더도 Google 캘린더 고요. 이번에 모임의 임원을 맡게 되면서 회원들의 생일을 캘린더에 등록해야 할 일이 생겼어요. 그냥 하나하나 등록을 하는 도중 "내가 지금 뭐하고 있나.." 라는 자괴감이 들기 시작했어요. 구글 시트에 있는 날짜 정보(생일)을 한 번에 쉽게 일괄 등록할 수는 없을까라는 생각이 뇌리를 스쳤습니다. 그래서 찾아봤더니.. 약간의 매크로 프로그램을 작성하면 가능할 것 같더라고요. 그래서 열심히 개발을 해봤습니다. 1시간이면 등록할 것을 8시간 걸려서 프로그램을 짜 봤어요. 결과적으로는 더 비효율적이었네요. ㅠㅠ 그러나... 나에게는 비효율 적이었지만 이코드를 공개하면 다른 사람에게는 큰 도움이 될 수 있겠구나 생각을 하고 코드를 공개해 보려고 합니다. 준비물 준비물은 Google 스프레드시트, Google 캘린더만 있으면 돼요. 당연히 무료고요. Google 캘린더 먼저 Google 캘린더를 만들거나 사용하고 있는 캘린더를 준비합니다. 적용하기 원하는 캘린더의 우측의 ... 를 클릭하고 설정 및 공유 를 선택합니다. 캘린더 ID를 잘 기억해 놓습니다. 나중에 이 ID를 활용할 예정입니다. Google 스프레드시트 회원생일 스프래드시트 공유 Google 스프레드시트로 명단과 생일을 작성합니다. ▲ 위와 같이 작성을 하면 되고 중요한 사항은.. 생년월일 이 구글 시트의 날짜 형식에 맞아야 합니다. 그리고 갤린더등록 , 캘린더상태 의 항목은 필수로 있어야 합니다. 캘린더등록 : 캘린더에 등록할지 제거할지를 표시 (ADD / DEL) 캘린더상태 : 현재 캘린더에 해당 항목이 적용되었는지 확인 (Y / ' ') 매크로 프로그램 작성하기 기본적인 준비는 끝났습니다. 이제부터 Apps Script를 제작하고 트리거를 등록하면 됩니다. Apps Script 작성하기 Apps Script 는 구글 제품에 대...
댓글 쓰기
자세한 내용 보기

Google캘린더(달력)에 대한민국 휴일 표시하기

구글 캘린더에 대한민국 휴일을 표시하는 설정에 대해서 소개합니다. 네이버 달력이라면 그냥 기본으로 나오겠지만 구글캘린더의 경우는 별도의 설정을 해 주어야 합니다. 휴일의 표시는 각 나라의 휴일을 구글에서 미리 작성해 놓은 것을 내 캘린더에 불러와 적용하는 방식으로 되어 있습니다. 대한민국 공유일 표시하기 먼저 설정화면으로 이동합니다. 캘린더 화면의 우측상단의 설정 아이콘을 클릭합니다. 메뉴 중 설정 을 클릭합니다. 설정화면 중 좌측 메뉴에서 캘린더 추가 메뉴를 선택합니다. 관심분야와 관련된 캘린더를 선택합니다. 지역 공휴일의 모두 둘러보기 를 선택하면 각나라의 휴일을 선택할 수 있습니다. 우리는 대한민국의 휴일 을 선택합니다. 캘린더에서 공휴일 보기 대한민국 휴일에 대한 설정을 했다면 이제 보기 좋게 표시하면 됩니다. 설정을 정상적으로 했다면 좌측메뉴에 대한민국의 휴일 이라는 캘린더가 보입니다. 캘린더명의 우측끝에 더보기 아이콘 을 선택합니다. 색상을 빨간색으로 선택합니다. (보통 공휴일은 빨간색이므로.. ㅎ) 그러면 캘린더에 휴일의 명칭이 빨간색 으로 표시되게 됩니다. 감사합니다.
댓글 쓰기
자세한 내용 보기