반응형

 

 

 

VS Code

Visual Studio Code

 

일전에  'VS Code 유용한 단축키 사용방법'을 포스팅하면서

다음에 VS Code  유용한 확장 플러그인 포스팅도 하겠다고 약속했는데 드디어 글을 쓰게 되었습니다.

이번 포스팅은 VS Code 설치방법과 제가 사용하는 확장 플러그인을 소개하겠습니다.

아시는 분들은 다 알겠지만 Visual Studio Code 에디터는 Microsoft의 오픈소스 기반의 크로스 플랫폼입니다.

다양한 개발언어를 지원하고, extension(확장 프로그램) 제공을 통해 쉽게 설치 및 삭제가 가능합니다.

그렇기에 코딩을 하면서 편리한 부분들이 많은 최고의 에디터입니다.

 

 

 

 

 

VS Code 설치방법

 

VS Code는 무료 에디터이며, 아래 공식 사이트에서 다운로드하여 설치하시면 됩니다.

Download : https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

 

 

 

 

Extension(확장 플러그인) 설치방법

 

VS Code에서 Extension 설치를 하려면 좌측 사이드바 하단의 Extension 아이콘 버튼을 클릭(Ctrl + Shift + X)합니다.

그리고 사용하고자 하는 확장 플러그인을 검색하여 설치하면 됩니다.

검색하기 전에는 현재 설치되어 있는 확장 플러그인을 확인할 수 있습니다.

 

 

 

 

 

 

Korea Language Pack for Visual Studio Code

 

한국어 버전으로 VS Code를 사용할 수 있도록 해주는 확장 플러그인입니다.

각국의 언어별 버전의 확장 플러그인을 설치할 수 있습니다.

 

 

 

 

 

 

Auto Close Tag

 

기본 설치 시 VS Code 에디터에 코드를 작성하려면 여는 태그와 닫는 태그를 일일이 입력해야 합니다.

하지만  Auto Close Tag 플러그인을 설치할 경우 여는 태그만 입력하면 자동으로 닫는 태그가 완성됩니다.

예를 들어 <p>를 입력해도 </p>가 자동으로 완성됩니다.

 

 

Auto Close Tag  실행 화면

 

 

 

 

 

Auto Rename Tag

 

커플링 태그(쌍 태그)인 시작 태그 또는 닫는 태그 중 하나를 수정하면 동시에 다른 한쪽 태그도 자동으로 수정되는 플러그인입니다.

예를 들어 <p> 태그를 <div> 태그로 변경하면 닫는 태그도 </p>에서 </div>로 변경됩니다. 

 

 

Auto Rename Tag 실행 화면

 

 

 

 

 

Bracket Pair Colorizer

 

괄호들이 여러 개 겹쳐 있을 경우 괄호 커플링을 정확히 식별하기 위해 같은 컬러로 보여주는 플러그인입니다.

아래 이미지와 같이 커플링 되는 괄호의 색상이 동일하게 표시됨을 확인할 수 있습니다.

괄호가 중첩되는 경우 구분 지어 쉽게 볼 수 있게 해주는 플러그인입니다.

 

 

Bracket Pair Colorizer 실행 화면

 

 

 

 

 

Color Highlight

 

색을 설정하는 마크업을 할 때 rgb 또는 16진수의 색상 코드로 입력하면 해당 색상 코드의 색상을 배경 색상으로 보여줍니다.

 

 

Color Hightlight 실행 화면

 

 

 

 

 

CSS Peek

 

웹퍼블리싱을 하면서 id 또는 class에 적용한 내용을 다시 보거나 수정할 때 쉽게 볼 수 있는 플러그인입니다.

사용방법은 Ctrl 키를 누른 상태에서 id 또는 class명 위에 마우스를 클릭하면 작성된 CSS파일 내용을 레이어 팝업창으로 볼 수 있으며, 팝업창의 내용을 수정하면 CSS파일에도 바로 적용되어 수정이 됩니다.

그리고 해당 CSS파일로 이동하고 싶을 경우에는 레이어 팝업창의 상단 파일 경로를 클릭하면 CSS파일 해당 위치로 이동이 가능합니다.  

 

 

Color Hightlight 실행 화면

 

 

 

 

 

indent-rainbow

 

4가지의 다른 색상으로 번갈아가며 들여 쓰기의 상태를 쉽게 파악할 수 있는 가독성을 주는 플러그인입니다.

코딩의 구조가 복잡하여 한 개의 구조를 찾기 어려울 때 또는 하위까지 복잡하게 들여 쓰기 되어 있을 경우

