daon 홈페이지 리뉴얼 프로젝트는 처음 html, css, javascript를 배우면서 진행했다. 그 당시에는 html의 각 테크 class명이나 js의 변수명을 후에 누가 봐도 유지보수할 수 있도록 해당 기능을 잘 설명할 수 있는 이름으로 지어주는 것이 얼마나 중요한지 모르고 지나갔다.
git에 commit message를 작성할 때도 어떤 기능이 바뀌었는지를 적어놓아야 나중에 문제가 생겼을 때 당시 commit으로 되돌아가는데 어려움이 없고, 협업 시에는 팀원과의 소통에소 중요한 역할을 할 수 있다.
과거의 나에게 이런 사실들을 알려줄 수 있다면 좋겠지만 그것이 불가능하니ㅜㅠ 지금이라도 정리할 수 있는 부분은 정리해보기로 했다.
우선 코딩 스타일을 통일시키기위해 eslint와 prettier의 도움을 받기로 했다.
eslint가 자바스크립트 코딩 스타일 검사기이라면 prettier는 코딩 스타일을 알아서 바꾸어 준다.
이 둘은 협업을 할 때 팀원들 간의 서로 다른 코딩 스타일을 하나로 통일해주는데 도움을 주기 때문에 같이 쓰이는 경우가 많다.
나는 html과 scss파일을 자동정렬하고 싶어 prettier를 쓰기로 했다. daon 프로젝트에서는 node를 쓰지않고 browser로 실행시켰기때문에
1. 먼저 VS Code MarketPlace에서 extension인 Prettier-Code formatter를 설치한다. (필요하다면 ESLint도 같이 설치한다.)
2. VS Code의 setting.json 파일에 들어가 설정을 변경해준다.(단축키 ctrl+,를 누르면 Settings 창이 뜬다. 우측 상단에 json파일 변환 아이콘이 있다)
1
2
3
4
5
6
"editor.formatOnSave": true,
"prettier.javascriptEnable": ["javascript", "javascriptreact"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
“editor.formatOnSave”: true 을 해주면 ctrl+s를 눌러 파일을 저장했을 때 자동으로 formatter가 적용된다. 이 곳에 prettier를 설정하려면 다음과 같이 앞에 prettier.을 적어준다.
“prettier.tabWidth”: 4,
“prettier.endOfLine”: “auto”
3. prettier는 우선 settings.json에 설정해둔 값이 적용되고 그 다음에 프로젝트에 .editorconfig 이 있다면 두 번째로 적용, 마지막으로 prettier에 관한 설정 파일인 .prettierrc을 확인한다.
설정파일에 아래와 같이 정렬방식을 적어주면 된다.
.prettierrc
1
2
3
4
5
6
7
8
{
"singleQuote": true, //''를 사용할 것인지
"semi": true, //;를 사용할 것인지
"useTabs": false,
"tabWidth": 2, //기본 탭 간격
"trailingComma": "es5", //객체, 함수, 배열 등에 후행 쉼표를 찍을지 제어
"printWidth": 80 //한줄에 표시되는 양
}
.eslintrc의 경우는 코딩 스타일을 적어둔 설정 파일이고, .eslintignore는 코딩 스타일을 검사하지 않을 파일 목록이다.
5. html에 prettier를 적용하고 싶다면 window의 경우 단축키 shift+alt+f로 자동정렬이 된다.
6. 참고로 git repository에 push한 commit message를 수정하고 싶다면
1
> git rebase -i (해당 commit 주소)
를 하면 해당 commit 다음부터 수정할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
edit 0a8829b 1
pick 8b2c3aa 2
pick f8483fc 33
# Rebase f18424f..f8483fc onto f18424f (3 commands)
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
# d, drop = remove commit
rebase하고 싶은 commit주소 앞에 pick를 edit으로 바꿔주고
1
> git commit --amend
를 실행하면 당시의 커밋을 바꿀 수 있다. 커밋을 바꾼 후
1
> git rebase --continue
를 실행하면 다음 edit 설정한 commit으로 넘어간다. 수정이 완료되었으면
1
> git push -f
-f옵션으로 강제 적용을 해야 repository의 commit이 변경된다. 이렇게 하면 rebase된 commit부터 그 후의 모든 commit의 주소가 새로 생성되므로 꼭 필요할 때만 쓰도록 한다.
협업을 위한 다양한 편의 기능 중 prettier에 대해 배운 하루였습니다.
참고:
https://prettier.io/
VScode Code Formater 인 Prettier 완벽 적용하기
Visual Studio Code Prettier 간편 설정
ESLint 와 Prettier 적용
Git Commit Message 바꾸는 방법