Prettier

Prettier는 코드를 더 이쁘게 만든다. ESLint와 가장 큰 차이점은 코드 품질에 관련된 것은 다루지 않는 다는 점이다. Prettier는 단지 일관적인 스타일로 코드를 다듬을 뿐이다.

 

설치 및 사용법

npm install prettier 로 설치한다. 사용방법은 npx prettier app.js --write 로 사용할 수 있다. --write 옵션은 파일을 재 작성하고 만약 --write 옵션을 주지 않으면 터미널에 출력만 한다. 

 

ESLint와의 통합

포매팅은 Prettier가 하지만 코드 품질과 관련된 검사는 ESLint가 하기 때문에 둘을 같이 사용하는 것이 좋다. 패키지 중에 eslint-config-prettier 가 있는데 이는 Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 해준다. npm install eslint-config-prettier 로 설치해 준다.

 

// .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    amd: true,
  },
  // eslint:recommended 에 있는 설정중 prettier와 겹치는 항목은 다 끈다.
  extends: ['eslint:recommended', 'eslint-config-prettier'], 
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {},
}

 

설치 후 eslint 설정파일에서 extends에 eslint-config-prettier 를 추가해 주면 된다. 

하지만 매번 npx eslint app.js --fix , npx prettier app.js --write 를 입력하려면 불편하기에 eslint-plugin-prettier를 설치한다. 이 플러그인은 prettier에 있는 모든 규칙을 eslint의 규칙으로 추가한다.  npm i eslint-plugin-prettier 로 설치한다. 그 후 eslint 설정파일을 아래와 같이 추가해 준다.

 

module.exports = {
  ... 생략
  
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
}

 

prettier의 규칙을 eslint에 넣었기 때문에 실행은 eslint 만 실행하면 자동으로 포매팅 까지 된다.

 

더 간단하게 설정하는 방법도 제공하는데 

 

"extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]

 

별도로 플러그인 옵션을 주지 않고 두 패키지를 함께 사용할 수 있다.

 

 

 

---

 

 

자동화

ESLint는 코딩할 때 마다 수시로 실행해야 한다. 그래서 이를 자동화 하면 좋은데, 만약 깃을 사용하고 있다면 커밋 실행 시점에 끼어들수 있는 husky 라는 훅이 존재한다. 이를 사용하면 커밋 메시지 작성 전에 ESLint로 코드검사를 하면 좋을 것이다. npm i husky 로 설치한다.

 

// package.json

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

 

설치 후 package.json에 위 옵션을 추가하면 커밋전에 해당 커멘드를 실행한다. 만약 오류가 발견되면 커밋 과정은 취소 된다. 

 

그리고, 코드가 점점 많아지면 이렇게 커밋 작성이 느려질 수 있는데 커밋시 변경된 파일만 검사할 수 있는 lint-staged 패키지가 있다. npm i lint-staged 로 설치하고 pacakge.json에 설정을 추가해 준다.

 

// package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // 이 부분도 변경해 준다.
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }

내용이 변경된 파일중에 .js 확장자에 대한 파일만 코드 검사한다.