저는 블로그 글을 VScode에서 마크다운(Markdown)을 이용하여 작성을 합니다. 그때 자주 사용하는 것이 스크린캡쳐 받은 이미지를 저장하고 링크를 거는 것입니다. 크게 어려운 작업은 아니지만 이미지가 많을 경우 여간 성가신 것이 아닙니다. 이런 불편함이 나뿐만이 아닌지 누군가 익스텐션으로 개발을 해 놓은 것이 있어 소개합니다.
이름에서도 알수 있듯이 클립보드에 저장되어 있는 이미지를 붙혀넣기 하는 것이 주요 기능입니다.
현재 46,438건의 다운로드가있었고 24명이 5점의 평점을 주었습니다. 익스텐션이 훌륭하다는 뜻입니다. ^^
Paste Image 기본 사용법
설치하는 방법은 간단하기 때문에 생략합니다.
1. 내PC에서 이미지 복사하기
먼저 내PC의 이미지나 웹브라우저의 이미지를 Ctrl+C나 이미지 복사하기를 통해 클립보드에 이미지를 복사 합니다.
위와 같이 이미지에 마우스 오른클릭 후 이미지 복사를 선택하면 됩니다.
2. VScode에 이미지 붙혀넣기
클립보드에 복사되어 있는 이미지를 Paste Image익스텐션이 설치되어 있는 VScode에 붙혀넣기 하겠습니다. 아주 간단합니다.
이미지가 나오길 원하는 위치에서 키보드 Ctrl + Alt + V (Mac에서는 Cmd + Alt + V)를 실행시킵니다. 그러면 그위치에 경로명이 작성되고 그 문서와 동일한 위치에 이미지가 생성이 됩니다.
- 마크다운 문서에 맞는 이미지 삽입코드가 자동으로 입력됩니다.
- 문서와 동일한 위치에 현재 날짜로 파일명을 붙힌
.png이미지가 생성됩니다.
편집하고 있는 문서가 마크다운(.md)문서이기 때문에 마크다운에 맞는 이미지 삽입코드가 자동으로 입력되었습니다. html이나, css등의 문서에서는 아래와 같이 딱~ 이미지 경로만 입력이 됩니다.
- 편집하는 문서가 html문서 입니다.
Ctrl + Alt + V를 실행하면 순수하게 경로명만 작성이 되기 때문에<img src=''>와 같은 img태그를 작성하고 src 요소 안에서 붙혀넣기를 하면 됩니다.- 현재 날짜의 파일명을 붙힌 실제 이미지(
.png)가 저장되어 집니다.
Paste Image 기본 설정
Paste Image의 설정입니다. 먼저 아래의 위치에 있는 VScode의 설정화면을 진입합니다.
파일 > 기본설정 > 설정
- 작업영역을 선택합니다.
- '확장'카테고리 안에 있는
Paste Image Configuration을 클릭합니다.
Paste Image:Base Path
이미지가 붙혀넣기 될 기본 폴더위치를 설정합니다.
${currentFileDir}: 편집하고 있는 파일의 위치를 기본 위치로 설정합니다.${projectRoot}: 프로젝트의 root 폴더를 기본위치로 설정합니다.
Paste Image: Default Name
붙혀넣기 할때 실제로 파일이름을 어떻게 작성할지에 대한 설정입니다.
기본은 현재 날짜를 파일명으로 사용합니다.
Paste Image: Path
복사되는 이미지가 어디에 저장될지 경로를 작성합니다. 저 같은 경우는 현재 파일이 있는 곳에 images폴더를 자동 생성하고 그곳에 이미지를 넣도록 설정했습니다.
${currentFileDir}/images
기타 다른 설정도 있지만 간단하게 이정도만 작성해 봅니다. 좀더 자세한 설정은 아래의 경로에서 확인하시면 됩니다. 영어에요 ^^; ~~
