Онлайн HTML Форматирование, сделать HTML Красивее

Форма HTML Форматирования

Считаете ли вы этот инструмент полезным? То поделитесь этим с друзьями или коллегами. Это поможет нам сделать наши бесплатные веб-инструменты лучше.


Эта форма позволяет вам создавать красивый HTML код и делать ваш HTML-код более читабельным. Онлайн HTML форматирование также украшает CSS и JavaScript между их тегами.

открытьполноэкранныйобразецкопироватьочиститьскачать


Перенести в «Вставить код» для сохранения

О HTML Форматировании

Об инструменте HTML Formatter

Форматирование HTML онлайн была создана, чтобы помочь с отладкой. Поскольку данные HTML часто выводятся без разрывов строк для экономии места, на самом деле их чрезвычайно сложно читать. Этот инструмент позволяет решить проблему путем форматирования HTML-кода, чтобы его было легко читать и отлаживать.

Как это работает?

Просто вставьте свой HTML-код в текстовую область выше и нажмите кнопку «Форматировать», и вы получите красивый HTML-код в той же текстовой области. Вы можете скопировать или сохранить отформатированный HTML код.

Пример HTML Форматирования

Исходные данные (До):

<!DOCTYPE html><html><head><title>wtools.io - Best Tools</title><style>body{background-color:#d0e4fe}h2{color:red}p{font-family:Arial;font-size:25px}</style></head><body><h2>Frre HTML Formatter</h2><div>Sample text in div</div><ul>Sample UL<li>Test</li><li>Debug</li><li>Execute</li></ul><p>This is a paragraph.</p><table><tr><th>100</th><th>200</th><th>300</th></tr><tr><td>100</td><td>200</td><td>300</td></tr></table></body></html>

Конечный результат (После):

<!DOCTYPE html>
<html>
<head>
    <title>wtools. io - Best Tools</title>
    <style>
    body {
        background-color: #d0e4fe;
    }
    h2 {
        color: red;
    }
    p {
        font-family: "Arial";
        font-size: 25px;
    }
    </style>
</head>
<body>
    <h2>Frre HTML Formatter</h2>
    <div>Sample text in div</div>
    <ul>Sample UL
        <li>Test</li>
        <li>Debug</li>
        <li>Execute</li>
    </ul>
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <th>100</th>
            <th>200</th>
            <th>300</th>
        </tr>
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>
</body>
</html>

Форматирование HTML кода

Форматирование HTML кода

Консалтинг и аналитикаSEO инструменты и сервисы

  • SEO инструменты
  • Форматирование HTML кода

Довольно часто при написании HTML кода ваши отступы, интервалы и другие элементы форматирования могут стать немного дезорганизованными.

С помощью данного инструмента вы можете легко сделать ваш код красивым и легко читаемым. Особенно важно соблюдать единый стиль форматирования когда над проектом работают нескольких разработчиков.

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



Поставьте к себе на сайт

Введите сокращенный, или запутанный HTML-код в поле ниже, чтобы мы его почистили и сделали красивым. Сервис также поддерживает нумерацию строк и подсветку синтаксиса. С помощью настроек форматирования вы можете адаптировать код под ваши личные вкусы.


Отступы — табуляцияОтступы — 2 пробелаОтступы — 3 пробелаОтступы — 4 пробелаОтступы — 8 пробелов

Не переносить длинные строкиПереносить строки более 40 символовПереносить строки более 70 символовПереносить строки более 80 символовПереносить строки более 110 символовПереносить строки более 120 символовПереносить строки более 160 символов

Удалите все лишние переводы строкРазрешить 1 новую строку внутри теговРазрешить 2 новые строки внутри теговРазрешить 5 новых строк внутри теговРазрешить 10 новых строк внутри теговНеограниченное количество строк

Отступы для секций <head> и <body>

Форматирование внутри тегов <style>и <script>:

На уровне отступа в тегаДобавить один отступБез отступа



Примеры

Исходный сжатый HTML-код:

<table><tr><td><form action=»https://yandex. ru/search/» role=»search» aria-label=»Поиск в интернете»><div><div><button type=»submit»><span>Найти</span></button></div><div><input maxlength=»400″ name=»text»/></div><div><div></div><div></div></div></div></form></td></tr></table>

HTML-код после преобразования:

<table>
  <tr>
    <td>
      <form action=»https://yandex.ru/search/» role=»search» aria-label=»Поиск в интернете»>
        <div>
          <div>
            <button type=»submit»><span>Найти</span></button>
          </div>
          <div>
            <input maxlength=»400″ name=»text»/>
          </div>
          <div>
            <div></div>
            <div></div>
          </div>
        </div>
      </form>
    </td>
  </tr>
</table>




© 2022 SEO-AUDITOR

Бесплатные SEO инструменты и сервисы для веб-мастеров, оптимизаторов и копирайтеров, администраторов сайтов, серверов и сисадминов — все для OnLine анализа, оптимизации, продвижения, разработки и мониторинга сайта.

Все материалы этого сайта могут использоваться, перепечатываться, распространяться и цитироваться только с указанием ссылки на первоисточник.

Дизайн сайта “СириусВеб”

Следите за нами:
Читать @SEOAuditorRu в Twitter


Обратная связь

Мы будем рады ответить на любые ваши вопросы, просьбы и пожелания. Просто заполните форму, и наш представитель свяжется с вами в кратчайшие сроки.

Ваше имя*

E-mail*

Тема

Сообщение*



Install · Prettier

Сначала установите Prettier локально:

npm

yarn

 npm install --save-dev --save-exact prettier 
 yarn add --dev --exact prettier 
9
 создайте пустой файл конфигурации, чтобы редакторы и другие инструменты знали, что вы используете Prettier: 

 echo {}> .prettierrc.json
 

Затем создайте файл .prettierignore, чтобы Prettier CLI и редакторы знали, какие файлы следует форматировать в формате , а не .

Вот пример:

 # Игнорировать артефакты:
строить
покрытие
 

Совет! Основывайте свой .prettierignore на .gitignore и .eslintignore (если он у вас есть).

Еще один совет! Если ваш проект еще не готов к форматированию, скажем, файлов HTML, добавьте *.html .

Теперь отформатируйте все файлы с помощью Prettier:

npm

yarn

 npx prettier --write . 

Что это за штука npx ? npx поставляется с npm и позволяет запускать локально установленные инструменты. Мы опустим часть npx для краткости в остальной части этого файла!

Примечание. Если вы забыли сначала установить Prettier, npx временно загрузит последнюю версию. Это не очень хорошая идея при использовании Prettier, потому что мы меняем форматирование кода в каждом выпуске! Важно иметь заблокированную версию Prettier в вашем package. json . И это тоже быстрее.

 пряжа красивее --пишите . 

Что делает пряжа в начале? yarn prettier запускает локально установленную версию Prettier. Мы опустим часть пряжи

для краткости в остальной части этого файла!

красивее --пишите . отлично подходит для форматирования всего, но для большого проекта это может занять некоторое время. Вы можете запустить prettier --write app/ для форматирования определенного каталога или prettier --write app/components/Button.js 9.0031 для форматирования определенного файла. Или используйте glob , например красивее — напишите «app/**/*.test.js» , чтобы отформатировать все тесты в каталоге (поддерживаемый синтаксис glob см. в fast-glob).

Если у вас есть установка CI, запустите в ее составе следующее, чтобы убедиться, что все используют Prettier. Это позволяет избежать конфликтов слияния и других проблем совместной работы!

 npx красивее --check . 
 

--check похож на --write , но только проверяет, что файлы уже отформатированы, а не перезаписывает их. prettier --write и prettier --check являются наиболее распространенными способами запуска Prettier.

Настройка редактора

Форматирование из командной строки — хороший способ начать работу, но вы получите максимальную отдачу от Prettier, запустив его из редактора либо с помощью сочетания клавиш, либо автоматически при сохранении файла. Когда во время написания кода строка стала такой длинной, что не помещается на вашем экране, просто нажмите клавишу и наблюдайте, как она волшебным образом превращается в несколько строк! Или когда вы вставляете какой-то код, а отступы перепутались, позвольте Prettier исправить это за вас, не выходя из редактора.

См. Интеграция с редактором, чтобы узнать, как настроить редактор. Если ваш редактор не поддерживает Prettier, вместо этого вы можете запустить Prettier со средством просмотра файлов.

Примечание: Не пропускайте обычную локальную установку! Плагины редактора подберут вашу локальную версию Prettier, убедившись, что вы используете правильную версию в каждом проекте. (Вы бы не хотели, чтобы ваш редактор случайно внес много изменений, потому что он использует более новую версию Prettier, чем ваш проект!)

А возможность запускать Prettier из командной строки по-прежнему является хорошим запасным вариантом и необходима для настройки CI.

ESLint (и другие линтеры)

Если вы используете ESLint, установите eslint-config-prettier, чтобы ESLint и Prettier хорошо взаимодействовали друг с другом. Он отключает все правила ESLint, которые не нужны или могут конфликтовать с Prettier. Для Stylelint есть похожая конфигурация: stylelint-config-prettier

(см. Prettier vs. Linters, чтобы узнать больше о форматировании и линтинге, Интеграция с линтерами, чтобы получить более подробную информацию о настройке ваших линтеров, и Связанные проекты, чтобы узнать еще больше возможностей интеграции). , если нужно.)