indent-rainbow 확장 플러그인을 사용하면 컬러의 구분으로 좀 더 쉽고, 빠르게 코딩 구조의 코드를 분석할 수 있습니다.

 

 

indent-rainbow 실행 화면

 

 

 

 

 

IntelliSense for CSS class names in HTML

 

HTML class 특성에 대한 CSS class 이름을 완성 제공하는 확장 플러그인입니다.

프로젝트하면서 반복 사용되는 만들어 놓은 공통 클래스 이름을 다 외울 수 없기에 편리한 플러그인입니다.

 

 

IntelliSense for CSS class names in HTML 실행 화면

 

 

 

 

 

Live Server

 

제가 VS Code를 쓰는 가장 큰 이유가 Live Server 확장 플러그인 때문입니다.

VS Code 에디터에 코드를 입력하면 실시간으로 브라우저에 바로 반영되어 확인 가능하도록 해주는 가상 서버입니다.   

코딩을 하면서 확인을 위해 매번 브라우저에서 F5 새로고침을 하지 않아도 되는 신세계를 경험할 수 있습니다.

  • ✔ Live Server 실행 : Alt + L 누른 후 Alt + O
  • ✔ flex item 자식 속성 : Alt + L 누른 후 Alt + C

 

 

Live Server 실행 화면

 

 

 

 

 

Path Intellisense

 

파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주며, 이를 선택해서 지정할 수 있는 확장 플러그인입니다.

이미지 태그 경로나 CSS 배경 이미지 경로를 찾아갈 때 매우 편리합니다.   

 

 

Path Intellisense 실행 화면

 

 

 

 

 

마치며...

 

사실 저는 에디터를 다른 종류로 갈아타기 위해 여러 번 시도했었습니다.

Sublime text 외 여러 에디터를 사용해 보았지만, 하드 코딩할 때 드림위버처럼  편리한 확장 플러그인을 가지고 있는 에디터를 찾지 못했습니다.

그렇기에 여러 특정 에디터가 유행할 때도 몇 번 써보고 실망하여 다시 드림위버로 코딩을 했습니다.

그러나 VS Code의 Live Server 확장 플러그인을 사용해보고 새로고침(F5) 하지 않고, 브라우저에서 바로 반영되어 확인할 수 있다는 것은 신세계였습니다.

드림위버에는 없는 기능이었습니다. 저는 가차 없이 10년 넘게 사용한 에디터인 드림위버를 버리고 Live Server 확장 플러그인 하나만 보고 VS Code 에디터로 갈아탔습니다.

처음에는 Live Server 하나 때문에 에디터를 갈아탔으나 1년 넘게 사용해보니,

제가 드림위버에서 유용하게 썼던 기능들을 VS Code 확장 플러그인에 내에서 찾아 쓸 수 있게 되었고, 드림위버보다 더 편리한 확장 플러그인도 찾아서 쓸 수 있게 되었습니다.

웹퍼블리셔로서 웹퍼블리싱을 처음 시작하시거나,

에디터를 갈아타기 위해 이것저것 알아보시는 분이시라면 VS Code 추천드리며, 이번에 포스팅한 내용이 편리한 코딩 생활에 도움이 되었으면 합니다.

감사합니다.

 

 

반응형

'Utility Knowhow' 카테고리의 다른 글

[SassㆍSCSS] SASS 문법 1편 - 중첩 규칙과 선택자  (0) 2021.10.27
[SassㆍSCSS] 장ㆍ단점 소개, 설치방법 및 컴파일 명령어  (0) 2021.10.25
Visual Studio Code(VS Code) 유용한 단축키 사용 방법  (0) 2021.06.21
버전 관리 시스템 Git 기초!  (0) 2019.01.11
드림위버 단축키 요약  (0) 2012.01.16
반응형

웹퍼블리싱 코딩 작업시 편집 프로그램을 사용하여 코딩을 합니다.
편집 프로그램은 다양하게 있으며, 각각 본인의 스타일에 맞는 편집기를 사용하게 됩니다.
(주)맑은커뮤니케이션 에서는 퍼블리셔들이 다양하게 편집 프로그램을 사용합니다.
이에 따라 편집 프로그램 중 Visual Studio Code(VS Code) 사용시 유용한 단축키 사용법을 알아보고자 합니다.
이유는 요즘 퍼블리셔, 개발자들이 많이 사용하기에 주제로 다루어 보았습니다.
사용 빈도가 높은 단축키는 (★)를 하였습니다.

기본 편집 단축키

