개발자라면 한 번쯤은 써본 VSCode!
VSCode를 본격적으로 사용하기에 앞서 유용한 확장 프로그램 몇 가지를 추천하고자 한다.
(개인적으로 추천하고자 하는 익스텐션은 주황색으로 표시했으니 참고 바랍니다.)
* tips)
확장 프로그램 검색 및 추가하기 위해서는
[Ctrl + Shift + x] 단축키를 눌러주거나, 좌측 메뉴에 블럭처럼 생긴걸 눌러주면 이동할 수 있다.
- Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag
marketplace.visualstudio.com
Auto Close Tag의 단짝태그
HTML에서 여는 태그나 닫는 태그 중 한 가지만 수정을 해도 두 가지 동시에 수정이 된다.
- Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Auto Close Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
marketplace.visualstudio.com
Auto Rename Tag와 함께 사용하는 유용한 플러그인이다. 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 입력태그만 입력하게 해 준다.
- Bracket Pair Colorizer 2
괄호 여러개가 겹쳐있는 경우에 어디가 어디로 연결되어 있는지 알기 힘들다. 그럴 때 사용하는 확장 플러그인으로 쌍이 되는 괄호에 맞춰서 색이 변하게 된다.
현재 커서의 위치가 어느 괄호 안에 있는지도 색으로 표시해준다.
-> VScode가 최신버전인지 확인하고 아래 설정에 들어가 "bracket" 이라고 검색해주면 내장된 기능을 사용할 수 있다고 한다!
- Color Highlight
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
Color Highlight - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight web colors in your editor
marketplace.visualstudio.com
색을 지정할 때 rgb나 16진수(#F699CC) 등 색상코드로 입력하면 해당하는 색을 코드의 배경색으로 보여준다.
CSS를 입히는 과정에서 현재 무슨 색으로 적용하였는지 바로바로 볼 수 있다.
- indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
indent-rainbow - Visual Studio Marketplace
Extension for Visual Studio Code - Makes indentation easier to read
marketplace.visualstudio.com
들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램이다.
- Highlight Matching Tag
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
Highlight Matching Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Highlights matching closing and opening tags
marketplace.visualstudio.com
페어 태그를 하이라이트 해주는 확장프로그램이다.
중첩되어 있거나 복잡한 태그 지옥을 분석할 때 유용하다.
- Korean Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko
Korean Language Pack for Visual Studio Code - Visual Studio Marketplace
Extension for Visual Studio Code - Language pack extension for Korean
marketplace.visualstudio.com
필요시 한국어 팩을 설치해 한국어로 설정할 수 있다.
- Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code
marketplace.visualstudio.com
아이콘 테마를 설정할수 있다. 머티리얼 외에도 많은 테마가 있으니 취향에 맞게 선택하면 된다.
- Image Preview
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview
Image preview - Visual Studio Marketplace
Extension for Visual Studio Code - Shows image preview in the gutter and on hover
marketplace.visualstudio.com
이미지 URL 코드에 마우스를 올려놓으면 미리보기 이미지를 제공하는 확장 프로그램이다.
- Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live Server - Visual Studio Marketplace
Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages
marketplace.visualstudio.com
웹 개발을 한다면 정말 필수적으로 설치해야하는 확장프로그램이다.
플러그인 설치를 하게 되면 VSCode 우측 하단에 Go Live라는 버튼이 생기는데 이 버튼을 눌러주면, 현재 코딩을 브라우저에서 바로 확인할 수 있다.
- Live Preview
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
Live Preview - Visual Studio Marketplace
Extension for Visual Studio Code - Hosts a local server in your workspace for you to preview your webpages on.
marketplace.visualstudio.com
HTML을 작성하며 확인하기 위해 빈번하게 브라우저를 켜지 않고 VScode 프로그램 자체에서 라이브 화면을 볼수 있다.
- Active File In StatusBar
https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar
Active File In StatusBar - Visual Studio Marketplace
Extension for Visual Studio Code - Add statusbar entry to show path for currently active file.
marketplace.visualstudio.com
현재 작업중인 파일의 경로를 상태표시줄에 출력
- CSS Variable Autocomplete
https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
CSS Variable Autocomplete - Visual Studio Marketplace
Extension for Visual Studio Code - Autocomplete CSS Variable support CSS, SCSS, LESS, PostCSS, VueJS, ReactJS and more
marketplace.visualstudio.com
CSS 변수에 대한 자동 완성 기능을 제공, 모든 css와 유사한 파일(SASS, LESS, CSS 지원)을 스캔하고 모든 변수에 대해 자동 완성 시킨다.
- GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
GitLens — Git supercharged - Visual Studio Marketplace
Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu
marketplace.visualstudio.com
코드의 특정 단락이나 라인에 해당 내용이 언제, 어떤 사람에 의해 작성된 내역인지 커밋 정보를 흐린 글씨로 자동 표시. 코드상에 커서를 올릴때 마다 확인 가능하다.
또한, 코드 작성 중 바로 저장소를 탐색 및 비교도 할 수 있다.
- IntelliCode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
IntelliCode - Visual Studio Marketplace
Extension for Visual Studio Code - AI-assisted development
marketplace.visualstudio.com
코드 추천 완성 기능
개발자가 IDE 에디터에 코드를 입력 중인 해당 행에 가장 알맞은 어플리케이션 프로그램 인터페이스 (API) 를 추천해줍니다. 스마트폰 키보드 앱의 자동완성 단어 추천기능과 흡사한 기능
- Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Path Intellisense - Visual Studio Marketplace
Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames
marketplace.visualstudio.com
파일명 자동완성을 지원하는 익스텐션.
파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주며, 이를 선택해서 지정할 수 있는 확장 플러그인
이미지 태그 경로나 CSS 배경 이미지 경로를 찾아갈 때 매우 편리하다.
- Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Code Spell Checker - Visual Studio Marketplace
Extension for Visual Studio Code - Spelling checker for source code
marketplace.visualstudio.com
code spell checker 란 코딩 할 때 오타를 방지하는 에디터 플러그인이다.
Reference
https://velog.io/@kimheewon/%EB%82%B4%EA%B0%80-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-VS-code-%ED%99%95%EC%9E%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8
https://mine-it-record.tistory.com/498https://cheershennah.tistory.com/m/131