Git hooks

В дополнение к запуску Prettier из командной строки ( prettier --write ), проверке форматирования в CI и запуску Prettier из вашего редактора, многие люди также любят запускать Prettier в качестве хука перед фиксацией . Это гарантирует, что все ваши коммиты отформатированы, и вам не нужно ждать завершения сборки CI.

Например, вы можете сделать следующее, чтобы Prettier запускался перед каждой фиксацией:

  1. Установить husky и lint-staged:

npm

yarn

 npm install --save-dev husky lint-staged 
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged "
 yarn add --dev husky lint-staged 
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Если вы используете Yarn 2, см. https://typicode.

github.io/husky/#/?id=yarn-2

  1. Добавьте следующее в ваш package.json :
 {
  "подготовлено": {
    "**/*": "красивее --пишите --игнорировать-неизвестно"
  }
}
 

Примечание. Если вы используете ESLint, убедитесь, что lint-stage запускает его до Prettier, а не после.

Для получения дополнительной информации см. Перехватчик предварительной фиксации.

Резюме

Подводя итог, мы научились:

  • Установить точную версию Prettier локально в вашем проекте. Это гарантирует, что все участники проекта получат одну и ту же версию Prettier. Даже патч-релиз Prettier может привести к немного другому форматированию, поэтому вы не хотите, чтобы разные члены команды использовали разные версии и форматировали изменения друг друга туда и обратно.
  • Добавьте .prettierrc.json , чтобы ваш редактор знал, что вы используете Prettier.
  • Добавьте . prettierignore , чтобы ваш редактор знал, какие файлы не трогать, а также чтобы иметь возможность запускать prettier --write . , чтобы отформатировать весь проект (без искажения файлов, которые вам не нужны, или захлебывания сгенерированными файлами).
  • Выполнить красивее --check . в CI, чтобы убедиться, что ваш проект остается отформатированным.
  • Запустите Prettier из своего редактора, чтобы получить наилучшие впечатления.
  • Используйте eslint-config-prettier, чтобы Prettier и ESLint хорошо работали вместе.
  • Настройте ловушку перед фиксацией, чтобы убедиться, что каждая фиксация отформатирована.

