[ VSCode ] Visual Studio Code 유용한 확장팩 설치(추천 플러그인 설치)

[ VSCode ] Visual Studio Code 유용한 확장팩 설치(추천 플러그인 설치)

안녕하세요. 갓대희 입니다. 이번 포스팅에선 Visual Studio Code의 몇가지 유용한 확장팩, 추천 플러그인을 설치 해보려 합니다. :- ) 

 

 

 

 

1) Reactjs code snippets

 - 리액트에서 자주 사용하는 코드  뭉치들을 자동 완성 해주는 플러그인

 

 - React 관련 템플릿을 단축키로 작성할 수 있게 된다.

 - 자주 사용하는 키워드는 아래 표와 같고, rcc를 입력하여 선택하면 우측의 기본 클래스형 컴포넌트를 만들어 주게 된다.

trigger	content
rcc	클래스 컴포넌트 생성
rrc	클래스 컴포넌트와 react-redux 리덕스를 연결하여 생성
rcjc	import와 export 없이 클래스 컴포넌트 생성
rwwd	import 없이 클래스 컴포넌트 생성
rsc	화살표 함수형 컴포넌트 생성
rsf	함수형 컴포넌트 생성

 

 

2) Live Server

 - 현재 작성하고 있는 코드를 실시간으로 보여주는 기능.

 - 저장(Ctrl + S || Cmd + S)이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항을 반영해 준다.

 

3) Prettier

 - 참고 : https://prettier.io/

 - 줄바꿈등의 스타일을 자동으로 변환해준다.

 - 이클립스의 코드 포매터와 비슷하다.

 

4) Auto Rename Tag

 - 태그의 이름을 변경 시 열고 닫는 태그를 한번에 같이 수정해 준다.

 

5) Compile Hero Pro

 - 타입스크립트를 자바스크립트로 컴파일 할때 터미널에서 수동으로 하였던 경험이 있을 것 이다. 

 - 단순히 저장만 하거나 (Ctrl + s),  컴파일할 부분을 블럭 지정하여 단축키(ctrl + shift  +  s )를 입력하면 컴파일 된 결과를 볼 수 있다.

1) 파일 오픈

 - less, sass, scss, styl, ts, tsx, jade, pug or js file.

 

2) 설정 변경

 - Compile Hero: On/Off will appear in the status bar at the bottom right corner, please turn on the Compile Hero: On switch when using ↓

 

3) 저장 Compile on save (ctrl+s) ↓

Or select Compile Files on right-click menu item, it will automatically compile the files to the dist directory.

 

 - 또는 영역 지정 후 단축키

You can also select part of the code and use the Compile Selected menu item or shortcut key (ctrl+shift+s) to perform partial compilation of the code block.

 

 - 자세한 설정 관련 내용은 하기 link를 참고 하자.

https://github.com/Wscats/compile-hero/blob/master/README.md

 

6) REST Client

 - 자세한 사용법 참고 : https://marketplace.visualstudio.com/items?itemName=humao.rest-client

5.1) .http / .rest 확장자로 파일을 생성하여 준다.

5.2) api호출 하나씩 "###"으로 구분하면 되고, SendRequest라는 텍스트가 자동 생성 된다.

5.3) ex)

### GET 사용
Send Request
GET https://google.co.kr HTTP/1.1

### POST Sample
Send Request
POST https://test.com/test HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "cnt": 3
}

 

 

 

7) Doxygen Documentation Generator

 - Doxygen 주석을 편하게 생성할 수 있다. ( 자바 개발자들에겐 익숙할 수 있겠다. )

 - 작동 방식 참고 https://github.com/cschlosser/doxdocgen/blob/master/CHANGELOG.md#alignment

ex) /** + Enter 입력

 

8) Git history

 - 특정 파일의 커밋 히스토리를 보고싶을때 사용 한다.

 - 마우스 우클릭 > Git : View file History 를 클릭하면 해당 파일, 라인에 대한 커밋 히스토리가 화면에 표시된다.

 

9) Git Graph

 - 커밋 로그들을 그래프 형태로 직관적으로 볼 수 있다.

 

10) Git Lens

 - 코드의 특정 단락, 라인등에 커밋 관련 정보를 흐릿하게 노출해 주며, 마우스 커서의 위치를 이동하면 자세한 정보를 보여준다.

 

11) Commit Message Editor

 - https://marketplace.visualstudio.com/items?itemName=adam-bender.commit-message-editor&ssr=false

 

 - VSCode의 내장된 커밋 메세지 입력란은 한칸으로 되어있다.

 

 - 해당 extention을 설치 하여 제목, 내용 등을 길고 여러줄로 작성할 수 있게 하여 준다.

 

12) Gitmoji

 - https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode

 

 - git 커밋 메세지에 이모지를 사용할 수 있게 하는 플러그인 이다.

 

 

11) Tabnine AI

 - AI를 통해 코드 자동완성 기능을 조정해 준다.

 

 - 하루 제한량이 있고, Pro or Enterpise 라이센스를 구입해야 무제한 이다.

 

12) IntelliCode

 - 위의 tapnine ai와 유사하게 코드 추천 완성 기능을 지원해준다.

 

13) Error Lens

 - 코드에 에러가 있을 경우 해당 줄 끝, Status Bar 등에 강조하여 표시 해 준다.

 

14) Indentation Level Movement

 - window( ctrl + 위, 아래 ) / mac ( alt + 위, 아래 ) 기준 다르긴 하지만.

   코드를 위아래로 이동시키기에 용이 하다.

 

15) Colorful Comments

 - 주석을 좀더 예쁘고, 직관적으로 볼 수 있게 해 준다.

 

With this Extension, you will be able to categorise your cody by special colour into:

• Red (!)
• Blue (?)
• Green (*)
• Yellow (^)
• Pink (&)
• Purple (~)
• Mustard (todo)
• Grey (//)
• Commented out Code can also be Styled to make it Clear the Code shouldn't be There.
• Any Other Comment Styles you'd like can be Specified in the Settings.

 

 - 커스텀 하게 설정도 가능 하다. 하기 문서 참고

https://github.com/Parth2031/Colorful-Comments