Posts

Showing posts with the label Visual studio code

[VScode 익스텐션] Visual Studio Code에서 클립보드에 저장된 Image 붙혀넣기 - Paste Image

Image
마크다운(Markdown)으로 글쓰기를 할 때 이미지 붙여넣기에 대해 매우 유용한 익스텐션이 있어서 소개해 드릴게요. 캡처 프로그램으로 캡처를 하고 바로 마크다운 문서에 붙여넣기 하면 바로 이미지가 반영이 되고 이미지는 별도의 폴더에 저장이 되도록 구성되어 있어요. [Extension] Paste Image 이미지를 클립보드에서 마크다운/asciidoc(또는 다른 파일)로 붙여넣기를 할 수 있어요. Paste Image 설정하기 Paste Image를 몇 가지 설정하면 나에게 맞게 커스터 마이징 할 수 있어요. 모든 부분을 설명하기는 어렵고, 간단하게 몇 가지 설정하는 방법입니다. Base Path : 기본이 되는 폴더의 경로입니다. 입력값은 ${currentFileDir} 및 ${projectRoot} 입니다. ${currentFileDir} : 현재 편집 파일이 있는 디렉터리의 경로 ${projectRoot} : vscode에서 열린 프로젝트의 경로 Default Name : 기본 이미지 파일 이름입니다. 입력값은 moment library 의 날짜 형식을 따라 지정할 수 있습니다. 자세한 내용은 아래 경로를 참고하세요. Paste Image 익스텐션 바로 가기 Paste Image 사용하기 설정이 되었다면 사용하는 방법은 간단해요. 일단 클립보드에 이미지가 복사되어 있다는 가정입니다. 그 상태에서..... Ctrl + Alt + v 버튼을 동시에 클릭하면 설정된 위치에 클립보드에 있던 실제 이미지가 저장이 되고, 문서(markdown)에는 이미지 삽입 코드가 작성이 됩니다. 힌트!! : Ctrl + Alt + v 버튼을 누를 때 글자를 선택하고 버튼을 누르게 되면 해당 글자가 파일명으로 지정이 됩니다. Paste Image 익스텐션 바로 가기

Visual Studio Code에서 코드조각(Snippets)을 슬기롭게 사용하는 방법

Image
Visual Studio Code (이하 VS code) 자체만으로도 매우 훌륭한 툴이지만 코드 조각(Snippets)을 잘 활용한다면 더 쉽고 빠르게 코딩을 할 수 있어요. 코드 조각(Snippets)이라고 하면 핸드폰의 단축키처럼 특정 문자를 입력하면 그에 해당하는 코드가 자동으로 작성이 되는 것을 말해요. 저는 주로 Markdown으로 티스토리나 구글 블로거로 포스팅할 때 주로 사용해요 . 기본 구성을 자동으로 해주기 때문에 상당히 편하죠. 내장 코드 조각 (Built-in snippets) 먼저 VS code를 설치하면 기본으로 설치되어 있거나 스니펫 익스텐션을 설치하면 사용할 수 있는 코드 조각들이 있어요. 이것만으로도 상당히 편리한 코드 생활이 가능하죠. 예를 들면 위의 애니메이션 이미지처럼 html 파일 에서 ! 를 작성하면 자동으로 html5의 기본 구성이 작성되는 것이죠. 이것은 일부분일 뿐 javascript, css 등등.. 각 언어에서 내장 코드 조각을 사용할 수 있어요. 이것만 잘 알고 있어서도 상당히 빠른 코딩이 가능해요. 사용자 코드 조각 (Create your own snippets) 하지만 제가 하고 싶은 이야기는 사용자 코드 조각이에요. 왜냐하면 저는 마크다운으로 블로깅을 하고 있기 때문이죠 ㅎㅎ 사용자 코드 조각은 ***.json 형태의 파일로 생성돼요. 만약 javascript의 코드 조각을 만들면 javascript.json 파일에 저장이 되고 마크다운 문서의 코드 조각을 만들면 markdown.json 파일에 저장이 돼요. 사용자 코드 조각 만들기 ▲ 사용자 코드 조각을 만들기 위해서는 위의 메뉴로 들어가면 됩니다. 새 전역 코드 조작 파일 : 프로그램 언어에 상관없이 어디에서나 작동되는 코드 조각을 만들 때 사용 2022년도에 대한 새 코드 조각 파일 : 현재 폴더의 파일들에게만 작동되는 코드 조각을 만들 때 사용(해당 파일이 있는 폴더가 2022년도 입니다. ^^) 각 프로그램 언어...

VScode(Visual Studio Code)소개와 설치하기

Image
코딩을 하기 위한 편집기라면 TextEditor과 IDE로 나뉠 수 있을 거예요. 그중에 IDE는 특수한 환경이나 언어에 특화된 에디터라 매우 편리한 점은 있지만 범용적으로 사용할 수는 없는 거예요. 하지만 텍스트 에디터는 html, css, javascript, typescript, python, Markdown, C 등등.. 다양한 환경이나 언어에서 범용적으로 사용할 수 있기 때문에 나름 인기가 높습니다. 라떼~ 개발자라면 울트라 에디터, 에디트 플러스, 노트패드 등등.. 을 아실 텐데요. 이 텍스트 에디터의 현재 버전이 Visual Studio Code 라고 할 수 있어요. 윈도의 메모장, 위드 패드 등이 1세대, 울트라 에디터, 에디트 플러스 등이 2세대라면 서브라임텍스트(Sublime Text), 비주얼스튜디오코드(Visual Studio Code), 아톰(Atom), 브라켓(Brackets)은 3세대라고 말할 수 있을 것 같아요. 이 3세대의 시작은 서브라임텍스트(Sublime Text)라고 할 수 있어요. 처음 설치하고 실행시키면 "이게 뭐야??"라고 생각할 정도로 매우 심플하게 생긴 에디터 창을 만나게 되지만 다양한 설정과 플러그인, UX 등은 개발자를 매료시킬 정도로 훌륭했던 기억이 납니다. 그 이후 이 서브라임텍스트와 UX 결을 같이 하는 다양한 텍스트 에디터들이 출몰하기 시작했어요. 이 3세대 텍스트 에디터는 대부분 크로스 플랫폼을 지향하고 있어서 맥과 윈도, 리눅스 등에서 동일하게 사용할 수 있어요. 서브라임텍스트(Sublime Text)가 먼저 치고 나가면서 Github에서는 Atom, 포토샵으로 유명한 어도비는 Brackets을 출시하며 3세대 텍스트 에디터의 전성기를 맞게 되었어요. 그중에 마이크로소프트가 혜성같이 나타나 Visual Studio Code 줄여서 VScode 를 떡하니 내놓은 거이에요. 처음에는 별 볼일 없을 줄 알았는데, 매우 빠른 업데이트와 안정성을 무기로 차츰차츰 영역을 넓히더니 이...