Варианты · Prettier

Prettier поставляется с несколькими вариантами формата.

Чтобы узнать больше о позиции Prettier в отношении опционов, см. Философию опционов.

Если вы меняете какие-либо параметры, рекомендуется делать это через файл конфигурации. Таким образом Prettier CLI, интеграция с редактором и другие инструменты знают, какие параметры вы используете.

Ширина печати

Укажите длину строки, по которой принтер будет выполнять перенос.

Для удобочитаемости не рекомендуется использовать более 80 символов:

В руководствах по стилю кода правила максимальной длины строки часто устанавливаются равными 100 или 120. Однако, когда люди пишут код, они не стремятся достичь максимального количества столбцов в каждой строке. Разработчики часто используют пробелы, чтобы разбить длинные строки для удобства чтения. На практике средняя длина линии часто оказывается значительно ниже максимальной.

Параметр printWidth в Prettier работает иначе. Это не жесткий верхний допустимый предел длины строки. Это способ примерно сказать Prettier, насколько длинными должны быть линии. Prettier будет делать как более короткие, так и более длинные строки, но в целом стремится соответствовать указанной ширине печати.

Помните, что компьютеры тупые. Вам нужно явно указать им, что делать, в то время как люди могут делать свои собственные (неявные) суждения, например, когда нужно разорвать линию.

