코드 스타일링 자동화 (Prettier, Husky)

Goal: 공통된 코드 스타일링 만들기.

Method: Git hook에서 commit 이벤트를 감지해 pre-commit (커밋 이전에) lint-staged를 실행한다. 이 lint-staged에 prettier가 실행되어 설정한 코드 스타일링으로 자동 완성 후 commit 이 된다.

Packages: Prettier, Husky, Lint-staged

Prettier (v2.1.2): 코드 스타일링을 고쳐주는 도구이다. (Scss, Typescript, JSX도 지원). 코드를 읽어들여서 사용자 옵션에 따라 코드를 다시 포맷팅하는 코드 포맷터 입니다.

Husky(v4.3.0): Git hook을 손쉽게 제어하도록 도와주는 매니저이다. Git hook이란 git 특정 이벤트 (commit, push 등등) 벌어졌을 때, 그 순간에 ‘갈고리’를 걸어서 특정 스크립트가 실행되도록 도와주는 것이다.

Lint-staged(v10.5.0): 특정 task를 (명령어를 설정하면) 자동으로 실행시킬 수 있습니다.

How to set up packages
1. 개발에만 필요한 패키지로 devDependencies 로 설치
npm install husky lint-staged prettier --save-dev
2. package.json 에 husky, lint-staged 설정.

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  // 설정한 확장자 파일에서 prettier로 포맷팅. (scss, ts 확장자 추가 가능) 
  "lint-staged": {
    "src/**/*.{js,jsx,json,tsx}": [
      "prettier --write",
      "git add"
    ]
  }

3. 루트 디렉토리에 .prettierrc 파일을 만들어 코드 스타일링 customizing

경로 src/.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 10000 // one line 적용을 위해 숫자를 크게 함. disable 설정이 없음
}

Process
포맷팅 전 -> Git hook에서 감지하고 prettier로 코드 포매팅 -> 포맷팅 완료

Problem
Redux 파일은 줄 바꿈 조건이 다르게 지정되어야 해서 해결 방법은 특정 파일별로 옵션을 다르게 해봐야 할거 같다.

"overrides": [
	{ "files": "*.ts",
  	  "options": { "printWidth": 200 } }, // 특정 파일별로 옵션을 다르게 지정함)}
]

References
Prettier 코드 포멧팅 세팅: https://feel5ny.github.io/2018/03/11/angular_prettier/

Prettier 적용: https://velog.io/@kyusung/eslint-prettier-config#prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0---prettierrc-%ED%8C%8C%EC%9D%BC

Prettier 공식 문서: https://prettier.io/docs/en/options.html#prose-wrap

Javascript 코드 컨벤션 자동화: http://guswnsxodlf.github.io/auto-js-code-convention

Prettier and pre-commit hooks using Husky: https://medium.com/@loclghst/set-up-eslint-prettier-and-pre-commit-hooks-using-husky-for-react-73e7a51cda26

Husky 사용법: https://velog.io/@jch9537/React-husky-사용법-1kk4wj5og4