[VSCode] 소스코드를 블로그에 올릴 때 이미지화, 추가한 VSCode extension

소스코드를 블로그에 올릴 때 이미지화하는 방법은 여러가지가 있다. 그 중에서 내가 사용하려는 방법은 Carbon이라는 사이트이고 이유는 여러 방법 중 가장 코드를 올렸을 때 예쁘고 코드 가독성이 좋았기 때문이다. 자세한 내용은 아래 블로그에 나와있으니 읽어보면 좋다.

 

https://velog.io/@yeseolee/%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EC%98%AC%EB%A6%B4%EB%95%8C

소스코드를 블로그에 올릴때

 

 

🐱‍👤Carbon 사이트

- 해당 사이트를 사용하면 내 코드를 이미지화할 수 있다. vscode extension을 사용해서도 간편하게 하는 방법이 나와있지만 

Carbon 을 사용하면 이미지의 사이즈라던가 줄의 간격, 테마 등을 지정해줄 수 있다.

- 개인적으로 코드를 이미지화하는 것보단 코드를 복사할 수 있었으면 좋겠는데 그건 또 어떻게해야하는 지 찾아봐야 할 거 같다.

 

 https://carbon.now.sh/

Carbon | Create and share beautiful images of your source code

+ 테마를 적용할 수 있는데 나는 Panda 테마의 글꼴 색상이 맘에 들어서 이걸 사용해보려고 한다. 참고로 기본 글꼴은 Fira Font이다. 배경 색상도 컬러피커로 변경할 수 있고 이미지를 배경으로 사용할 수도 있다. 코드라인도 원한다면 삽입해 줄 수 있다. 자유로운 커스터마이징이 장점인 듯!

 

+ 2022 06 26 추가 extension

[ Project Tree ] : README에 파일구조를 자동으로 작성해주는 익스텐션 

 

서치를 하다보니 추가하고 싶은 extension으로 README.md 파일에 자동으로 파일구조를 작성해주는 extension을 발견했다. 협업을 하다보면 같은 팀원들에게 파일 구조가 이렇게 돼있다는 것을 한눈에 알려주기 위해서 필요할 거 같아서 우선은 추가해놨다. 사실 내가 한눈에 내 프로젝트 구조를 보기 위해서 추가한 거긴 하다 ㅎㅎ

실행방법: 해당 익스텐션을 설치 후 ctrl + shift + p 를 눌러 커맨드 창을 띄운다. 그 뒤에 Project Tree를 검색하여 실행

✅README 파일이 자동으로 생성되거나 이미 존재한다면 자동으로 텍스트를 추가하는 식으로 동작한다. 

✅기본적으로 해당 익스텐션은 .gitignore에 적힌 제외 파일, 폴더들을 인식하여 동작함 따라서 노드 프로젝트일 경우, gitignore에 node_modules를 추가해주는게 좋다.(CRA를 통해 리액트 프로젝트를 만들었다면 자동으로 생성된 gitignore에 node_modules가 이미 존재함)

 

[ ES7+ React/Redux/React-Native snippets ] :  자동완성 기능 제공

-> 코드를 치다보면 기본적으로 우리가 써야하는 리액트 문법이라든가 리덕스 문법 등이 있는데 해당 extension의 shortcut을 쓰면 기본 형식을 자동완성해준다!

예를 들어 리액트 가져오기 imr -> import React from "react" // imr를 쓰면 뒤처럼 자동완성

스니펫들은 아래의 블로그에 정리가 잘 돼있다. 

• rfce -> 현재 있는 js file 이름을 기반으로 function 이 만들어짐 

https://www.hanl.tech/blog/vs-code-react-time-awesome-snippets/

알면 진짜 시간 절약되는 VS Code React snippet 리스트 - 하늘네트