상황

• 여러 테스트 파일을 만드는데, 기본적으로 작성해야 하는 틀이 있다
• 기본 틀이 되는 코드를 scaffold.test.ts 파일로 만들어서 내용을 복사해서 사용하거나, 복사본을 만들면서 새로운 테스트 파일들을 생성했다
• 반복하다 보니까 이마저도 불편했다
• 그러다가 커스텀 스니펫을 만들기로 한다

목표

1
2
3
4
5
6
7
8
9

/**
 * problem
 */

describe('id', () => {
  test('should ', () => {
    expect(solution(prams)).toEqual(er);
  });
});

• 내 목표는 te를 입력하면 내가 등록한 스니펫을 통해 위 코드를 완성시킬 것이다

스니펫 만들기

• 상단바에서
• File > Preferences > User Snippets 을 선택한다

• 어떤 언어에서 만들 것인지 선택한다
• 나는 타입스크립트에서 사용할 것이다
• 그러면 %userprofile%\AppData\Roaming\Code\User\snippets\typescript.json이라는 파일이 생성되고
• 설명과 예제가 나와있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "cotejs test": {
    "prefix": "te",
    "body": [
      "/**",
      "* ${1:problem}",
      "*/",
      "",
      "describe('${2:id}', () => {",
      "$0",
      "  test('should ', () => {",
      "    expect(solution(${3:prams})).toEqual(er);",
      "  });",
      "});"
    ],
    "description": "base"
  }
}

• prefix ; 나는 te로 설정했다. 스니펫이 어떤 문자열에 추천될지 설정하는 곳이다
• body ; 내가 완성시키고 싶은 스니펫을 등록한다. 줄 바꿈을 기준으로 배열로 쪼개 줘야 한다
• description ; 스니펫에 대한 설명을 적는다

• 특히 자동 완성할 때 tab를 누르면 커서가 원하는 순서로 이동하게 할 수 있다
• $1, $2, $3,..., $n, $0을 통해서 가능하다
• 각 커서에 기본값을 추가하고 싶으면 ${1:one} 이런 식으로 가능하다
• $0은 마지막 커서 위치를 설정할 수 있다

참고

• https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

상황

• 기존에 Visual Studio Code Commitizen Support 확장 도구를 사용하고 있었다
• 그런데 커밋 body에 적는 내용이 어째선지 반영되지 않았다…
• 관련해서 구글링을 해봤는데 도움되는 내용을 찾지 못했다
• 그러다가 다른 확장도구를 발견했다

Conventional Commits

• Conventional Commits이라는 확장도구이다
• 사용법은 Commitizen과 동일하다
• 이 확장도구를 사용하면 body(description)가 정상적으로 등록된다!

참고

• https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits
• https://github.com/vivaxy/vscode-conventional-commits

• styled-components를 사용하는데, 구문 강조가 없어서 확장 도구를 살펴보았다
• vscode-styled-components를 사용하면 하이라이트 및 스니펫을 사용이 가능하다

참고

• https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

• F1 > File: Save without Formatting

• format on save 를 사용할 때,

• 크기가 큰 json 파일이 있을 수 있다

• 처음에는 // prettier-ignore을 최상단에 두어서 포맷팅 하지 않게 하였는데
• 주석을 넣으면 json파일을 읽지 못하게 되었다
• 그래서 명령 팔레트 열고 save 쳐보니까 포맷팅 없이 저장하는 방법이 있었다!

참고

• 특정 라인 prettier-ignore
• https://chinsun9.github.io/2020/11/24/prettier-ignore-line/

• vscode 관련 글을 여럿 썼는데, 검색해서 찾기에 조각조각인 내용들이 있어
• 하나의 글에 정리하려고 한다

cli

1
2
3
4
5

# 현재 디렉터리에서 code 열기
code .

# 현재 디렉터리를 vscode현재창에서 열기
code . -r

단축키

