Visual Studio Code(VS Code) 설정하기

•  웹퍼블리셔 VSCode 설정하기

‣ VS Code 확장프로그램 추천

안녕하세요!

작업하면서 사용하고 있는 VS Code 확장프로그램에 대해 간략하게 설명하려고 합니다.

새로운 환경에 가서 PC를 설정하다 보면 VS Code부터 새로 설치를 했는데요.

그때마다 어떤 걸 사용해 왔었는지 기억이 잘 나지 않더라고요😂

저도 보면서 확장프로그램설치하고 새로 설치하시는 분들에게도 소소한 도움이 되길 바라면서 글을 작성합니다.

 

1. 검색엔진에 VS Code를 검색하시면 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

이렇게 사이트가 나옵니다.

여기서 프로그램 PC에 맞게 설치하시면 됩니다.

 

2. 설치가 완료됐다면, 확장프로그램을 설치하셔야 합니다.

 

□ VS Code를 실행하시면 왼편에

확장프로그램 버튼

이런 모양을 클릭하시면 됩니다.

그러면 Search 창이 위쪽으로 나오는데 그쪽에 소개해드리는 확장프로그램 이름을 검색하시게 되면 나옵니다.

검색결과 내용을 클릭하면 install 버튼이 있는데 그 부분만 눌러주면 설치완료!

 

□ Auto Close Tag

Auto Close Tag

 

이 확장프로그램은 입력 태그만 입력해도 닫는 태그가 자동으로 작성이 되는 확장 프로그램입니다.

코딩할 때 일일이 입력하지 않아도 되니 편해서 꼭 사용 중입니다. 

(저는 이미 설치해서 Uninstall 버튼이라고 표시가 되는데 새로 설치하시는 분들은 install이라고 버튼이 표시되어 있을 거예요!) 

 

□ Auto Rename Tag

Auto Rename Tag

html을 작성할 때 태그를 변경해야 되는 경우가 있는데, 이 확장프로그램을 설치하면 여는 태그나, 닫는 태그 둘 중 하나만 수정해도 두 가지 동시에 수정되는 프로그램입니다. 유용하니 설치해서 사용해 보세요!

 

□ Color Highlight

Color Highlight

이 확장 프로그램은 컬러 코드값을 입력하면 그에 맞는 색상을 뒷배경으로 해서 보여주는 프로그램입니다.

저는 눈으로 바로바로 확인되는 부분이 편하더라고요.

 

□ indent-rainbow

indent-rainbow

이 확장 프로그램은 각 단계마다 네 가지 다른 색상을 번갈아 가며 텍스트 앞의 들여 쓰기에 색상을 지정해 주는 프로그램입니다. 

 

□ Material Icon Theme

Material Icon Theme

VS Code 기본 파일아이콘은 이쁘지 않은데, 가독성도 좀 떨어지는 편이고요!

이 확장 프로그램을 설치하시면 가동성 좋게 변경할 수 있는 아이콘테마 프로그램이에요. 

필수 프로그램은 아니지만 가독성이 좋아지니 한번 사용하시는 것도 추천드려요!

 

□ Night Owl

Night Owl

눈이 좀 편하라고 설치한 확장프로그램이에요. 

설명에는 올빼미족을 위한 테마라고 되어있어요😆 어두운 환경에서 작업하기 편하게 도와주는 프로그램에요!

 

□ open in browser

open in browser

Alt + B를 열어서 사용하고 있는 기본 브라우저에서 현재 코딩 파일을 볼 수 있게 하는 확장 프로그램입니다.

전 이거 유용하게 사용 중이에요!

 

□ Prettier

Prettier

코드 포맷터입니다.

코드를 구문 분석하고 최대 줄 길이를 고려하여 필요한 경우 코드를 래핑 하는 자체 규칙으로 다시 일관된 스타일을 적용하는 확장프로그램이에요. 이건 대부분 필수로 설치하고 사용하시는 걸로 알고 있어요!

 

□ Stylelint

Stylelint

Stylelint는 css, scss, less 등 style 구문을 린팅하는 확장 프로그램입니다.

 

 

저는 이렇게 기본적으로 사용 중이고, 프레임워크 기반으로 작업을 할 때는 그에 필요한 확장프로그램을 추가로 설치해서 사용 중입니다.

 

 

 

읽어주셔서 감사합니다(●'◡'●)