Другими словами, не пытайтесь использовать printWidth так, как если бы это была максимальная длина ESLint — это не одно и то же. max-len просто говорит, какова максимально допустимая длина строки, но не какова обычно предпочтительная длина — это то, что указывает printWidth.

Default CLI Override API Override
80 --print-width printWidth:

Setting max_line_length в файле .editorconfig будет настраивать ширину печати Prettier, если это не будет переопределено.

(Если вы не хотите использовать перенос строк при форматировании Markdown, вы можете установить параметр Prose Wrap, чтобы отключить его. )

Ширина табуляции

Укажите количество пробелов на уровне отступа.

Default CLI Override API Override
2 --tab-width tabWidth:

Setting indent_size или tab_width в файле .editorconfig будет настраивать ширину вкладки Prettier, если это не переопределено.

Вкладки

Строки с отступом с помощью табуляции вместо пробелов.

Default CLI Override API Override
false --use-tabs useTabs:

Setting indent_style в файле .editorconfig настроит использование вкладки Prettier, если это не будет переопределено.

(Вкладки будут использоваться для отступ , но Prettier использует пробелы для выравнивания элементов, например, в тройках.)

Точки с запятой

Печатать точки с запятой в конце операторов.

Допустимые параметры:

  • true — Добавляйте точку с запятой в конце каждого утверждения.
  • false — Добавляйте точки с запятой только в начале строк, которые могут привести к сбоям ASI.
По умолчанию Переопределение CLI Переопределение API
True -Нет-SEMI SEMI:

100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100100

00.

Примечания:

  • Кавычки JSX игнорируют эту опцию – см. jsx-одинарная кавычка.
  • Если количество кавычек превышает количество других кавычек, для форматирования строки будет использована менее используемая кавычка. Пример: "Я в двойных кавычках" приводит к «Я в двойных кавычках» и «Этот «пример» в одинарных кавычках» приводит к «Этот «пример» в одинарных кавычках» .

Дополнительную информацию см. в описании строк.

Default CLI Override API Override
false --single-quote singleQuote:

Реквизиты кавычек

Изменение, когда свойства в объектах цитируются.

Допустимые параметры:

  • "по мере необходимости" - Добавляйте кавычки только вокруг свойств объекта там, где это необходимо.
  • "согласованный" - Если хотя бы одно свойство в объекте требует кавычек, заключайте в кавычки все свойства.
  • "сохранить" - Уважайте ввод с использованием кавычек в свойствах объекта.
По умолчанию Переопределение интерфейса командной строки API Переопределение
"ASEDED" -КОТАЦИОННЫЙ ПРОДОВОД "

