Arhn - архитектура программирования

VSCode Prettier и запутанное форматирование vue

С этим кодом

<template>
  <v-toolbar app color="brown darken-4" dark>
    <v-btn color="brown lighten-3" class="hidden-sm-and-down">REGISTRIEREN</v-btn>
  </v-toolbar>
</template>

Претье предлагает следующее:

  3:62  warning  Replace `>REGISTRIEREN</v-btn` with `⏎······>REGISTRIEREN</v-btn⏎····`  prettier/prettier

Но код будет выглядеть так:

<template>
  <v-toolbar app color="brown darken-4" dark>
    <v-btn color="brown lighten-3" class="hidden-sm-and-down"
      >REGISTRIEREN</v-btn
    >
  </v-toolbar>
</template>

Куда красивее не жалуется. Это ожидаемое поведение или ошибка в VSCode?

visual-studio-code vue.js prettier
25.03.2021

Ответы:


1

Это ожидаемое поведение. Prettier делает разрыв строки после 80 символов или около того. И он прерывается перед >, потому что, если он прерывается после, он фактически добавляет пробел, поэтому позже вы можете столкнуться с проблемами отображения.

это правильно:

 <v-btn color="brown lighten-3" class="hidden-sm-and-down"
   >REGISTRIEREN</v-btn
 >

это не так (разрыв строки до и после «REGISTRIEREN» является фактическим символом):

<v-btn color="brown lighten-3" class="hidden-sm-and-down">
   REGISTRIEREN
</v-btn>

Вы можете настроить некоторые из этих правил, но я искренне рекомендую просто оставить то, что выходит из коробки — чем больше вы настраиваете, тем больше вещей ломается во время обновлений и т. д.

25.03.2021
  • Это поведение Prettier также объясняется здесь: prettier .io/блог/2018/11/07/ 26.03.2021
  • Спасибо за ссылку @thorn̈. Я знал о значительном пустом пространстве, но думал, что это дело темных (xhtml/html 4) веков. 08.04.2021
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..