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

차유림·2021년 8월 17일
0
post-custom-banner

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키로 체크/해제가 가능하다.
        fzf 선택기
  • histgit log를 이쁘게 보여주도록 커스텀한 것이다.

profile
🎨프론트엔드 개발자💻
post-custom-banner

0개의 댓글