• ⭐F1 ; show all commands ; 명령 팔레트 열기
• ⭐ctrl p ; go to file ; 파일 열기
• ⭐ctrl alft arrow ; move editor into next group ; 분할창 이동
• ⭐F2 ; rename symbol ; 변수명 변경
• ⭐ctrl shift \ ; go to bracket ; 괄호로 이동
• ⭐ctrl shift r ; refactor ; 리팩토링
• ⭐shift alt rifhtarrow ; expand selection ; 확장 선택
• ⭐shift alt leftarrow ; shrink selection ; 축소 선택
• ⭐shift alt i ; add cursors to line ends ; 선택영역의 라인마다 개별 커서
• ⭐ctrl rightarrow ; cursor word end right ; 다음 단어로 이동
• ⭐ctrl leftarrow ; cursor word left ; 이전 단어로 이동
• ⭐ctrl shift v ; markdown preview ; 마크다운 미리보기
• ⭐ctrl d ; add selection to next find match ; 현재 커서와 동일한 키워드들을 찾아서 선택
• ⭐F12 ; go to definition ; 선언부로이동
• ⭐ctrl leftclick ; go to definition ; 선언부로이동
• alt F12 ; peek definition / peek references ; 선언, 참조 보기
• ctrl 0 ; focus into side bar ; 사이드바 포커스
• ctrl 1 ; focus editor group ; 에디터 포커스
• ctrl shift . ; focus breadcrumbs ; 브레드크럼 포커스
• ctrl t ; go to symbol in workspace ; 심볼로 바로가기 (범위 ; 워크스페이스 전체)
• ctrl shift o ; go to symbol in editor ; 심볼로 바로가기 (범위 ; 현재 포커스된 파일)
• ctrl ` ; toggle terminal ; 터미널뷰 토글
• ctrl g ; go to line/colum ; 커서이동 ; 라인번호,칼럼번호

확장도구

• ⭐ prettier ; 코드 포매터

• ⭐ eslint ; 린트

• ⭐ shell-launcher ; 여러 터미널 구성

• ⭐ code-settings-sync ; vscode setting 클라우드 저장

• ⭐ JavaScript (ES6) code snippets ; 코드 스니펫, 자동완성 도구

• ⭐ TabOut ; 탭키로 괄호 탈출

• vscode-pandoc ; md to word

• live share ; 실시간 멀티유저 코드 편집

• vscode-sql-formatter ; sql 포매터

• ascii tree generator ; 디렉터리 트리 스트링 생성

• auto rename tag ; html 태그 자동 리네임

• bracket pair colorizer ; 괄호색 구분

• indent-rainbow ; 들여쓰기 색 구분

• ⭐ live server

• ⭐ material icon theme

• ⭐ remote - ssh

• path intellisense

• rest client

1
2

cd project
code .

• vscode 내부 터미널에서 cd 명령을 통해 다른 폴더로 이동한다
• 해당 폴더를 code .으로 열 수 있다
• 이 경우에는 새창으로 해당 폴더가 열린다

1

code . -r

• -r옵션을 붙여주면 현재 창을 통해 열리게 된다
• 이 옵션을 자주 쓸 것 같다

참고

• https://code.visualstudio.com/docs/editor/command-line#_core-cli-options

• markdown을 word파일로 예쁘게 만들어준다
• 목차까지 자동생성되니 아주 좋다

• 참고 ; 나는 pdf로는 안 만들어져서 word(docx)로 변환 후에 word 열어서 pdf로 저장하는 방식으로 한다

사용법

• F1 > Pandoc Render > docx
• 해당 마크다운 파일과 같은 경로에 아웃풋(docx)가 생성된다

설치하기

• 확장도구만 깔고 왜 안돼! 하고있엇다

• 2가지를 설치해야한다

• 확장도구 + pandoc

• https://pandoc.org/installing.html
• 위 링크로 들어가 인스톨러를 다운받고 실행해 pandoc을 설치한다

• https://marketplace.visualstudio.com/items?itemName=DougFinke.vscode-pandoc
• vscode를 열고 vscode-pandoc 확장도구를 설치한다

참고

• https://pandoc.org/installing.html
• https://marketplace.visualstudio.com/items?itemName=DougFinke.vscode-pandoc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
  // ...
  "shellLauncher.shells.windows": [
    {
      "shell": "C:\\Windows\\System32\\cmd.exe",
      "label": "cmd"
    },
    {
      "shell": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
      "label": "PowerShell"
    },
    {
      "shell": "C:\\Program Files\\Git\\bin\\bash.exe",
      "label": "Git bash"
    },
    {
      "shell": "C:\\Windows\\System32\\bash.exe",
      "label": "WSL Bash"
    }
  ]
}

• git bash 터미널을 vscode에 추가하고 싶을 때,
• shellLauncher 확장도구를 사용해서 위와 같이 각 터미널 실행파일 경로를 지정해주었다
• 특히 git bash 터미널 경로는 Git/bin/bash.exe이다

• 평소에 cmd로 사용하다가 bash 명령어를 쓰고 싶을 때나 git alias 추가할 때 사용한다
• F1 > Shell Launcher: Launch > git bash 선택하여 사용한다

참고

• https://marketplace.visualstudio.com/items?itemName=Tyriar.shell-launcher

• 같이 하나의 내용에 대해 프로그래밍 할 때, 킹갓 확장도구이다..
• 웹개발 같은경우 세션의 호스트가 데브 서버를 열면,
• 세션의 참가한 게스트들도 자동으로 포워딩이 되서
• 각자 localhost에서 웹을 확인해 볼 수 있다

• 수동으로도 포워드 해줄 수 있다
• 이제 같이 코딩할 친구만 있으면된다

참고

• https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

• 정렬하고싶은 라인을 선택하고
• F1 > sort Lines

참고

• https://medium.com/@adammlr/sort-css-properties-in-vscode-e59033c2c675
• css 정렬하는 방법을 알아보다가 알게되었다. 이 사람은 css를 알파벳순으로 정렬하는 방법을 알려준다