WEB개발이야기/VScode 2022. 2. 21.
[VScode 익스텐션] Visual Studio Code에서 클립보드에 저장된 Image 붙혀넣기 - Paste Image
마크다운(Markdown)으로 글쓰기를 할 때 이미지 붙여넣기에 대해 매우 유용한 익스텐션이 있어서 소개해 드릴게요. 캡처 프로그램으로 캡처를 하고 바로 마크다운 문서에 붙여넣기 하면 바로 이미지가 반영이 되고 이미지는 별도의 폴더에 저장이 되도록 구성되어 있어요.[Extension] Paste Image이미지를 클립보드에서 마크다운/asciidoc(또는 다른 파일)로 붙여넣기를 할 수 있어요.Paste Image 설정하기Paste Image를 몇 가지 설정하면 나에게 맞게 커스터 마이징 할 수 있어요. 모든 부분을 설명하기는 어렵고, 간단하게 몇 가지 설정하는 방법입니다. Base Path : 기본이 되는 폴더의 경로입니다. 입력값은 ${currentFileDir} 및 ${projectRoot} 입니다..
WEB개발이야기/VScode 2020. 4. 1.
[Extensions] VScode에서 이미지 캡쳐를 슬기롭게 사용하는 방법(feat. Paste Image)
저는 블로그 글을 VScode에서 마크다운(Markdown)을 이용하여 작성을 합니다. 그때 자주 사용하는 것이 스크린캡쳐 받은 이미지를 저장하고 링크를 거는 것입니다. 크게 어려운 작업은 아니지만 이미지가 많을 경우 여간 성가신 것이 아닙니다. 이런 불편함이 나뿐만이 아닌지 누군가 익스텐션으로 개발을 해 놓은 것이 있어 소개합니다. 이름에서도 알수 있듯이 클립보드에 저장되어 있는 이미지를 붙혀넣기 하는 것이 주요 기능입니다. 현재 46,438건의 다운로드가있었고 24명이 5점의 평점을 주었습니다. 익스텐션이 훌륭하다는 뜻입니다. ^^ Paste Image 기본 사용법 설치하는 방법은 간단하기 때문에 생략합니다. 1. 내PC에서 이미지 복사하기 먼저 내PC의 이미지나 웹브라우저의 이미지를 Ctrl+C나 ..
WEB개발이야기/VScode 2020. 3. 17.
[Extensions] VScode에서 코멘트를 슬기롭게 사용하는 방법 (feat. Better Comments)
VScode를 사용할 때 유용한 익스텐션(Extensions)을 소개해 드리겠습니다. 이번에 소개할 익스텐션은 Better Comments입니다. 현재 72명에게 별5개 추천을 받고 있으니 어느정도 입증이 됬다고 볼 수 있겠네요. Better Comments 소개 코딩을 하다보면 반드시 주석을 달게 되는데요. Better Comments는 코드의 주석(코멘트)를 좀더 직관적으로 볼 수 있게 특정 특수문자에 대해 색상으로 설명을 볼 수 있게 해주는 기능을 합니다. 위의 이미지에서 주석 부분만 참고하면 됩니다. 주석표시 뒤에 특수문자에 따라 그 줄의 색상이 구분되어 집니다. * 문자 : 초록색으로 표시 - 일반 정보 ! 문자 : 빨간색으로 표시 - 중요한 주의사항 ? 문자 : 파란색으로 표시 - 궁금한 사항..
WEB개발이야기/VScode 2019. 9. 16.
VScode 최고의 익스텐션 project Manager
VScode의 유용한 익스텐션인 프로젝트매니져-Project Manager를 소개합니다. 이 익스텐션은 개발 소스를 프로젝트 단위로 쉽게 관리하게 해주는 익스텐션입니다. 장점 제목에서도 알 수 있듯이 프로젝트를 매우 쉽게 전환 시켜주는 익스텐션입니다. 프로젝트의 구분은 보통 폴더단위로 구성되는데, 프로젝트를 변경하거나 생성하려면 폴더열기를 통해서 다른 프로젝트의 경로를 찾아서 열거나 해야하는데 프로젝트 매니저는 쉽게 버튼하나 누르면 변경을 할 수 있습니다. 또한 쉽게 사용할 수 있게 VScode의 좌측에 아이콘 버튼을 달아 놨습니다. Git, Mercurial, SVN repositiories는 자동으로 감지를 합니다. 사용법 간단하게는 좌측의 버튼을 사용하여 활용할 수도 있고 F1을 눌러서 명령실행줄을..
WEB개발이야기/VScode 2019. 9. 16.
VScode 최고의 익스텐션 Path Intellisense를 소개합니다.
안녕하세요. 반갑습니다. 이번에는 VScode의 익스텐션 중에 제가 사용해 본 것 중 괜찮다 싶은 것을 시리즈로 소개해 볼까 합니다. 첫번째로 소개할 것은 Path Intellisense입니다. Path Intellisense Path Intellisense는 VScode를 사용중에 파일이나 이미지 등의 경로를 지정할때 자동으로 경로를 선택해서 지정할 수 있게 해주는 아주 편리한 익스텐션입니다. 설치하는 방법은 따로 설명할 필요는 없겠지요? 저는 이미 설치한 상태입니다. Path Intellisense를 설치하고 몇가지 옵션이 있기는 하지만 설치하는 것으로 기본적인 작동을 합니다. 기준은 프로젝트 기준으로 작동을 합니다. 프로젝트는 해당 파일들이 모여있는 폴더라고 보시면 되고 그 폴더를 기준으로 상대경로..
WEB개발이야기/VScode 2019. 9. 14.
VScode Code Formater 인 Prettier 완벽 적용하기
VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다. VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다. Prettier가 코드를 강제적으로 변경을 시킨다면 Beautify는 좀더 자유롭게 놔두는 편입니다. 자신만의 코드작성 규칙을 가지고 있다면 Prettier가 짜증 날 수도 있습니다. 내 코드를 막 바꿔버리닌까요. 하지만 그런면이 코드를 항상 일정하게 정렬을 시켜 주기도하닌까 심리적인 타격만 없다면 이보다 좋을 수 는 없을 겁니다. 또한 여러 사람이 한 프로젝트를 같이 코딩을 해야 한다면 꼭 필요한 익스텐션이라고 할 수 있습니다. VScode에 prettier 적용하기 VScode에 ..
