Prety를 사용하여 요소 태그에서 특성을 구분하지 않는 방법

Prety를 사용하여 요소 태그에서 특성을 구분하지 않는 방법

나는 Vue CLI를 사용하여 새 Vue 프로젝트를 생성했다.린터 옵션 프롬프트를 위해 나는 더 예쁜 것을 선택했다.새 라인에 대한 특성 분리를 비활성화하려면 어떻게 해야 하는가?예를 들어,

이건 내 마크업이다.

<v-navigation-drawer
  v-model="drawer"
  :clipped="$vuetify.breakpoint.lgAndUp"
  app
>
   ...
</v-navigation-drawer>

그리고 내가 예상한 결과는 다음과 같다.

<v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
   ...
</v-navigation-drawer>

나는 창조하려고 노력했다..prettierrc파일 및 이 구성 추가:

{
  "htmlWhitespaceSensitivity": "ignore"
}

하지만 그것은 나에게 효과가 없었고, HTML은 여전히 같아 보인다.

여기서 시행되고 있는 더 예쁜 옵션은 디폴트 80인 입니다.문제의 마크업 라인은 82자 길이에 앞 탭 공간의 길이를 더한 것으로, 이 때문에 라인터/포맷터가 선을 쪼개게 된다.

당신은 더 많은 것을 할 수 있다.printWidth이 문제를 해결하려면:

// .eslintrc.js
module.exports = {
  rules: {
    //...
    "prettier/prettier": [
      "warn",
      {
        printWidth: 180,  // default = 80
      }
    ]
  }
}

참조URL: https://stackoverflow.com/questions/63560974/how-to-disable-attributes-breaking-in-element-tags-with-prettier