예전에는 개발을 진행할 때, Intellij 와 같은 유료 IDE(통합개발환경)을 사용하거나 Eclipse 정도의 선택지 밖에 없었지만,
마이크로소프트가 공개한 VSCode가 나오면서 확정성이 용이한 IDE로 대부분의 개발자들이 넘어온 듯 합니다.
VSCode는 정말 최고의 코드 편집기라고 보시면 됩니다.
VSCode의 가장 대표적인 장점은 확장성인데요.
개발을 시작하기전에 필요한 필수 익스텐션을 알아보도록 하겠습니다.
Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Auto Close Tag - Visual Studio Marketplace
Auto Close Tag Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does. Note From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP
marketplace.visualstudio.com
HTML 코드의 태그를 자동으로 닫아주는 익스텐션입니다.
VSCode에 통합된 터미널
https://code.visualstudio.com/docs/editor/integrated-terminal
Integrated Terminal in Visual Studio Code
Visual Studio Code has an integrated terminal so you can work in the shell of your choice without leaving the editor.
code.visualstudio.com
기본 VSCode에 통합되어 있는 터미널입니다.
Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Bracket Pair Colorizer - Visual Studio Marketplace
OverviewQ & ARating & Review Bracket Pair Colorizer This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. Screenshot: Features User defined matching characters By def
marketplace.visualstudio.com
코딩을 하다보면 괄호를 정말 많이 사용합니다. 함수(메소드), 클래스 등등...
클래스의 범위 함수(메소드)의 범위를 잘 알수 있게 해주는 익스텐션입니다.
ESLint / TSLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ESLint - Visual Studio Marketplace
OverviewQ & ARating & Review VS Code ESLint extension Integrates ESLint into VS Code. If you are new to ESLint check the documentation. The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the ex
marketplace.visualstudio.com
ESLint는 코드의 일관된 형식으로 코드를 자동변환 해주고는 녀석입니다.
Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Code Spell Checker - Visual Studio Marketplace
Spelling Checker for Visual Studio Code A basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low. Support Further Development Functiona
marketplace.visualstudio.com
영어가 모국어가 아닌 우리에게는 필수 익스텐션이겠죠?^^;
Setting Sync
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Settings Sync - Visual Studio Marketplace
Settings Sync Previously known as Visual Studio Code Settings Sync Support While being free and open source, if you find it useful, please consider supporting it by donating via PayPal or Open Collective. If you are using it in office as a team, please ask
marketplace.visualstudio.com
여러 컴퓨터를 오가면서 개발하시는 멀티플레이어 개발자분들은 모든 설정을 동기화 하시기 바랍니다~
Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Prettier - Code formatter - Visual Studio Marketplace
Prettier Formatter for Visual Studio Code Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Jav
marketplace.visualstudio.com
코드의 가독성을 높이기 위해서라면 이 익스텐션을 꼭 사용하세요.
Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Material Icon Theme - Visual Studio Marketplace
OverviewQ & ARating & Review Material Icon Theme Get the Material Design icons into your VS Code. File icons Folder icons Customize folder color You can change the color of the default folder icon using the command palette: or via user settings: "material-
marketplace.visualstudio.com
VSCode의 아이콘을 예쁘게 바꿔주는 익스텐션입니다. 시각적으로 안정감을 선호하시는 개발자들은 다 사용하는 듯 합니다~^^
Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Path Intellisense - Visual Studio Marketplace
OverviewQ & ARating & Review Path Intellisense Visual Studio Code plugin that autocompletes filenames. Installation In the command palette (cmd-shift-p) select Install Extension and choose Path Intellisense. Usage Node packages intellisense Use npm intelli
marketplace.visualstudio.com
코드 내에서 Path를 입력할 때 자동 후보를 제공하므로 정말 편합니다. 코드 인텔리센스 뿐아니라 패스도 인텔리센스하세요~
Browser Preview
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
Browser Preview - Visual Studio Marketplace
OverviewQ & ARating & Review Browser Preview for VS Code A real browser preview inside your editor that you can debug. Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered
marketplace.visualstudio.com
크롬도 많이 사용하시지만 자잘한 변경은 브라우저 프리뷰로 동시에 확인하면 편하겠죠?
생산성도 올라갑니다.
Debugger for Chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Debugger for Chrome - Visual Studio Marketplace
VS Code - Debugger for Chrome Debug your JavaScript code running in Google Chrome from VS Code. A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol. Supported features S
marketplace.visualstudio.com
크롬으로 디버깅할때 정말 도움이 많이 됩니다.
강추 익스텐션입니다.
JavaScript (ES6) code snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
JavaScript (ES6) code snippets - Visual Studio Marketplace
OverviewQ & ARating & Review JavaScript VS Code JavaScript (ES6) snippets This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript). Note All the snippets include the final semicolon ; T
marketplace.visualstudio.com
Javacript EX6를 지원하는 코드 스니핏입니다.
프레임워크 인 Reactjs, Vue와 Typescript 및 HTML을 지원합니다.
Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live Server - Visual Studio Marketplace
OverviewQ & ARating & Review [I'm sorry but I'm super busy now. If you want to be a maintainer of the project, please feel free to contact me! You've to be passionate about programming] Live Server Live Server loves 💘 your multi-root workspace Live Server
marketplace.visualstudio.com
서버를 구축할 필요없이 익스텐션으로 간단하게 서버를 만들 수 있습니다.
Quokka.js
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
Quokka.js - Visual Studio Marketplace
OverviewQ & ARating & Review
marketplace.visualstudio.com
코드를 실시간으로 체크해주는 익스텐션입니다.
Live Share
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
Live Share - Visual Studio Marketplace
Microsoft Visual Studio Live Share Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) s
marketplace.visualstudio.com
실시간으로 공동작업을 할 수 있게 해주는 익스텐션입니다.
실시간으로 내 코드나 다른 개발자의 코드를 공유할 수 있어서 협업에 정말 많은 도음울 줍니다.
GitHub
https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-github
GitHub - Visual Studio Marketplace
OverviewQ & ARating & Review vscode-github README This vscode extension integrates with GitHub. Note: I recommend to use GitHub Pull Requests instead of this, because most usecases are supported and there is a team at Microsoft/GitHub supporting developmen
marketplace.visualstudio.com
Github를 사용하신다면 당장 설치하세요~^^
GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
GitLens — Git supercharged - Visual Studio Marketplace
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful co
marketplace.visualstudio.com
이전 커밋의 변경사항을 쉽게 비교해주는 익스텐션입니다.
NPM
https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script
npm - Visual Studio Marketplace
OverviewQ & ARating & Review Node npm This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json. Notice The validation is done by running npm and i
marketplace.visualstudio.com
npm은 package.json의 파일을 관리해주는 익스텐션입니다.
package.json의 오류를 잡아주며 종속성을 알아서 체크해줍니다.
Beautify
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
Beautify - Visual Studio Marketplace
js-beautify for VS Code Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND hono
marketplace.visualstudio.com
위에서 소개했던 Prettier와 비슷한 기능인 코드 형식을 바로잡아주는 역할을 합니다.
Javascript, JSON, Sass, CSS 및 HTML을 지원합니다.
Live Sass Compiler
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
Live Sass Compiler - Visual Studio Marketplace
OverviewQ & ARating & Review Live Sass Compiler [If you like the extension, please leave a review, it puts a smile on my face.] [If you found any bug or if you have any suggestion, feel free to report or suggest me.] A VSCode Extension that help you to com
marketplace.visualstudio.com
CSS를 실시간으로 Sass로 컴파일 해주는 익스텐션입니다.
Mithril Emmet
https://marketplace.visualstudio.com/items?itemName=FallenMax.mithril-emmet
Mithril Emmet - Visual Studio Marketplace
OverviewQ & ARating & Review Note You DON'T need this extension to use Emmetin VS Code. Emmet (for HTML, CSS, JSX) is a built-in feature of VS Code. This extension is created to extend its feature for hyperscript or Mithril. Mithril Emmet support for VS Co
marketplace.visualstudio.com
Emmet을 사용하면 코딩 속도 향샹의 도움이 됩니다.
반복 타이핑을 줄일 수 있는 여러 기능을 제공합니다. 그 기능은 아래 도큐멘트를 참고하세요.
https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
vscode-icons - Visual Studio Marketplace
OverviewQ & ARating & Review vscode-icons Bring icons to your Visual Studio Code (minimum supported version: 1.31.1) Installation To install the extension just execute the following command: ext install vscode-icons Some people have reported that they cann
marketplace.visualstudio.com
프론트엔드 개발자를 위한 아이콘을 제공합니다.
Color Picker
https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color
Color Picker - Visual Studio Marketplace
Color Picker for VS Code Helper with GUI to generate color codes such as CSS color notations. And, a command Convert Color to change the color notation. A dialog box is shown by pressing Alt + C P keys or command Pick Color. If a cursor is positioned on a
marketplace.visualstudio.com
CSS에서 RGB색상 코드를 쉽게 선택할 수 있는 유용한 익스텐션입니다.
ES7 React/Redux/GraphQL/React-Native snippets
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio Marketplace
VS Code ES7 React/Redux/React-Native/JS snippets This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code Search command You can search through snippets with ES7 snippet search command which can be run w
marketplace.visualstudio.com
자바스크립의 각종 프레임워크를 지원하는 코드스니핏입니다.
REST Client
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
REST Client - Visual Studio Marketplace
REST Client REST Client allows you to send HTTP request and view the response in Visual Studio Code directly. Main Features Send/Cancel/Rerun HTTP request in editor and view response in a separate pane with syntax highlight Send GraphQL query and author Gr
marketplace.visualstudio.com
REST API를 테스트할 때 유용한 익스텐션입니다.
VSCode에는 정말 많은 익스텐션이 존재합니다.
마켓플레이스에서 검색하면 거의 없는게 없죠..
약간의 팁을 드리면 저는 다운로드 수가 가장 많은 익스텐션을 주로 사용합니다.
아무래도 많이 사용하는 것이 안정화 되어 있지 않을까하는 믿음으로 말이죠.
여러분들도 잘 활용하시면 좋겠네요.