Обратите внимание, что Prettier никогда не раскапывает имена числовых свойств в выражениях Angular, TypeScript и Flow, потому что в этих языках существенное различие между строковыми и числовыми ключами. См.: Angular, TypeScript, Flow. Также Prettier не раскапывает числовые свойства для Vue (см. вопрос об этом).

Если для этого параметра установлено значение , сохранить , singleQuote от до false (значение по умолчанию) и синтаксический анализатор до json5 , для строк всегда используются двойные кавычки. Это эффективно позволяет использовать парсер json5 для «JSON с комментариями и запятыми в конце».

JSX Quotes

Используйте одинарные кавычки вместо двойных в JSX.

По умолчанию Переопределение CLI Переопределение API
false --jsx-single-quote jsxSingleQuote:

Trailing Commas

Default value changed from none to es5 в v2.0.0

Печатать конечные запятые везде, где это возможно, в многострочных синтаксических структурах, разделенных запятыми. (Например, однострочный массив никогда не ставит запятые в конце.)

Допустимые параметры:

  • "es5" — запятые в конце, если они допустимы в ES5 (объекты, массивы и т. д.). Нет запятых в конце параметров типа в TypeScript.
  • "нет" - Без запятых в конце.
  • "все" - Запятые в конце везде, где это возможно (включая параметры функций и вызовы). Для запуска отформатированного таким образом кода JavaScript требуется движок, поддерживающий ES2017 (Node.js 8+ или современный браузер) или компиляцию нижнего уровня. Это также включает запятые в конце параметров типа в TypeScript (поддерживается, начиная с TypeScript 2.7, выпущенного в январе 2018 г.).
Default CLI Override API Override
"es5" --trailing-comma trailingComma: ""

Bracket Spacing

Печатать пробелы между скобками в литералах объекта.

Допустимые параметры:

  • true — Пример: { foo: bar } .
  • ложь - Пример: {foo: bar} .
Default CLI Override API Override
true --no-bracket-spacing bracketSpacing:

Bracket Line

Поместите > многострочного элемента HTML (HTML, JSX, Vue, Angular) в конец последней строки, а не в одиночку на следующей строке (не относится к самозакрывающимся элементам).

Допустимые параметры:

  • true - Пример:
 <кнопка
  className = "красивее-класс"
 
  onClick={this.handleClick}>
  Кликните сюда

 
  • ложь - Пример:
 <кнопка
  className = "красивее-класс"
 
  onClick={this.handleClick}
>
  Кликните сюда

 
По умолчанию Переопределение CLI Переопределение API
FALSE -Крэкет-Сайм-Линия Кроншл. -bracket-same-line вместо

Поместите > многострочного элемента JSX в конец последней строки, а не в одиночку на следующей строке (не относится к самозакрывающимся элементам).

Допустимые варианты:

  • правда - Пример:
 <кнопка
  className = "красивее-класс"
 
  onClick={this.handleClick}>
  Кликните сюда

 
  • ложь - Пример:
 <кнопка
  className = "красивее-класс"
 
  onClick={this. handleClick}
>
  Кликните сюда

 
По умолчанию Переопределение CLI Переопределение API
Ложь -JSX-BRACKET-SAME-LINE JSXBRACHETSAMELEN:

Функция стрельбы

9 0002
. всегда
в v2.0.0

Включите круглые скобки вокруг единственного параметра функции стрелки.

Допустимые параметры:

  • "всегда" - Всегда включать скобки. Пример: (х) => х
  • "избегать" - по возможности опускать скобки. Пример: х => х
237
дефолт CLI Переопределение API переопределение
"всегда" 9 " " " " " " "

На первый взгляд, отказ от скобок может показаться лучшим выбором из-за меньшего визуального шума. Однако, когда Prettier удаляет круглые скобки, становится сложнее добавлять аннотации типов, дополнительные аргументы или значения по умолчанию, а также вносить другие изменения. Последовательное использование круглых скобок обеспечивает лучший опыт разработчика при редактировании реальных кодовых баз, что оправдывает значение по умолчанию для параметра.

