개발하는데 유용한 VS (Visual Studio) Code 확장팩 (Extensions)

# 개발하는데 유용한 VS (Visual Studio) Code 확장팩 (Extension) 참조한 블로그 글: ## PH

• 2024-08-03 : First posting.

## TOC ## 확장팩 까는 법 (How to Install Extension) 다음과 같이 side tab 에 Extensions tab 이 있음. 단축키: Ctrl+Shift+X. 깔고자 하는 Extention 을 검색한 후 install 을 누르면 설치 완료.

확장팩 까는 법 (How to Install Extension)

### 여러 컴퓨터에서 설정과 확장팩 sync 맞추기

VS code 스타일 및 Settings and Extensions Sync 맞추기

## 코딩시간을 절반으로 줄여주는 VSCode 9개 기능 by 코딩애플

## 편리하게 개발할 수 있는 확장팩 VS Code 에서 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩 ### Project Manager VS Code 는 사실 개발환경이라기보단 편집기에 가까워서, 내가 다른 프로젝트로 변환하려면

다른 프로젝트로 변경하려면 Open Folder 를 매번 눌러 해당 프로젝트로 이동해야 한다.

Project Manager 를 이용하면 여러 프로젝트의 폴더를 하나에 묶어서 표현할 수 있고, 프로젝트간 toggle 이 쉬워진다.

Project Manager: Save Project

### Inline Parameters for VSCode 함수의 parameter 들을 표현해 준다는거 같은데, 잘 동작 안함. Comment 로 parameter description 을 준 것만 나타내 주는건가? 암튼 맘엔 안듬. ### Live Server

Live Server: Local file 들을 Live Server 로 deploy 해서 path 가 /login, /signup 이런 것까지 잘 동작하도록 만들어준다.

### Tabnine: AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more AI coding helper 라는데 써봐야 뭐가 좋은지 알것 같아서 설명은 잠시 보류. 사이트에 가입해야만 쓸 수 있고, 무료 버전은 하루 제한량이 있는듯. 써보니 의도하지 않은 방향으로 코드를 자꾸 추천해줘서 지웠음. 개인적으론 별로인듯 이런 AI 툴들.

Autogenerate high-quality code as you type

Instantly turn plain text into working code

Eliminate repetitive tasks with autofill

#### IntelliCode Tabnine 과 마찬기지로 코드 자동완성 시켜주는 가벼운 AI 라는데, 같이 써도 충돌은 없는건지 같이 써도 괜찮단다. 기능이 단순하고, 무료. 이것도 개인적으론 비추천. 내가 짜고싶은대로 짜야하는데, 자꾸 아주 미세하게나마 다른 방향으로 코드를 유도한다는 생각이...



### Code Runner 자바 (Java), C, 파이썬 (Python) 등 다양한 언어를 컴파일 실행하도록 지원해 준다. 당연히 JS (JavaScript) 도 바로 바로 실행해서 결과값을 확인할 수 있단다.

Code Runner: Python Example

### Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro SCSS나 타입스크립트를 CSS나 자바스크립트로 컴파일 할때 대부분 터미널에서 컴파일 작업을 수동으로 해왔을 것이다. 이 익스텐션은 단순히 저장만 해주면 알아서 바로 컴파일 되는 엄청난 편리함을 제공한다. Sass/Less/Stylus/Pug/Jade/Typescript/Javascript 를 지원한다. 단점으로는, 만일 컴파일 오류가 있을때 에러메세지 보기가 약간 힘들단다.



그런데 TypeScript 에서 const 변수는 JavaScript 에서도 const 로 변환되야 하는거 아닌가? ㅡ,.ㅡ;;; 못써먹을수도? 아님 TypeScript 설정을 바꾸면 될라나? ### Error Lens 코드에 에러가 있을 경우 해당 줄에 오버레이 형식으로 띄워준다. 오타, 괄호 실수, 라이브러리 미참조 등 왠만한 오류는 컴파일이나 실행해보기 전에 이걸로 잡을 수 있단다. ### Bracket Peek 해당 태그나, 중괄호가 어느 코드의 중괄호인지, 상단에 미리보기를 띄워준다. 직접 스크롤을 올려서 확인하지않고, 바로바로 알수있어서, 소소하면서도 편한 기능이다. html, php, js, java, c, css 등 많은 언어를 지원한다.

어느 DOM elements 의 자식들인지, 어떤 CSS selector 의 style 인지 보기 쉽게 만들어준다.

### Surround

제어문 블럭을 자동완성해주는 아주 편한 도구이다. 만일 어느 문장에 try catch 문을 넣고싶다면, 일일히 타이핑 하지않고 간단한 조작으로 완성 할 수 있다. 코드를 선택하고 ctrl+shift+T 를 누르고 제어문을 선택하면 자동완성 된다. ## RRA

1. 💽 개발하는데 유용한 VSCode 확장팩 - 유료 IDE 못지않게, 2022-06-19
2. 💽 HTML / CSS 코딩하는데 유용한 VSCode 확장팩, 2022-06-18