VSCode 200% 활용하기

정유정 | yujeong choung·2023년 4월 23일

code snippet editor extension typescript vscode

200

기록

목록 보기

3/3

JavaScript 개발을 할 때 많이 사용되는 IDE(Integrated Development Environment, IDE)나 경량 에디터(lightweight editor)로 많이 언급되는 것에는 Visual Studio Code, WebStorm, Sublime Text, Atom등이 있다.

그 중에서도 유료로는 WebStorm이 무료로는 VScode가 가장 많이 고려되고 있는 옵션인데, 오늘은 팀내에도 틈틈이 공유 했던 VSCode를 좀 더 활용할 수 있는 방법들을 글로 적어보려고 한다.

VSCode에서 추론되는 Type 확인하기

요즘 Front 개발을 하다보면 TypeScript의 Type을 떼어 놓을 수 없는데 Type을 정의할 때 도움을 받을 수 있는 VSCode의 기능이 있다. 바로 Editor › Inlay Hints 이다.

Inlay Hints 설정하기

command + , 또는 Code ⇒ Preferences ⇒ Settings 을 눌러 Settings에서 설정할 수 있다.

settings에서 Inlay Hints를 검색하게 되면 아래와 같은 화면이 뜨게 되는데 여기서 자신이 원하는 옵션값들을 설정해주면 그에 따라 화면에서 VSCode에서 추론하는 타입들이 코드상에 뜨게된다.

JavaScript > 로 시작하는 옵션은 자바스크립트 파일인 경우 (.js, .jsx)에서 적용된다.
TypeScript > 로 시작하는 옵션은 타입스크립트 파일인 경우 (.ts, .tsx)에서 적용된다.

Inlay Hints 설정 결과

아래는 필자가 Inlay Hints 옵션들을 설정한 후에 코드 화면에서 볼 수 있는 타입들이다. 필자가 선언하지 않은 타입들임에도 추론된 타입들이 보여진다. (흰색 배경에 보라색 글씨)

Inlay Hints 색상 커스텀 하기

아마 처음 셋팅을 했을 때는 필자처럼 색이 보여지지 않고 회색배경에 흰색 글씨로 보여질 것이다. 이러한 색은 커스텀이 가능한데 이는 command + shift + p 를 눌러 settings.json에서 할 수 있다.

VSCode에서 Code Snippet 활용하기

다음으로는 코드를 작성할 때 틀을 만들어 줄 수 있는 Code Snippet을 활용해보려 한다.

스니펫이란?

스니펫(snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분
을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. - 위키백과

즉, 자동완성 기능과 비슷하다고 보면 된다!

Code Snippet 설정하기

1. Code > Preferences > Configure User Snippets

윈도우에서는 File > Preferences

2. 스니펫을 적용하고자 하는 범위설정

어떤 특정 언어를 사용할 때 사용하고 싶은 스니펫이 있다면 그 해당 언어를 골라주면 된다.
- react typescript ⇒ typescriptreact.json
- 모든 언어에 적용하고 싶다면 New Global Snippets file…
프로젝트 기준으로도 스니펫을 설정할 수 있다.
- New Snippets file for {프로젝트 이름}

3. 스니펫 설정 ✨

이제 실제 사용하고자 하는 스니펫을 저장해두면 되는데 처음봤을 때는 어려울 수 있으니 하나씩 뽀개보도록 하자!
- 참고로 이미 누군가가 만들어 둔 snippets을 마켓플레이스에서 다운로드 받고 싶다면 @category:"snippets” 라고 검색해보면 골라담을 수 있다.
아마 각각의 언어 파일로 들어가보면 아래와 같은 예시와 설명이 적혀 있을 것이다.
```
Example:
"Print to console": {
	"prefix": "log",
	"body": [
		"console.log('$1');",
		"$2"
	],
	"description": "Log output to console"
}
```
- Print to console: 스니펫 이름 (만약에 description이 없다면 해당 이름이 인텔리센스에 대신 뜨게 된다.
- prefix: 이 부분을 입력하여 snippet을 사용하게 된다.
- body: snippet을 치게 됐을 때 만들어질 내용을 채워넣는다.
  - body는 배열로 감싸게 되는데 각각의 인덱스가 한 문장을 의미한다.
  - body에는 유용한 문법이 존재한다.
    - ${1}, ${2}와 같은 variable 설정이 가능하고 해당 숫자 순서에 따라 tab을 누를때마다 커서가 자동으로 이동된다. $0은 무조건 마지막 탭으로 오게된다.
    - ${1}, ${2}에 placeholder를 넣어줄 수 있다. ⇒ ${1:name}, ${2:Name}
      
      어떻게 사용되는지 보여주기 위한 예시로 빨간 에러는 무시해주길 바란다! (placeholder가 존재하고 탭으로 커서가 자동으로 이동하면서 내용이 적혀지고 있다.)
    - 같은 variable이 여러군데 존재하면 한꺼번에 수정이 가능하다.
      - 예를들어, ${1}이 여러군데 있다고 한다면 ${1}로 만들어진 부분이 한꺼번에 선택되고 한꺼번에 수정된다.
    - VSCode에 미리 설정된 variable들도 존재한다.
      
      유용한 variable
    - TM_FILENAME_BASE: 확장자를 떼어낸 파일 이름을 가지고 온다.
    - TM_SELECTED_TEXT: text를 선택했다가 지우고 prefix를 치면 설정했던 variable칸에 해당 text가 들어갑니다!