단축키 구분 핵심 설명 Command ID
Ctrl + X
커서 위치 행 삭제(잘라내기)		 커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + X로 행을 삭제(잘라내기)합니다. editor.action.clipboardCutAction
Ctrl + Shift + K
커서 위치 행 삭제		 커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + Shift + K로 행을 삭제합니다. editor.action.deleteLines
Ctrl + C
커서 위치 행 복사		 커서 행 코드를 반복해서 사용해야 할 경우, 해당 행에 커서를 놓고 Ctrl + C로 행을 복사합니다. editor.action.clipboardCopyAction
Ctrl + Enter
커서 아래 행 빈줄 생성		 커서를 맨 뒤로 보낸 후 Enter를 쳐서 빈 행을 생성할 수 있지만,
행의 코드 중간 부분에서도 Ctrl + Enter 단축키를 사용할 경우 더욱 쉽게 커서 아래에 빈 행을 생성 후 이동 가능합니다. 		editor.action.insertLineAfter
Ctrl + Shift + Enter
커서 위 행 빈줄 생성		 행의 코드 중간 부분에서도 Ctrl + Shift + Enter단축키를 사용할 경우 더욱 쉽게 커서 위에 빈 행을 생성 후 이동 가능합니다. editor.action.insertLineBefore
alt + (↑)화살표
행을 위로 이동		 커서가 있는 현재 행을 윗줄로 옮길때 alt + (↑)화살표를 할 경우 쉽게 행의 코드 윗줄과 순서를 바꿀 수 있습니다. editor.action.moveLinesUpAction
alt + (↓)화살표
행을 아래로 이동		 커서가 있는 현재 행을 아래로 옮길때 alt + (↓)화살표를 할 경우 쉽게 행의 코드 아랫줄과 순서를 바꿀 수 있습니다. editor.action.moveLinesDownAction
Ctrl + alt + (↑)화살표
커서를 위에 추가(다중선택) (★)		 동일하게 문자열을 수정시 Ctrl + alt + (↑)화살표로 윗행을 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. editor.action.insertCursorAbove
Ctrl + alt + (↓)화살표
커서를 아래에 추가(다중선택) (★)		 동일하게 문자열을 수정시 Ctrl + alt + (↓)화살표로 아래행 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. editor.action.insertCursorBelow
Ctrl + /
한줄 주석처리 (★)		 코드에 대한 설명 또는 필요에 의해 코드를 삭제하지 않고 브라우저에서 보여주고 싶지 않을 경우 Ctrl + / 단축키를 사용하면 됩니다.
퍼블리싱 작업시 자주 사용하는 단축키입니다.
해당 주석을 풀고 싶을 경우 Ctrl + / 단축키를 한번 더 누르면 됩니다. 		editor.action.commentLine
Ctrl + K → Ctrl + C
블럭 주석 처리 (★)		 한줄 주석(//)을 여러 행 한꺼번에 처리하는 블럭주석으로 Ctrl + K → Ctrl + C 단축키를 사용하면 됩니다.
 editor.action.addCommentLine
Ctrl + K → Ctrl + U
주석 삭제 (★)		 주석 처리한 부분을 해제 하고 싶을 경우 Ctrl + K → Ctrl + U 단축키를 사용하면 됩니다.
 editor.action.removeCommentLine
Alt + Shift + A
블럭 주석 처리 (★)		 커서 위치에서 /* */ 또는 드래그 하여 선택된 부분을 블럭 주석 처리 하고 싶을 경우 Alt + Shift + A 단축키를 사용하면 됩니다.
 editor.action.blockComment
Ctrl + Shift + [
커서 영역 접기		 퍼블리싱 작업시 해당 블럭의 코딩을 완료 후 코드의 양이 많아서 코드가 보기 힘들 경우 가독성을 위해 커서 위치에서 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 접을 수 있습니다.
 editor.foldRecursively
Ctrl + Shift + ]
커서 영역 펼치기		 퍼블리싱 작업시 접었던 부분의 코드를 다시 수정하거나 보고 싶을 경우 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 펼칠수 있습니다.
 editor.unfoldRecursively

검색관련 편집 단축키

단축키 구분 핵심 설명 Command ID
Ctrl + G
행(라인 번호)으로 이동 (★)		 퍼블리싱 작업시 특정 줄 번호로 빠르기 이동하고 싶을 경우 Ctrl + G 단축키를 사용하면 빠르게 원하는 행으로 이동 가능합니다.
 workbench.action.gotoLine
Ctrl + P
빠른 파일 열기 (★)		 프로젝트 파일 폴더에서 일일이 클릭해서 파일을 찾는 수고로움을 피하고, 빠르게 파일을 찾고 싶을 경우 Ctrl + P 단축키를 사용하면 됩니다.
 workbench.action.quickOpen
Ctrl + F
찾기		 현재 파일에서 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 빠르게 찾아아서 이동 가능합니다.
 actions.find
Ctrl + Shift + F
전체 파일에서 찾기		 폴더에서 파일을 전체 검색하여 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 검색한 문자열이 있는 모든 파일을 찾을 수 있습니다.
그러나 전체 검색이다 보니, 파일이 많을 경우 시간이 오래 걸릴 수 있습니다. 		workbench.view.search
Ctrl + H
현재페이지 문자열 수정하기 (★)		 현재 퍼블리싱 중인 페이지에서 여러개의 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다.
한 개씩 확인하면서 바꾸고 싶을경우 Enter 하면 한 개씩 변경 가능하며, Ctrl + Alt + Enter 하면 모두 수정이 가능합니다. 		editor.action.startFindReplaceAction
Ctrl + Shift + H
폴더 모든 페이지 문자열 수정하기 (★)		 프로젝트 폴더 전체 페이지에서 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다. workbench.action.replaceInFiles
F8
오류 또는 경고 찾기		 HTML, JS, CSS 파일에서 오타로 인해서 오류를 확인하고자 할 경우 F8 단축키를 사용하면 쉽게 찾아서 수정할 수 있습니다.
 editor.action.marker.next

파일 관리 편집 단축키

단축키 구분 핵심 설명 Command ID
Ctrl + N
새로운 편집 탭 열기		 퍼블리싱을 하다보면 새로운 파일(HTML, CSS, JS)을 생성해야 할때가 있습니다.
이럴 경우 Ctrl + N 단축키를 사용하여 파일 탭을 생성합니다. 		workbench.action.files.newUntitledFile
Ctrl + Shift + N
새로운 창 열기		 VS Code 에디터에서 새로운 프로젝트 폴더를 생성한 후 열고 싶을 때 Ctrl + Shift + N 단축키를 사용합니다.
현재 작업중인 프로젝트에서 종류가 다른 프로젝트의 수행을 위해 새로운 창을 열고 싶을 때 사용하는 단축키 입니다. 		workbench.action.newWindow
Ctrl + O
파일 열기		 새로운 파일을 만드는 것이 아닌 프로젝트 폴더내에 이미 생성된 파일을 열고자 할 경우 Ctrl + O 단축키를 사용합니다. workbench.action.files.openFile
Ctrl + W
파일 창 닫기 (★)		 퍼블리싱 작업을 하다보면, 여러개의 창을 열어 놓을 경우가 있습니다.
해당 파일을 더이상 열어 놓을 필요가 없거나, 파일창이 너무 많아 일부분 닫아야 할 경우 Ctrl + W 단축키로 파일을 닫아 줍니다. 		workbench.action.closeWindow
Ctrl + Shift + T
이전에 닫힌 편집파일 다시 열기 (★)		 현재 파일에서 퍼블리싱 작업중, 이전에 닫았던 창을 다시 열어야 할 경우 Ctrl + Shift + T 단축키로 사용하면 됩니다. workbench.action.reopenClosedEditor
Ctrl + S
파일 저장		 신규 파일 저장이 아닌 현재 파일을 저장해야 할 경우 Ctrl + S 단축키로 파일을 저장하면 됩니다. workbench.action.files.save
Ctrl + Shift + S
다른 이름으로 파일 저장		 현재 파일을 새로운 이름의 파일로 생성하여 저장해야 할 경우 Ctrl + Shift + S 단축키로 파일을 저장하면 됩니다. workbench.action.files.saveAs
Ctrl + \
파일 화면 창 분할 (★)		 한 개 이상의 파일 화면을 동시에 보면서 퍼블리싱 해야 할 경우 Ctrl + \ 단축키를 사용하여 화면 창을 분할하여 보면 편리합니다.
Ctrl + \ 단축키를 누른 횟 수 만큼 화면 창이 분할 됩니다. 		workbench.action.splitEditor
Ctrl + N(숫자)
화면 분할 창 위치 포커싱 (★)		 화면을 여러 개 분할 후, 퍼블리싱 작업시 원하는 위치의 분할 창으로 이동해야 할 경우 Ctrl + N(숫자) 단축키를 사용하여 원하는 파일 분할창으로 쉽게 이동할 수 있습니다.
예를 들어 Ctrl + 2 단축키를 누르면 2번 파일 분할창으로 이동합니다.
마우스로 매번 분할창 클릭을 하지 않아도 됩니다.

언어 편집 단축키

단축키 구분 핵심 설명 Command ID
Ctrl + ← /
Ctrl + →
단어별 커서 이동		 한글자씩 커서 이동이 아닌, 단어별로 커서를 이동해야 할 경우 Ctrl + ← / Ctrl + → 단축키를 사용하여 좌우로 쉽게 이동할 수 있습니다.
Ctrl + Shift + ← /
Ctrl + Shift + →
단어 선택		 단어를 선택해야 할 경우 Ctrl + Shift + ← / Ctrl + Shift + → 단축키를 사용하면 됩니다.
Alt + Shift + →
선택 확장		 문단 또는 태그 단위로 확장 선택을 해야 할 경우 Alt + Shift + → 단축키를 사용하면 됩니다.
 editor.action.smartSelect.grow
Alt + Shift + ←
선택 축소		 문단 또는 태그 단위로 축소 선택을 해야 할 경우 Alt + Shift + ← 단축키를 사용하면 됩니다. editor.action.smartSelect.shrink
alt + 마우스 클릭
필요한 문자열을 골라서 커서 추가(다중선택) (★)		 동일하지 않은 다양한 문자열을 수정시 alt + 마우스 클릭으로 작업자가 원하는 문자열을 선택하여, 한번에 여러개를 수정할 수 있습니다.
Ctrl + K → Ctrl + F
자동 정렬(★)		 들여쓰기를 제대로 정리하지 못했을 경우 Ctrl + A 후 Ctrl + K → Ctrl + F 단축키를 사용하면 한번에 코드 자동정렬을 할 수 있다.
여러명의 퍼블리셔가 한개의 프로젝트를 진행할 경우 코드 정렬의 통일성 문제를 해결할 수 있기 때문에, 없어서는 안될 단축키 입니다. 		editor.action.formatSelection
Ctrl + D
특정 문자열 여러개 찾기(★)		 동일한 문자열 여러개를 한번에 수정해야 할 경우 Ctrl + D 단축키를 사용하여 한번에 수정할 수 있다.
다중 선택 방법은 Ctrl + D 를 누른 횟 수 만큼 동일한 문자열이 선택 된다.
예를 들어 AA라는 문자열 2개를 BB로 수정이 필요할 경우, AA에 커서를 두고 Ctrl + D 단축키를 2번 눌러 AA 문자열 2개를 선택한 후 BB로 문자를 수정하면 된다. 		editor.action.addSelectionToNextFindMatch
Ctrl + Shift + L
특정 문자열 모두 선택		 Ctrl + D는 동일한 문자열을 누르는 횟 수 만큼 선택 갯수가 확장되는 방식이라면 Ctrl + Shift + L 단축키를 사용하면 한번에 동일한 문자열을 선택하여 편집할 수 있습니다.
찾아야 할 문자열을 블럭선택 한 후 Ctrl + Shift + L 단축키를 누른 후 수정하면 됩니다. 		editor.action.addSelectionToNextFindMatch

확장프로그램 단축키

확장프로그램 핵심 설명 단축키 구분
Live Server 라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다.
사용방법은 확장프로그램을 설치한 후 , Alt + L → O 단축키를 사용하면 브라우저에서 실시간으로 코딩 상황를 확인 가능합니다.
 Alt + L → O
Live Server 실행 (★)
Live Server 라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다.
사용방법은 확장프로그램을 설치한 후 , Alt + L → C 단축키를 사용하면 가상 서버를 종료 합니다.
 Alt + L → C
Live Server 종료 (★)

마치며..

Visual Studio Code(VS Code) 에디터 사용시 많이 사용하는 단축키 위주로 정리해 보았습니다.
다음글은 Visual Studio Code(VS Code) 사용시 편리한 확장프로그램 몇 종류와 용도에 대해 글을 쓰도록 하겠습니다.
잘못된 내용과 궁금하신 내용은 댓글 주시면 답변 드리겠습니다.

반응형

'Utility Knowhow' 카테고리의 다른 글

[SassㆍSCSS] SASS 문법 1편 - 중첩 규칙과 선택자  (0) 2021.10.27
[SassㆍSCSS] 장ㆍ단점 소개, 설치방법 및 컴파일 명령어  (0) 2021.10.25
Visual Studio Code(VS Code) 설치방법 및 내가 쓰는 확장 플러그인  (0) 2021.10.20
버전 관리 시스템 Git 기초!  (0) 2019.01.11
드림위버 단축키 요약  (0) 2012.01.16

+ Recent posts

티스토리툴바