Раскрытие возможностей Prettier: более глубокий взгляд на форматирование кода
Добро пожаловать в первую часть нашей серии, посвященной изучению сути проекта Node.js. В этой статье мы рассмотрим один из основных инструментов для поддержания чистого и последовательного кода: Prettier. Независимо от того, являетесь ли вы новичком или опытным разработчиком, понимание преимуществ и функций Prettier может значительно улучшить ваш опыт кодирования. От автоматического форматирования кода до настраиваемых параметров — мы расскажем обо всем, что вам нужно знать, чтобы максимально эффективно использовать этот мощный инструмент. Итак, давайте начнем раскрывать силу Prettier!
Настройка красивее
Prettier — это самоуверенный форматировщик кода, то есть у него есть набор правил по умолчанию для форматирования кода, которым он следует. Однако в некоторых случаях вы можете настроить форматирование кода программой Prettier. Здесь появляется .prettierrc.
Создав файл .prettierrc в корне вашего проекта, вы можете указать параметры, которые вы хотите использовать Prettier при форматировании вашего кода. Варианты, которые вы можете установить в этом файле, включают количество пробелов для отступа, использование одинарных или двойных кавычек для строк и вставку точки с запятой в конце операторов.
После того, как вы создали и настроили свой файл .prettierrc, вы можете запустить Prettier в своем коде, и он автоматически будет использовать параметры, указанные вами в файле.
Стоит отметить, что вы также можете настроить Prettier с помощью package.json или аргументов CLI. Это зависит от ваших потребностей и того, как вы хотите его использовать.
.prettierrc против .prettierrc.json против .prettierrc.yaml vs prettier.config.js
Вау, это многословно, но давайте посмотрим на различные типы более красивых файлов!
.prettierrc, .prettierrc.json, .prettierrc.yaml и .prettierrc.config.js — все это файлы конфигурации для Prettier, но они отличаются используемым форматом файлов.
.prettierrc не зависит от формата файла, что означает, что конфигурация может быть представлена в JSON, YAML или в объектной нотации JavaScript. Это позволяет вам использовать формат файла, который вам наиболее удобен или наиболее подходит для вашего проекта.
.prettierrc.json — это файл JSON, представляющий собой облегченный формат обмена данными. JSON — это текстовый формат, полностью независимый от языка, но использующий соглашения, знакомые программистам языков семейства C, включая C, C++, C#, Java, JavaScript, Perl, Python и многие другие.
.prettierrc.yaml — это файл YAML, что означает «YAML — это не язык разметки», и представляет собой удобочитаемый формат сериализации данных, который должен быть простым как для чтения, так и для записи. Он менее подробный и менее строгий, чем JSON, и часто используется для файлов конфигурации.
Файл prettier.config.js — это модуль JavaScript, который экспортирует объект, содержащий параметры конфигурации Prettier. Этот файл позволяет указать параметры конфигурации с помощью кода JavaScript, а не в файле JSON или YAML.
Все четыре формата файлов могут настраивать Prettier с одним и тем же набором параметров. Выбор того, какой из них использовать, зависит от ваших предпочтений и того, что лучше подходит для вашего проекта. Большинство редакторов и IDE имеют встроенную поддержку нотации объектов JSON, YAML и JS, и большинство проектов используют формат файла.
Также стоит отметить, что в одном проекте может быть несколько конфигурационных файлов, которые будут использоваться в зависимости от форматируемого файла. Prettier ищет файлы конфигурации в следующем порядке приоритета: .prettierrc, .prettierrc.json, .prettierrc.yaml и prettier.config.js.
Что означает rc в .prettierrc
«rc» в .prettierrc означает «конфигурация времени выполнения». Это соглашение, используемое для файлов конфигурации, которые считываются и применяются при запуске соответствующей программы. Идея состоит в том, что файл конфигурации должен использоваться для установки параметров и предпочтений программы во время выполнения, а не жестко запрограммирован в самой программе.
Соглашение об именовании «rc» уходит своими корнями в мир Unix, где оно использовалось для файлов конфигурации утилит командной строки. Многие другие программы, в том числе Prettier, с тех пор приняли соглашение, позволяющее пользователям настраивать поведение программы без изменения исходного кода.
Стоит отметить, что имя .prettierrc не является уникальным для Prettier, и многие другие инструменты используют аналогичный формат именования для своих файлов конфигурации, таких как eslintrc, babelrc и т. д. Эти файлы часто называют dotfiles или rc-файлами.
Давайте посмотрим на пример кода. В данном случае мы выбрали формат файла .prettierrc.
{
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "es5",
"semi": false,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"parser": "babel"
"printWidth": 200,
"proseWrap": "always",
}
Каждая опция, которую вы можете установить в файле .prettierrc, представляет собой пару ключ-значение. Ключ — это имя параметра, а значение — значение, которое вы хотите установить для этого параметра.
tabWidth: количество пробелов для отступа.singleQuote: это логическое значение, которое, если установлено значение true, отформатирует ваш код с одинарными кавычками вместо двойных кавычек.trailingComma: указывает, следует ли добавлять запятые в конце объектов и массивов. Вы можете установить его на «нет», «es5» или «все».semi: логическое значение, которое, если установлено значение true, будет форматировать код с точками с запятой в конце операторов.bracketSpacing: логическое значение, которое, если установлено значение true, будет форматировать код с пробелами вокруг фигурных скобок в объектах или массивах.jsxBracketSameLine: логическое значение, которое, если установлено значение true, отформатирует ваш JSX в одну строку, а если false — в несколько строк.parser: указывает, какой синтаксический анализатор следует использовать для создания AST перед его форматированием. По умолчанию он использует синтаксический анализатор babel, но вы также можете настроить его на поток и машинописный текст.printWidth: это число, которое устанавливает длину строки, в которую Prettier попытается обернуть код. По умолчанию установлено значение 80 символов. Если длина строки кода превышает 80 символов, Prettier перенесет ее на следующую строку, чтобы код оставался в пределах указанной ширины. Это может помочь сохранить ваш код читабельным, предотвращая слишком длинные строки.proseWrap: это строковое значение, которое устанавливает, как обрабатывать длинные строки в прозаическом тексте, таком как уценка или сообщение фиксации git. Он может принимать «всегда», «никогда» или «сохранять» в качестве значения.
Установив эти параметры в файле .prettierrc, вы можете быть уверены, что ваш код будет отформатирован в соответствии с желаемой длиной строки и режимом переноса.
Стоит отметить, что хотя вы можете настроить все параметры в файле .prettierrc, вам не нужно их настраивать. Если вы не укажете параметр в файле, Prettier будет использовать значение по умолчанию для этого параметра.
В заключение, Prettier — это мощный инструмент для разработчиков, позволяющий быстро и последовательно форматировать свой код. Его поддержка различных языков и возможность интеграции с несколькими текстовыми редакторами делают его ценным для любого рабочего процесса разработчика. Используя Prettier, разработчики могут сосредоточиться на логике своего кода, позволяя инструменту позаботиться о форматировании. Это не только экономит время, но и помогает обеспечить согласованную и чистую кодовую базу. Являетесь ли вы опытным разработчиком или только начинаете, попробовав Prettier, вы улучшите свой опыт кодирования. Удачного (красивого) кодирования!
Другие истории из этой серии
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
