상황

• 기존에 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를 알파벳순으로 정렬하는 방법을 알려준다

• css를 조금 더 아름답고 일관되게 작성해보자
• 기본 prettier 포맷팅을 사용하면 들여 쓰기를 예쁘게 고쳐준다
• 그런데 규칙 없이 나열된 속성들을 일관되게 포맷팅을 하고 싶은 욕구가 생겨서 찾아보았다
• 이런 것들은 직접 하는 것보다는 도구의 도움을 받는 게 훨씬 좋다고 생각한다

prettier-plugin-style-order

• (참고) 나는 scss로 작업했다

1
2
3
4

yarn add -D prettier-plugin-style-order

// postcss-scss 도 인스톨 하라고 메시지가 나옴
yarn add -D postcss-scss

• 이렇게 패키지를 설치하고,
• fonmat on save 옵션이 켜져 있다면,
• 아무 css 파일에서 저장을 해보면 순서가 아름답게 정렬되는 것을 알 수 있다
• 기존에 작업하던 것들을 일괄적으로 포맷팅 하고 싶다면
• npm script에 prettier 명령어로 원하는 경로의 css파일들을 지정해서 일괄 포맷팅 한다
• "cssSort": "prettier --write src/**/*.scss"

생각

• 이전에는 항상 css를 주먹구구 중에서도 주먹구구로 작성해왔는데,
• 그러지 않을 수 있겠다

• css property order, css property sort 이런 식으로 검색을 했었는데
• stylelint 등 여러 가지 css를 정렬하는 도구들이 있는 것 같았다
• 그런데 prettier을 사용하고 있기 때문에, 다른 거 쓰지 말고 prettier에서 플러그인을 깔아서 해결해 보자 하여 prettier-plugin-style-order를 설치해서 사용해 보았다

참고

• https://9elements.com/css-rule-order/
• https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style3.css
• https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/