vscode markdown 버전 1.79 마크다운에 이미지 붙여넣기 지원

맥 사진캡쳐 단축키 (캡쳐 후 사진클릭해서, 복사 하고 붙여넣기 해야함)
cmd+shift+3 : 전체화면 캡쳐
cmd+shift+4 : 선택화면 캡처 (단축키누르면 마우스드래그로 선택캡처가능)

윈도우 사진캡쳐 단축키 (캡쳐하면 바로 붙여넣기 가능)
윈도우+shift+s : 선택화면 캡쳐 ( 단축키 누르면 상단에 전체화면 이나 선택창 캡쳐 선택도 가능)

버전 (1.79) 마크다운에 이미지 붙여넣기 지원

단축키 사용해서 링크만들기

링크 붙여넣기하면, 링크텍스트만 붙여넣기할건지 아니면, 링크를 만들지 선택할수 있음.

단축키 ctrl + . 누르면 선택창 활성화, 방향키로 원하는 항목선택 후 엔터.

https://dohokin.com/wp-content/uploads/2024/02/녹음-2024-02-15-223117.mp4

이미지 복사 붙여넣기 기능있음.

윈도우환경에서 캡쳐해서( 윈도우키 + 시프트 + s ) 붙여넣기 하면 바로 붙여넣어짐.

https://dohokin.com/wp-content/uploads/2024/02/이미지.mp4

아쉬운 점은 붙여넣기하면, 이미지 파일이 수정중인 마크다운파일과 같은 디렉토리에 저장됨..
하지만 원하는 디렉토리에 저장하는 기능 있음. 위 동영상에 보여지듯, 나는 images 폴더에 저장하게 했다.
vscode에서 F1누르고 user settings로 들어가서 아래코드를 넣어준다.
ctrl + f 눌러서 markdown.copyFiles.destination 이 항목이 있는지 찾아보고 없으면 맨아래 넣어주면 됨.

"markdown.copyFiles.destination": {
        "**/*": "images/"
    }

// 파일이름을 markdown- 로시작하게 하고 싶을때 
"markdown.copyFiles.destination": {
        "**/*": "images/markdown-${fileName}"
    }

// 파일이름에 iamge 없애고 싶을
"markdown.copyFiles.destination": {
        "**/*": "images/markdown.${fileName/(.*)\\.(.*)/$2/}"
    }
// 파일 경로 imamges/markdown.png

마크다운 파일을 자동 저장하게 하는 기능

  "[markdown]": {
    "files.autoSave": "afterDelay"
  }

VSCode 1.79 버전 출시와 함께 마크다운 문서에 이미지를 직접 붙여넣을 수 있는 새 기능이 도입되었습니다. 이는 사용자가 VSCode에서 마크다운을 작업할 때 직접 클립보드 이미지를 마크다운 문서에 추가할 수 없었던 일반적인 문제를 해결합니다.

이전에는 사용자가 이미지를 작업 공간으로 수동으로 복사한 다음 마크다운 문서에 이미지 참조 스니펫을 추가해야 했습니다.

예:

![](작업 공간의 이미지에 대한 상대 경로).

이 문제를 해결하기 위해 사용자는 이전에 “Markdown Paste”나 “Paste Image”와 같은 플러그인에 의존했습니다. 그러나 VSCode의 최신 업데이트 버전 1.79로 이 기능은 이제 내장되어 있으며 추가 플러그인이 필요 없게 되었습니다.

이 문서는 다음 주제에 초점을 맞출 것입니다:

VSCode의 새 기능 소개
기능 사용을 위한 구성
기능 비교
VSCode의 새 기능 소개
2023년 5월에 출시된 VSCode 버전 1.79에서 “외부 파일 자동 복사”라는 새 기능이 도입되었습니다. 이 기능은 외부 미디어 파일(예: 이미지, 오디오, 비디오)을 작업 공간으로 자동 복사하고 사용자가 이러한 파일을 마크다운 문서에 드래그 앤 드롭하거나 붙여넣을 때 해당 이미지 참조 스니펫을 마크다운 문서에 삽입합니다.

다음은 이미지를 드래그 앤 드롭하는 예입니다:

이미지 설명

또한, 시스템 복사나 도구 스크린샷을 포함한 클립보드 이미지도 사용할 수 있습니다. 사용자는 이미지를 마크다운 문서에 붙여넣기만 하면 VS Code가 클립보드 데이터에서 새 이미지 파일을 생성하고 새 파일을 참조하는 마크다운 이미지 링크를 삽입합니다.

기본적으로 이미지는 이미지가 붙여넣어진 마크다운 파일과 동일한 디렉토리에 저장되며, 삽입된 마크다운 스니펫은 다음과 같습니다(이미지 이름이 image.png라고 가정):

![Alt text](image.png)

이미지 외에도 이 새 기능은

기능 사용을 위한 구성
일부 경우에는 이 기능의 기본 동작을 조정해야 할 수 있습니다. 여기에는 다음이 포함됩니다:

저장 디렉토리 사용자 정의
파일 이름 변경
동일한 이름의 파일 덮어쓰기
기능 비활성화
구성 예시의 편의를 위해 “myProject”라는 프로젝트가 절대 경로 /User/me/myProject에 위치하고 다음 프로젝트 구조를 가진다고 가정합시다:
–docs
—-api
——README.md
–assets
저장 디렉토리 사용자 정의
markdown.copyFiles.destination 구성은 이미지 파일의 저장 디렉토리를 제어합니다.

