본문 바로가기
기타

개발을 위한 VS Code Extension 추천 프로그램

by 기리의 개발로그 2023. 12. 15.

개발자를 위한 VS Code Extension 추천

Visual Studio Code를 사용하는 개발자들에게 유용한 Extension 몇가지를 알아보자.


Auto Rename Tag


HTML에서 여는 태그나 닫는 태그 중 한 가지만 수정을 해도 두 가지 동시에 수정이 된다.


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


입력태그만 입력해도 닫는 태그가 자동으로 완성된다.


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


Color Highlight


색을 지정할 때 rgb나 16진수(#F699CC) 등 색상코드로 입력하면 해당하는 색을 코드의 배경색으로 보여준다.


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


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


ESLint


Javscript 문법 오류가 있을 시 코드에 표시를 달아준다.


https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

 

ESLint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

marketplace.visualstudio.com


HTML CSS Support


CSS 파일에서 정의한 클래스나 id 값을 HTMl 파일에서 자동완선 기능을 제공한다.


https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

 

HTML CSS Support - Visual Studio Marketplace

Extension for Visual Studio Code - CSS Intellisense for HTML

marketplace.visualstudio.com


CSS Peek


HTML에서 작성된 클래스 값을 CSS 파일에서 바로 찾아갈 수 있는 기능을 제공한다.


https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

 

CSS Peek - Visual Studio Marketplace

Extension for Visual Studio Code - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

marketplace.visualstudio.com


REST Client


HTTP 요청을 보내고 그에 따른 응답을 확인할 수 있도록 도와준다.


https://marketplace.visualstudio.com/items?itemName=humao.rest-client

 

REST Client - Visual Studio Marketplace

Extension for Visual Studio Code - REST Client for Visual Studio Code

marketplace.visualstudio.com


HTML Snippets


HTML 코드 자동완성을 도와준다.


https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

 

HTML Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Full HTML tags including HTML5 Snippets

marketplace.visualstudio.com


JavaScript (ES6) code snippets


ES6를 포함한 자바스크립트 코드 자동완성을 도와준다.


https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

 

JavaScript (ES6) code snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax

marketplace.visualstudio.com


JS JSX Snippets


JSX 코드 자동완성을 도와준다.


https://marketplace.visualstudio.com/items?itemName=skyran.js-jsx-snippets

 

JS JSX Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Extensions for React, Redux in JS with babel and ES7 syntax

marketplace.visualstudio.com


Markdown All in One


마크다운을 편리하게 사용할 수 있도록 도와준다.


https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one4

 

Markdown All in One - Visual Studio Marketplace

Extension for Visual Studio Code - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

marketplace.visualstudio.com


Markdown Preview Enhanced


마크다운을 편리하게 사용할 수 있도록 도와준다.


https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

 

Markdown Preview Enhanced - Visual Studio Marketplace

Extension for Visual Studio Code - Markdown Preview Enhanced ported to vscode

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


vscode-icons


Visual Studio code의 Explorer 아이콘 테마이다.


https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

 

vscode-icons - Visual Studio Marketplace

Extension for Visual Studio Code - Icons for Visual Studio Code

marketplace.visualstudio.com


Prettier


개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해준다.


https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

 

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

marketplace.visualstudio.com


Extension Pack for Java


Java 개발을 위해 필요한 extension이다.https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

 

Reactjs code snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Code snippets for Reactjs development in ES6 syntax

marketplace.visualstudio.com


Extension Pack for Java


Java 개발을 위해 필요한 extension이다.


https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack

 

Extension Pack for Java - Visual Studio Marketplace

Extension for Visual Studio Code - Popular extensions for Java development that provides Java IntelliSense, debugging, testing, Maven/Gradle support, project management and more

marketplace.visualstudio.com


Spring Boot Dashboard


Java 개발을 위해 필요한 extension이다.


https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-spring-boot-dashboard

 

Spring Boot Dashboard - Visual Studio Marketplace

Extension for Visual Studio Code - Spring Boot Dashboard for VS Code

marketplace.visualstudio.com


Spring Boot Extension Pack


Spring 개발을 위해 필요한 extension이다.


https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack

 

Spring Boot Extension Pack - Visual Studio Marketplace

Extension for Visual Studio Code - A collection of extensions for developing Spring Boot applications

marketplace.visualstudio.com


Spring Boots Tools


Java 개발을 위해 필요한 extension이다.


https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-spring-boot

 

Spring Boot Tools - Visual Studio Marketplace

Extension for Visual Studio Code - Provides validation and content assist for Spring Boot `application.properties`, `application.yml` properties files. As well as Boot-specific support for `.java` files.

marketplace.visualstudio.com


vscode-styled-components


해당 스타일 코드를 직접 보여준다.


https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

 

vscode-styled-components - Visual Studio Marketplace

Extension for Visual Studio Code - Syntax highlighting for styled-components

marketplace.visualstudio.com


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


GitLens


git 이력을 확인하고 관리할 수있다.


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


ES7+ React/Redux/React-Native snippets


react/redux 개발을 위한 통합 extension이다.


https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

 

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

marketplace.visualstudio.com

반응형

'기타' 카테고리의 다른 글

개발자를 위한 무료 개발 툴  (41) 2022.03.21

댓글