[javascript] Prettier를 사용하여 코드 작성 시 일관적인 템플릿 리터럴 형식을 유지하는 방법은 무엇인가?

26 Dec 2023

javascript

일반적으로, Prettier는 템플릿 리터럴에 따옴표를 적용하는 방식을 따르지 않습니다. 그러나, 확장자가 .js, .jsx, .ts, .tsx 등일 경우 템플릿 리터럴 내부에 있는 따옴표를 수정하지 않는 것이 기본 동작입니다. 템플릿 리터럴의 일관된 스타일을 유지하기 위해서는 .prettierrc 파일에 다음과 같이 설정합니다.

{
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "parser": "babel",
        "overrides": [
          {
            "files": "*.js",
            "options": {
              "printWidth": 100,
              "semi": true,
              "singleQuote": true
            }
          }
        ]
      }
    }
  ]
}

이렇게 하면 Prettier는 .js 파일에 있는 템플릿 리터럴에서도, 따옴표를 일관된 방식으로 관리할 수 있습니다. 이외에도 필요한 설정을 추가하여 Prettier를 통해 코드의 일관된 형식을 유지할 수 있습니다.