"markdown.copyFiles.destination": {
"/docs/api/*/": "${documentWorkspaceFolder}/docs/images/"
}

이 구성은 마크다운 문서와 일치하는 Glob 구문을 사용하는 키와 일치하는 마크다운 문서의 저장 디렉토리를 나타내는 값으로 구성된 객체입니다. 값을 내에서 간단한 변수를 사용할 수 있습니다.

${documentFileName} – 마크다운 문서의 전체 파일 이름, 예: README.md
${documentBaseName} – 마크다운 문서의 기본 파일 이름, 예: README
${documentExtName} – 마크다운 문서의 확장자 이름, 예: md
${documentDirName} – 마크다운 문서의 부모 디렉토리 이름, 예: api
${documentWorkspaceFolder} – 마크다운 문서의 작업 공간 경로, 예: /Users/me/myProject. 마크다운 문서가 작업 공간의 일부가 아닌 경우, 이 값은 ${documentDirName}과 동일합니다.
${fileName} – 드래그하거나 붙여넣은 이미지 파일의 이름, 예: image.png
이미지를 저장하는 두 가지 일반적인 구성이 있습니다:

현재 마크다운 문서와 같은 수준에서 새 디렉토리 생성
작업 공간 내의 고정된 디렉토리를 사용하여 모든 이미지 관리

같은 수준 디렉토리 (이름이 “images”라고 가정)
VSCode 구성:

"markdown.copyFiles.destination": {
"*/": "images/"
}

프로젝트 구조:
–docs
—-api
——images
——–image.png
——README.md
마크다운 삽입:

고정 작업 공간 디렉토리 (이름이 “workspace_directory/assets”라고 가정)
VSCode 구성:

"markdown.copyFiles.destination": {
"*/": "${documentWorkspaceFolder}/assets/"
}

프로젝트 구조:
–docs
—-api
——README.md
–assets
—-image.png
파일 이름 변경
markdown.copyFiles.destination 구성 필드는 이미지 이름을 변경하는 데에도 사용할 수 있습니다.

구성이 “/” 문자로 끝나면 VSCode는 이를 디렉토리로 처리하고 원래 파일 이름 앞에 새 파일 경로로 추가합니다. 그러나 “/”로 끝나지 않으면 VSCode는 이를 정확한 파일 경로로 처리합니다.

다음은 예시 구성입니다:

"markdown.copyFiles.destination": {
"*/": "images/custom-${fileName}"
}

원래 이미지 이름이 “image.png”인 경우, 새 이미지 이름은 “images/custom-image.png”가 됩니다.

현재 구성은 정규 표현식 변수 교체 구문을 지원하며 스니펫 구문과 유사하지만 기능이 제한되어 있으며 내장 변수 및 변환기가 없습니다. GitHub에서는 타임스탬프 기반의 이름 변경과 관련된 열린 이슈가 있으며, 공식 팀에서 해결하려면 스니펫 구문에 대한 전체 지원이 필요합니다.

"markdown.copyFiles.destination": {
"/docs/*/": "images/me.${fileName/(.)\.(.)/$2/}"
}

붙여넣은 이미지가 test.jpg인 경우, 새 이미지 경로는 images/me.jpg가 됩니다.

따라서 현재로서는 이름 변경 기능이 제한적이며 더 복잡한 인코딩 변환 및 기타 요구 사항을 충족할 수 없습니다.

동일한 이름의 파일 덮어쓰기
기본적으로 동일한 이름의 파일이 있을 경우(보통 스크린샷에서 이미지 이름이 항상 image.png인 경우

발생), 덮어쓰지 않습니다. 대신 충돌을 피하기 위해 접미사를 추가하여 이미지 이름을 수정합니다.

예를 들어, 중복된 이름의 image.png가 있으면 새 이미지 이름은 image-1.png가 됩니다.

동일한 이름의 파일을 덮어쓰고 싶다면 overwriteBehavior 필드를 구성할 수 있습니다:

"markdown.copyFiles.overwriteBehavior": "overwrite"

기능 비활성화
이 기능은 기본적으로 활성화되어 있습니다. 그러나 방해가 된다고 판단되면 copyIntoWorkspace 필드를 구성하여 비활성화할 수 있습니다.
// 드래그 앤 드롭 동작에 대해

"markdown.editor.drop.copyIntoWorkspace": "never"

// 붙여넣기 동작에 대해

"markdown.editor.filePaste.copyIntoWorkspace": "never"

전반적으로, Markdown Paste 플러그인은 가장 강력한 기능을 제공하지만 추가 설치가 필요하며 내장 기능과 비교하여 기본 붙여넣기 단축키가 다릅니다.

사용 권장 사항
이름을 자동으로 변경하는 특정 요구 사항이 없다면 내장 기능만으로 충분합니다.

그러나 원본 파일 이름을 타임스탬프로 대체하는 것과 같은 이미지를 자동으로 이름 변경하고 싶다면 Markdown Paste 플러그인을 사용할 수 있습니다. 두 기능 간의 붙여넣기 단축키가 다르기 때문에 실제로 두 기능을 동시에 사용할 수 있습니다.

일반 프로젝트에서 정말로 이름 변경이 필요한지 고려해 보십시오.

그러나 VSCode의 내장 기능은 지속적으로 발전하고 있으며 결국 “Markdown Paste” 플러그인의 필요성을 완전히 대체할 것으로 예상됩니다.