내가 보려고 만든 vscode 세팅, git cli 모음

commit message 편집창 주석 문자 변경

• 커밋 메세지 컨벤션으로 첫글자에 # 을 써야할 경우,
  vi편집창에서 첫글자가 #일 경우 주석처리되기 때문에 다른 문자로 변경하기
• git config core.commentChar ";"

github 이슈와 커밋 메세지 연결

• 커밋 메세지에 # 이슈넘버 작성
• 다음 키워드와 함께라면, 커밋과 함께 이슈 close 할 수 있다.
  • close
  • closes
  • closed
  • fix
  • fixes
  • fixed
  • resolve
  • resolves
  • resolved

윈도우 vscode 에서 줄바꿈 LF로 설정

• 윈도우는 개행문자로 Carriage Return(CR)을 사용하고 유닉스에서는 Line Feed(LF)를 사용해서 협업할 때 충돌나는 경우가 있다.
• vscode settings.json 에서 "files.eol": "\n" 추가하기
• git에서도 커밋할때 자동으로 CRLF를 LF로 변환해주고, checkout할때 LF를 CRLF로 변환해주는 기능이 있다. git 설정하기
• 이 기능은 필요없으므로 꺼준다.
  • git config --global core.eol lf
  • git config --global core.autocrlf input

프로젝트 폴더 vscode title bar 색상 지정

• 여러개의 vscode 창을 띄워놓고 작업하다보면 헷갈릴 때가 있다.
• 프로젝트마다 title-bar 색상을 변경할 수 있다.
• workbench의 setting.json 파일에 추가하기

•   "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#116919",
        "titleBar.inactiveBackground": "#116919"
      },

vscode 파일 저장할 때 prettier 자동 포맷

• prettier 설정은 해줬는데 저장할 때 적용이 안 될 경우가 있다.
• jsx나 scss, markdown 사용할때도 settings.json에 적용하자

• // Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[markdown]": {
    "editor.formatOnSave": true
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "postcss": "css"
  },

git branch 생성과 이동 한번에

• git checkout -b 새로운브랜치명

git branch 삭제

• git branch -d 브랜치명 여기서 push하면 원격 브랜치도 삭제됨
• git push origin --delete 브랜치명 원격 브랜치 바로 삭제

git config 편집창 열기

• git config --global -e (mac)
• open ~/.gitconfig (window)

git diff 를 vscode 창으로 열기

• git config 편집창을 열어서, vscode 창에서 파일을 비교하는 명령어를 추가한다.

• [diff]
  	tool = vscode
  [difftool "vscode"]
  	cmd = code --wait --diff $LOCAL $REMOTE
  ``

git alias 등록

• git config 편집창을 열어서 alias 를 추가하면 자주 쓰는 명령어를 축약하여 사용할 수 있다.
  내가 추가한 단축어는 다음과 같다.
  위에는 기본 명령어에 대한 간단한 단축어이다.
  git status 대신 git s만 입력하면 빠르게 확인이 가능하다.

[alias]
	s = status
	cm = commit
	ca = commit --amend
	re = restore --staged 
	br = branch
	co = checkout
	ch = "!git checkout $(git branch | fzf)"
	a = "!git add $(git status -s | fzf -m | awk '{print $2}')"
        hist = log --graph --all --pretty=format:'%C(yellow)[%ad]%C(reset) %C(green)[%h]%C(reset) | %C(white)%s %C(bold red){{%an}}%C(reset) %C(blue)%d%C(reset)' --date=short

• ch, a 는 fzf 를 사용한다.
  fzf 를 설치하면 선택 UI 를 추가하여 더 편리한 alias 를 만들 수 있다. (참고: 편리한 git alias 설정)

  • brew로 설치 : brew install fzf
  • 브랜치 선택기 : 브랜치 목록을 보고 검색어/위-아래 화살표 키를 사용해 브랜치를 선택, checkout 할 수 있다.
    ch = "!git checkout $(git branch | fzf)"
  • add 선택기 : 파일 목록을 보고 tab 키로 추가하고 싶은 파일만 체크한 다음, 엔터 키를 사용해 git add 완료
    a = "!git add $(git status -s | fzf -m | awk '{print $2}')"
    • fzf 에서 여러 아이템을 선택하고 싶을 때 -m 옵션을 사용한다. tab키로 체크/해제가 가능하다.
      

• hist 는 git log를 이쁘게 보여주도록 커스텀한 것이다.