반응형

Visual Studio Code Extension

 

Korean(사용법) Language (Microsoft)

VS Code 한글 패치입니다. (Command + Shift + p)를 눌러 "명령 팔레트"가 나오면 "Configure Display Language"를 입력한 후 "ko"를 선택하여 Restart 해주면 UI언어가 한글로 바뀌게 됩니다.

Korean_Language_Pack
Korean Language Pack

Code Spell Checker (Street Side Software)

Typescript, JavaScript, Text 등 영문 오타를 수정해줍니다.

Code_Spell_Checker
Code Spell Checker

Korean Spell Checker VS Code (Yunseok)

최대 500자 한글 맞춤법 검사 및 교정해 줍니다.

작성된 한글 선택 후 Command + Shift + P 누르고 korean spell check를 입력하면 오른쪽 창에 검사 결과를 출력해줍니다.

작성된 한글을 선택 후 Command + Shift + P 누르고 korean spell fix를 입력하면 맞춤법을 바로 교정해줍니다.

Korean Spell Checker

Live Server (Ritwick Dey)

HTML 파일을 작성 후, 실시간 확인이 가능하도록 가상 서버를 구현해 브라우저에서 결과를 확인할 수 있습니다.

실행: Command + L, O (Command + L 누르고 다음으로 O를 누르면 됩니다.)

중단: Command + L, C (Command + L 누르고 다음으로 C를 누르면 됩니다.)

live_server
Live Server

TabOut (Albert Romkes)

VS Code에서 코드를 쓰다 보면 따옴표"", 괄호(), 콜론:, 세미콜론; 커서를 이동해줘야 하는 불편함이 있습니다. TabOut을 설치하고 Tab키만 누르면 방향키(→) 기능 역할을 해줘서 효율을 높여줍니다. 단축키: Tab

TabOut
TabOut

Auto Rename Tag (Jun Han)

태그를 변경하면 자동으로 닫는 태그도 변경됩니다.

auto_rename_tag
Auto Rename Tag

Snippets (Binary Bytes)

코드를 다 쓰지 않아도 자동 완성해주니, 작업 속도 향상으로 효율이 좋습니다. (HTML, CSS, JavaScript)

snippets
Snippets

Indent-rainbow (oderwat)

코드의 들여 쓰기 부분에 다양한 색상층으로 표현해주므로 가독성을 높여줍니다.

indent_rainbow
indent-rainbow

Bracket Pair Colorizer2 (CoenraadS)

괄호에 색상을 입혀 범위가 헷갈리지 않게 구분해줍니다.

Bracket_Pair_Colorizer2
Bracket Pair Colorizer2 

VS Code의 내장 설정 기능으로 Bracket Pair Colorizer2 설치 안 해도 사용할 수 있는 방법:

VS Code 설정에서 setting을 검색하고 json 파일 열고 아래 코드 2줄 추가 후 재실행하면 됩니다.

"editor.bracketPairColorization.enabled": true, 
"editor.guides.bracketPairs":"active",

 

Prettier-Code formatter (Prettier)

코드를 엉망진창으로 작성해도 저장을 누르는 순간 코드들을 자동 정렬해줍니다. 

Prettier_Code_formatter
Prettier Code formatter

HTML to CSS autocompletion (solnurkarim)

HTML에서 입력한 클래스명을 CSS에서 입력할 때 자동 완성시켜주는 확장 기능입니다.

HTML에서 작성하고 저장해야 CSS에서 자동 완성시켜 줍니다.

HTML_to_CSS_autocompletion
HTML to CSS autocompletion

CSS Peek (Pranay Prakash)

HTML에 적용된 CSS 코드로 찾아줍니다.

Command + 클릭하면 CSS 코드로 이동됩니다.

CSS_Peek
CSS Peek

Git Lens (GitKraken)

VS Code에 내장된 Git 기능을 더 똑똑하게 활용할 수 있습니다. 누가 작성한 코드인지 시각화해주고, Git 레포지토리를 더 원활하게 탐색할 수 도 있으며, 코드 비교도 한눈에 할 수 있는 기능이 제공됩니다.

GitLens
GitLens

Material Icon Theme (Philipp Kief)

확장자를 아이콘 형태로 보여줍니다. 설치 후 Extension에서 <파일 아이콘 테마 설정>을 클릭해 주면 됩니다.

Material_Icon_Theme
Material Icon Theme

Monokai Dark Soda (Adam Caviness)

입문 초기부터 사용해오던 Color Theme입니다. 

Molokai_Dark_Soda
Molokai Dark Soda

Power Mode (Cody Hoover)

코드 타이핑 시 이펙트를 보여주는 Extension입니다. 지루함을 줄여주는??

Power_Mode
Power Mode

Code Runner (Jun Han)

자바스크립트에서 원하는 부분만 실행하고 싶을 때, 우선 코드를 저장 후 (Ctrl+S) 실행하고자 하는 부분을 선택하고, 오른쪽 위부분 (▷) 버튼을 누르면 출력됩니다.

코드 실행 : Ctrl + Option + N

실행 중단 : Ctrl + Option + M

Code_Runner
Code Runner

Visual Studio IntelliCode (Microsoft)

MS에서 만든 AI 기반의 자동 완성 추천 기능입니다. 현재 IntelliCode는 C#, C++, Python, TypeScript / JavaScript, Java, XAML을 지원하고 있습니다.

Visual_Studio_IntelliCode
Visual Studio IntelliCode

 

반응형