Диапазон

Форматировать только сегмент файла.

Эти две опции можно использовать для форматирования кода, начинающегося и заканчивающегося с заданным смещением символов (включающим и исключающим соответственно). Диапазон расширится:

  • В обратном направлении к началу первой строки, содержащей выбранный оператор.
  • Вперед в конец выбранного оператора.

Эти параметры нельзя использовать с cursorOffset .

Default CLI Override API Override
0 --range-start rangeStart:
Infinity --range-end rangeEnd:

Парсер

Укажите, какой парсер использовать.

Prettier автоматически определяет синтаксический анализатор из пути к входному файлу, поэтому вам не нужно изменять этот параметр.

Парсеры babel и flow поддерживают одинаковый набор функций JavaScript (включая аннотации типа Flow). В некоторых крайних случаях они могут отличаться, поэтому, если вы столкнетесь с одним из них, вы можете попробовать flow вместо babel . Почти то же самое касается машинописи и babel-ts . babel-ts может поддерживать функции JavaScript (предложения), которые еще не поддерживаются TypeScript, но он менее допускает некорректный код и менее проверен в боевых условиях, чем машинопись парсер.

Допустимые параметры:

  • "babel" (через @babel/parser) Named "babylon" до v1.16.0
  • "babel-flow" (то же, что и "babel" , но включает явный разбор потока во избежание двусмысленности) Впервые доступно в v1. 16.0
  • «babel-ts» (аналогично «typescript» , но использует Babel и его плагин TypeScript) Впервые доступно в версии 2.0.0
  • "поток" (через парсер потока)
  • "typescript" (через @typescript-eslint/typescript-estree) Впервые доступно в v1.4.0
  • "espree" (через espree) Впервые доступно в версии 2.2.0
  • "meriyah" (через meriyah) Впервые доступно в v2.2.0
  • "желудь" (через жёлудь) Впервые доступно в v2.6.0
  • "css" (через postcss-scss и postcss-less, автоматически определяет, что использовать) Впервые доступно в v1.7.1
  • "scss" (те же парсеры, что и для "css" , предпочитается postcss-scss) Впервые доступно в v1.7.1
  • "менее" (те же парсеры, что и "css" , предпочитается без postcss) Впервые доступно в v1. 7.1
  • "json" (через @babel/parser parseExpression) Впервые доступно в v1.5.0
  • "json5" (тот же парсер, что и "json" , но выводит как json5) Впервые доступно в v1.13.0
  • "json-stringify" (тот же синтаксический анализатор, что и "json" , но выводит как JSON.stringify ) Впервые доступно в v1.13.0
  • "graphql" (через graphql/язык) Впервые доступно в v1.5.0
  • "уценка" (через анализ примечаний) Впервые доступно в v1.8.0
  • "mdx" (через comment-parse и @mdx-js/mdx) Впервые доступно в версии 1.15.0
  • "html" (через angular-html-parser) Впервые доступно в версии 1.15.0
  • "vue" (тот же синтаксический анализатор, что и "html" , но также форматирует синтаксис, специфичный для vue) Впервые доступно в версии 1. 10.0
  • "angular" (тот же синтаксический анализатор, что и "html" , но также форматирует специфичный для angular синтаксис с помощью angular-estree-parser) Впервые доступно в версии 1.15.0
  • "lwc" (тот же анализатор, что и "html" , но также форматирует специфический для LWC синтаксис для атрибутов шаблона без кавычек) Впервые доступно в версии 1.17.0
  • "yaml" (через yaml и yaml-unist-parser) Впервые доступно в версии 1.14.0

Пользовательские синтаксические анализаторы также поддерживаются. Впервые доступно в версии 1.5.0. Устарело. Будет удалено в версии 3.0.0 (заменено Plugin API)

По умолчанию Переопределение CLI Переопределение API
Нет --parser
--parser ./my-parser
parser: ""
parser-parser. )

Примечание: значение по умолчанию было «вавилон» до версии 1.13.0.

