prettier란?

코드를 더 예쁘게 정리해줍니다.

visual studio code의 settings.json에서

{
  "editor.rulers": [80]
}

으로 설정하면 에디터 안에서 80정도의 길이에 선이 그어집니다.

설치

$ npm i -D prettier

검사

--write 옵션은 실제 파일도 수정해줍니다.

$ npx prettier app.js --write

eslint와 통합

eslint는 오류를 잡아주지만 자동으로 변경해주는 데 한계가 있고,
prettier는 자동으로 변경해주는 부분이 eslint보다 많지만 코드 품질을 잡아주진 않습니다.
그래서 각각의 미진한 점들을 보완하여 사용합니다.

eslint-config-prettier
프리티어와 충돌하는 eslint 규칙을 끕니다. 실행이 좀 번거롭습니다.

설치

$ npm i -D eslint-config-prettier

설정

// .eslintrc.js
{
  extends: [
    "eslint:recommended",
    "eslint-config-prettier"
  ]
}

실행

npx prettier app.js --write && npx eslint app.js --fix

eslint-plugin-prettier
프리티어 룰들을 eslint에 전부 넣어주는 설정입니다.

설치

$ npm i -D eslint-plugin-prettier

설정

// .eslintrc.js
{
  plugins: [
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error"
  },
}

실행

$ npx eslint app.js --fix

이 둘을 한번에 간단히 작성하고 싶다면 두 개 다 설치한 뒤 아래와 같이 적습니다.

// .eslintrc.js
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

자동화

매번 코드를 수정할 때마다 확인하는 명령어를 치기는 너무 번거롭기 때문에 자동화를 추천합니다.

깃 훅을 이용한 방법

코드 관리를 깃으로 할 경우에 사용 가능합니다.
깃 커맨드를 실행하기 전에 우리가 설정한 명령을 실행시켜 주는 훅으로 'husky'가 있습니다.
해당 커맨드를 실행하기 전에 실행해서 문제가 발생하면 깃 커맨드는 실행되지 않고 에러를 보여줍니다.

허스키 설치

$ npm i -D husky 

package.json 설정

{
  "husky": {
    "hooks": {
      "pre-commit": "eslint app.js --fix"
    }
  }
}

그런데 코드가 커질 수록 전체를 다 검사하는 것은 시간이 오래걸릴 일입니다.
따라서 커밋 시 변경된 파일들만 검사하는 lint-staged를 사용합니다.

$ npm i -D lint-staged

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

에디터 옵션 사용하는 방법

이건 에디터마다 사용법이 다릅니다.

vscode의 경우 extensions에서 eslint를 검색하여 설치 후,

제목표시줄의 code>Preference>settings에서 user탭 말고 workspace탭으로 이동.
(workspace탭을 사용하는 이유는 전역이 아닌 이 프로젝트에서만 사용할 것이기 때문입니다.)

.vscode>settings.json에서 아래 내용을 적습니다.

{
  ...
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 저장할 때마다 고쳐줌
  }
  ...
}