Jello's development blog

Jello's development blog

Javascript 코드 컨벤션 자동화

두 명 이상의 개발자가 협업을 할 때에 코드 컨벤션이 맞지 않아서 불필요한 수정을 해야 하고 가독성이 떨어지는 경우가 있다. 이를 해결하기 위해서 언어별로 규칙들이 나와있어서 개발자에게 그 컨벤션을 따르도록 하는 경우도 있다.

Husky, Lint-staged, Prettier를 이용하여 javascript 코드 컨벤션을 자동화하는 방법을 알아보자.

설치는 다음과 같이 한다.

npm install husky lint-staged prettier --save-dev

Husky

깃 훅을 편하게 작성할 수 있게 도와주는 도구이다.

package.json > scripts에 다음과 같이 설정해주면 커밋과 푸시 전에 할 작업을 설정할 수 있다.

{
  "scripts": {
    "precommit": "npm test",
    "prepush": "npm test",
    "...": "..."
  }
}

Lint-staged

staged된 파일들을 lint 해주는 도구이다. Husky와 같이 쓰면 staged된 파일들에 대해서 특정 작업을 수행할 수 있다.

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }
}

커밋하기 전에 모든 js파일에 대해서 lint를 수행하도록 설정했다.

Prettier

코드 컨벤션을 고쳐주는 도구이다. es2017을 포함해서 JSX, typescript, flow를 지원하고, 심지어 CSS, LESS, SCSS 까지 지원한다.

예를 들어서 너무 긴 다음과 같은 코드를,

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

다음과 같이 짧게 줄여준다.

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

이는 prettier의 극히 일부 기능 중 하나이고, 더 많은 기능이 있다.

다음과 같이 실행한다.

prettier [opts] [filename ...]

prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"

옵션들은 여기에서 찾아볼 수 있다.

Husky, Lint-staged에 이 Prettier를 끼얹으면 비로소 코드 컨벤션을 자동화해줘서 git에 깔끔한 코드를 올려주는 완성체가 된다.

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write --trailing-comma es5 --single-quote true --tab-width 4",
      "git add"
    ]
  }
}

커밋 전에 staged된 모든 js파일을 대상으로 콤마를 찍어주고, 홑따옴표를 사용하고, 탭의 길이가 4로 수정되도록 설정했다.