퍼블리싱 하는데 유용한 VSCODE 익스텐션

 

 

VSCode에는 굉장히 많은 익스텐션이 있고, 사람에 따라 유용하게 사용하는 익스텐션이 다르다.

실제 퍼블리셔로 일하고 있는 내가 실무에서 유용하게 사용하고 있는 익스텐션에 대해서 공유하고자 한다.

 

 

 

1️⃣ FTP Simple (VSCode에서 FTP에 접속하여 실시간 수정이 가능)

---

ftp-simple 익스텐션

 

워드프레스를 주로 사용하는 입장에서 FTP에 직접 접속하여 코드를 수정하는 경우가 굉장히 많다. 

개인 폴더에서 작업하는 일이 거의 없기 때문에 위에서 소개한 Live Server 보다는 FTP Simple의 사용 빈도가 확연히 높다.

 

• ctrl+shift+p를 눌러 ftp를 검색하면 ftp-simple : Config - FTP connection setting를 클릭해 서버 정보를 입력한다.
• 기본 셋팅 된 정보에 내가 들어갈 웹 서버의 정보를 입력하면 된다.
• host 는 내 웹 호스팅 도메인 / port는 보통 21 / path는 /로 입력한다.
• 모든 정보 입력, 저장 후 다시 ctrl+shift+p를 눌러 ftp-simple : Remote directory open to workspace 를 클릭하고 아까 등록했던 정보를 누르면 된다. name에 작성했던 부분이 여기에 나오게 된다. 

 

ftp-simple 익스텐션 사용 예

 

 

 

2️⃣ Live Server(로컬에 있는 파일을 저장만 하면 자동으로 웹에서 새로고침 되어 반영)

---

 

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server - Visual Studio Marketplace

 

 

이 익스텐션 설치 전에는 코드를 저장하고 변경된 내용을 적용 하려면, 매번 브라우저 새로고침을 했어야 했다.

이 익스텐션은 저장만 하면 바로바로 새로고침없이 변경된 값이 적용되게 한다.

 

• ​ctrl + shift + p를 눌러 커맨드창을 열고 live server: open with live server를 클릭하면 실행된다.
• 혹은 vscode하단에 있는 Go Live를 누른 후 localhost:5500으로 접속하면 된다.

 

Live Server 익스텐션 사용 예

 

 

 

 

 

3️⃣ Indentation Level Movement(코드를 일일히 위치 변경하지 않고 단축키로 가능)

---

https://marketplace.visualstudio.com/items?itemName=kaiwood.indentation-level-movement

Indentation Level Movement - Visual Studio Marketplace

 

 

코드 작업을 하다 보면 코드의 위치를 위아래로 이동시켜야 하는 경우가 있다.

그럴 때 이 익스텐션을 활용하면 코드를 잘라내고 이동하고 할 필요 없이 이동시킬 수 있다.

 

• ctrl + UP/DOWN 으로 코드를 간편하게 이동시킬 수 있다.

 

Indentation Level Movement 익스텐션 사용 예

 

 

 

4️⃣ Colorize(백그라운드 컬러를 눈으로 바로 확인 가능)

---

https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

colorize - Visual Studio Marketplace

 

 

CSS에서 컬러를 적용하는 경우 컬러코드에 배경색을 입혀서 한 눈에 볼 수 있게 해주는 익스텐션이다.

사실 나의 경우에는 눈이 아파서 잘 안쓰는 경우도 있으나, 동료 퍼블리셔들이 유용하게 쓰고 있는 것을 종봉 본다.

 

 

Colorize 익스텐션

 

 

 

 

5️⃣ Auto Rename Tag(여는 태그와 닫는 태그를 동시에 수정)

---

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag - Visual Studio Marketplace

 

 

태그 이름을 수정할 때 <> 안의 여는 태그와 </> 안의 닫는 태그를 동시에 수정할 수 있는 익스텐션이다. 

간혹 이미 작성한 코드 내에서 뭔가 수정 및 추가 할 때 꼬이는 문제가 있어 예기치 못한 실수가 나올 수 있지만

그걸 감안하고서라도 쓸만한 익스텐션인 것 같긴 하다.

 

 

Auto Tag Rename 익스텐션 사용 예

 

 

 

 

6️⃣ htmltagwrap(블록 안의 내용을 태그로 감싸기 용이)

---

 

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

htmltagwrap - Visual Studio Marketplace

 

 

블록을 감쌀 때 번거로움 없이 한 번에 감싸주는 익스텐션이다.

작성된 텍스트나 태그를 또 한 번 감싸줘야 하는 상황이 온다면 위 아래로 코드를 써주거나

여닫는 코드 생성 후 그 안에 기존 내용을 다시 넣어줘야 하는 번거로움을 덜어준다.

 

 

htmltagwrap 익스텐션 데모 예

 

 

 

 

8️⃣ Image Preview(이미지에 마우스 올리면 프리뷰 띄워줌)

---

 

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

Image preview - Visual Studio Marketplace

 

 

이미지에 마우스를 올리면 무슨 이미지인지 프리뷰를 띄워준다.

이미지가 뭔지 기억이 나지 않을 때 확실히 도움을 준다.

 

 

Image Preview 익스텐션 사용 예

 

 

 

번외로..

 

1️⃣ 폰트 변경

---

 

VSCode에서 폰트를 변경하여 사용하면 굉장히 가독성이 좋다. 

실제로 많은 사람들이 폰트를 변경하여 사용하고 있으며 내가 쓰고 있는 폰트 하나를 추천하고자 한다.

 

https://www.jetbrains.com/lp/mono/

JetBrains Mono: A free and open source typeface for developers

 

위 링크에 들어가서 폰트 파일을 다운로드 받은 다음, Ctrl + , 눌러 설정창을 연다.

검색창에 font 라고 검색하면 나오는 리스트들 중, Font Family를 제어하는 입력창에 JetBrans Mono를 입력하면 된다.

원하는 곳에만 쓰면 된다. 난 터미널과 에디터에만 썼다. 추후 다른데가 필요하면 추가할 예정.

 

 

그리고 Ctrl + Shift + p를 눌러 settings json을 검색하면 나오는 리스트 3개 중 사용자 설정 열기를 클릭한다.

 

잘 활성화 되어 있는지 확인한다.

혹시 적용이 안된다면 VSCode를 재접속 하면 된다.

 

 

 

2️⃣ 주석 색상 변경

---

 

생각보다 주석 달 일이 많고, 주석을 봐야 할 일도 많다. 

기왕이면 눈에 잘 띄고 덜 아픈 색상이면 좋지 않을까? 하는 생각이다.

 

settings.json에 아래와 같은 구절을 추가한다.

 

"editor.tokenColorCustomizations": {
    "comments": "#eebb3e"
  },

 

컬러는 원하는 컬러로 변경하면 된다.

 

 

 

3️⃣ 탭 사이즈 변경

---

VSCode의 기본 탭 사이즈는 4 일 것이다. 

이는 Tab을 눌러서 들여쓰기를 할 때 어느정도의 여백을 띄울 것인가에 대한 기본 설정값 인데, 기본 4로 그냥 사용하게 되면

생각보다 넓은 영역을 차지해 깊이가 길어질수록 내 시야를 벗어나거나 원치 않는 줄바꿈이 될 수도 있다.

그렇다고 들여쓰기를 안할 수는 없으니, 이 여백을 줄여주도록 한다.

 

"editor.tabSize": 2

 

 

아래 사진은 내 설정의 일부이다.

설정 일부