Путь к файлу

Укажите имя файла, чтобы определить, какой синтаксический анализатор использовать.

Например, следующий код будет использовать синтаксический анализатор CSS:

 cat foo | красивее --stdin-filepath foo.css
 

Этот параметр полезен только в CLI и API. Нет смысла использовать его в файле конфигурации.

Default CLI Override API Override
None --stdin-filepath filepath: ""

Require Pragma

Впервые доступно в v1.7.0

Программа Prettier может ограничиваться форматированием только тех файлов, которые содержат специальный комментарий, называемый прагмой, в начале файла. Это очень полезно при постепенном переводе больших неформатированных кодовых баз на Prettier.

Файл со следующим первым комментарием будет отформатирован при указании --require-pragma :

 /**
 * @красивее
 */
 

или

 /**
 * @формат
 */
 
Default CLI Override API Override
false --require-pragma requirePragma:

Insert Pragma

Впервые доступно в версии 1.8.0

Программа Prettier может вставлять специальный маркер @format вверху файлов, указывающий, что файл был отформатирован с помощью программы Prettier. Это хорошо работает в сочетании с опцией --require-pragma . Если в начале файла уже есть докблок, то эта опция добавит к нему новую строку с маркером @format .

Обратите внимание, что «в тандеме» не означает «одновременно». Когда два варианта используются одновременно, --require-pragma имеет приоритет, поэтому --insert-pragma игнорируется. Идея состоит в том, что во время поэтапного внедрения Prettier в большой кодовой базе разработчики, участвующие в процессе перехода, используют --insert-pragma , тогда как остальная часть команды использует --require-pragma и автоматизированные инструменты для обрабатывать только уже перемещенные файлы. Эта функция была вдохновлена ​​стратегией внедрения Facebook.

По умолчанию CLI Override API Override
false --insert-pragma insertPragma:

Prose Wrap

First available in v1.8.2

По умолчанию Prettier не меняет перенос текста уценки, поскольку некоторые сервисы используют рендерер, чувствительный к разрыву строки, например. Комментарии GitHub и BitBucket. Чтобы Prettier оборачивал прозу по ширине печати, измените этот параметр на «всегда». Если вы хотите, чтобы Prettier заставил все прозаические блоки располагаться в одной строке и вместо этого полагался на мягкую обертку редактора/просмотрщика, вы можете использовать "никогда" .

Допустимые параметры:

  • "всегда" - Переносить прозу, если она превышает ширину печати.
  • "никогда" - Распаковать каждый блок прозы в одну строку.
  • "сохранить" - Ничего не делать, оставить прозу как есть. Впервые доступно в версии 1.9.0
По умолчанию Переопределение CLI Переопределение API
"сохранить" --prose-wrap <всегда|никогда|сохранять> proseWrap: "<всегда|никогда|сохранять>"

HTML Whitespace Sensitivity

1 Доступна первая версия. Впервые доступно для Handlebars в 2.3.0

Укажите глобальную чувствительность к пробелам для HTML, Vue, Angular и Handlebars. Дополнительные сведения см. в разделе форматирование с учетом пробелов.

Допустимые параметры:

  • "css" — Соблюдайте значение CSS 9 по умолчанию.0030 отображает свойство . Для рулей обрабатываются так же, как строгий .
  • "строгий" - Пробелы (или их отсутствие) вокруг всех тегов считаются значительными.
  • "игнорировать" - Пробелы (или их отсутствие) вокруг всех тегов считаются незначимыми.
по умолчанию CLI Переопределение API переопределение
"CSSS" 777777 "CSSS" 77777777 "CSSS" 777777777779.0031 HTMLWHITESPECESENCITICIONG: ""

VUE FILES SCRIPT и STYLE TAGS

Первые доступны в V1.19.0

, батарея

. Сначала до V19.0

999

.

.

.

.

3

.

.

.

.

.

.

.

.

.

.

.9 9

. script> и