Сегодня я напишу о пакете редакторов, которым пользуюсь несколько месяцев — Prettier. Prettier — это утвержденный форматировщик кода, который можно использовать с JavaScript, включая ES2017, JSX, Flow, TypeScript, CSS, SCSS, Less, Vue, GraphQL, JSON, Markdown и YAML. Его можно запустить в вашем любимом редакторе кода — я использую его в Atom — автоматически при сохранении, в хуке pre-commit, когда вы создаете файлы перед их фиксацией, или в среде CLI. По словам Претье, он будет обеспечивать согласованный стиль, анализируя ваш код и перепечатывая его по собственным правилам, учитывающим максимальную длину строки, при необходимости перенося код. ¹
Вот основы того, что делает Prettier:
- Он берет ваш код и переформатирует его, принимая во внимание длину строки. Если у вас есть довольно длинная строка кода, она разобьется на несколько строк. Возьмите этот пример. (Medium уже оборачивает этот текст, но в редакторе кода, который не настроен на перенос текста, все это будет в одной строке.)
wowFunc(longLongArgument(), evenLongerArgument(), superDuperLongArgument(), evenSuperDupererLongArgument());
Prettier разбил бы это на следующее.
wowFunc( longLongArgument(), evenLongerArgument(), superDuperLongArgument(), evenSuperDupererLongArgument() );
Это легче для глаз, верно? И если у вас Prettier настроен на «переключение формата при сохранении», он будет делать это автоматически, на ваших глазах, всякий раз, когда вы сохраняете документ.
Мне очень нравится эта особенность Prettier. Это облегчает создание легко читаемого кода с правильными отступами. Однако в некоторых ситуациях это немного раздражает. Например, иногда мой код содержит пустые фигурные скобки до того, как я написал блок кода, который они должны содержать. Например, я, возможно, еще не написал блок кода, который будет выполняться, если условие в условном выражении истинно.
if (x === 2) {
}
Мне нравится открывать и закрывать скобки на разных строках и даже оставлять между ними пустую строку, так что покажите мне, куда пойдет блок кода. Если я сделаю это, а затем сохраню файл, чтобы посмотреть, работает ли мой другой код должным образом, Prettier закроет пространство между скобками.
if (x === 2) {}
Это явно не конец света, но немного раздражает. И есть много подобных обстоятельств, некоторые из них легче избежать, так как иногда я получаю небольшое удовольствие, когда дело доходит до сохранения файлов. Я полагаю, что мог бы обойти этот случай, используя комментарий в качестве заполнителя в блоке кода. И теперь, когда я об этом думаю, я, вероятно, должен включить комментарий в блок кода, указывающий, что ему принадлежит. В любом случае, это то, на что следует обратить внимание.
2. Prettier также добавляет точки с запятой там, где они должны быть, и иногда удаляет их, когда они не нужны. Это может иметь для вас значение, а может и не иметь, поскольку движки Javascript добавляют точки с запятой за кулисами, даже если вы этого не делаете.
Прежде чем мы пойдем дальше, давайте поговорим о месте точки с запятой в Javascript. Точки с запятой обязательны, когда два или более оператора находятся в одной строке. Точки с запятой необязательны в конце инструкций, за которыми следует разрыв строки, или когда в блоке кода есть только одна инструкция. ² В этих ситуациях точки с запятой необязательны, потому что механизм JavaScript автоматически вставит их там, где они необходимы, когда он анализирует синтаксис при первом проходе по коду.
Итак, стоит ли вам беспокоиться о вставке точек с запятой там, где они необязательны, но не обязательны? Вот мнение Школы Флэтайрон:
…точки с запятойявляютсячастью синтаксиса JavaScript независимо от того, вставляете ли вы их или движок. Неплохо попрактиковаться в размещении их в конце ваших утверждений, по крайней мере, до тех пор, пока вы не освоитесь с общим синтаксисом языка. Многие примеры в следующих уроках будут включать точки с запятой, чтобы показать вам, куда они идут, и мы рекомендуем вам следовать тем же шаблонам.²
Это кажется разумной политикой. Используйте точки с запятой в конце своих утверждений, даже если это необязательно, даже если в противном случае движок JavaScript сделал бы это за вас. Таким образом, вы узнаете, где они находятся, куда движок JavaScript добавил бы их для вас, если бы вы их пропустили.
Если вы только начинаете изучать JavaScript, вам может быть сложно научиться распознавать, где в вашем коде место точкам с запятой, когда «многие», но не все примеры, в которых вы знакомитесь с JavaScript, на самом деле используют их там, где они должны быть. Когда мы учимся кодировать, мы сталкиваемся со многими примерами, и если точки с запятой в них используются непоследовательно, нам будет труднее научиться их последовательно использовать. И это непоследовательное использование точек с запятой является проблемой в учебниках, примерах и объяснениях по всему Интернету. Поскольку движок JavaScript обычно вставляет точки с запятой, если они необходимы, многие авторы доступных руководств, примеров и объяснений, кажется, просто используют их, когда им приходит в голову, что означает, что они часто опускают их.
Столкновение с этим несоответствием может затруднить развитие способности распознавать, где они на самом деле принадлежат, и использовать их последовательно самостоятельно. Я обнаружил, что бессистемно использую точки с запятой, разбрасывая их здесь и там, надеясь, что они приземляются только там, где им место.
Prettier может помочь с этим. Вот то, что я думаю, было бы хорошей политикой для тех, кто изучает Javascript:
Используйте красивее. Настройте его на «переключение формата при сохранении». Задайте себе задачу вставлять точки с запятой между операторами, когда два или более операторов находятся в одной строке — например, при использовании цикла for. Если вы их не укажете, Prettier не сможет вам помочь. Для точек с запятой в конце оператора вы можете оставить это на усмотрение Prettier. Затем часто сохраняйте документ во время написания кода. (Вы все равно должны это сделать.) Сохраняя документ, обратите внимание, где Prettier ставит точку с запятой, а где нет. Prettier сделает это с последовательностью, которую трудно найти в учебниках, примерах и объяснениях, доступных в Интернете. Это должно помочь вам научиться распознавать, где они на самом деле принадлежат. Когда вы почувствуете, что освоились, начните самостоятельно вставлять их в свой код. Но убедитесь, что вы обращаете внимание на то, что происходит после сохранения кода. Точки с запятой, которые вы вставили, остались или Преттиер удалил их? Это должно помочь вам продолжить совершенствовать свое обучение и, в конечном счете, освоить использование точки с запятой в JavaScript!
Вы все еще можете спросить, почему мы должны заботиться о точках с запятой, если движок JavaScript добавляет их за нас. Это разумный вопрос, и, в конце концов, можно не беспокоиться о том, чтобы добавить их самостоятельно. Иметь на одну вещь меньше, о которой нужно беспокоиться, никогда не бывает плохо. Я, конечно, не слишком беспокоюсь о них. Но я скажу, что поиск места для точки с запятой может помочь разобраться с чем-то более важным: различием между выражениями и инструкциями. Выражения производят значение при оценке и могут использоваться везде, где ожидается значение, в то время как операторы более или менее выполняют действия. ³ Поскольку точка с запятой ставится в конце операторов, но не выражений, отсутствие четкого понимания различия может привести к к случайному использованию точки с запятой. Prettier также может помочь распознать это различие. При сохранении файла обратите внимание, где Prettier ставит точку с запятой, а где нет. Обратите внимание, где он удаляет любые точки с запятой, которые вы добавили сами. Если Prettier не вставил точку с запятой в конце кандидата выражения/оператора или, возможно, удалил точку, которую вы вставили, то вы получили выражение. Если он вставил точку с запятой, то вы смотрите на оператор.
Итак, здесь нет ничего революционного — и это, безусловно, менее полезно, чем то, как Prettier переформатирует код — просто рекомендация для тех, кто еще не очень хорошо разбирается в том, где место точки с запятой или в разнице между операторами и выражениями. Перед лицом непоследовательности большинства руководств, примеров и объяснений, последовательность Prettier может быть, по крайней мере, хорошим способом научиться распознавать, где место точки с запятой, и, таким образом, также помочь вам понять различие между операторами и точками с запятой.
Однако, если вы не будете осторожны, у вас могут возникнуть небольшие проблемы с этой функцией Prettier. Как я уже отмечал выше, иногда я получаю небольшой триггер, когда дело доходит до сохранения файлов. Каждый раз, когда я делаю паузу, чтобы подумать во время написания кода, я, скорее всего, рефлекторно наберу control s. Я даже делаю это, опять же рефлекторно, когда курсор мигает в конце незавершенной строки кода. Когда я это делаю, prettier добавляет туда точку с запятой. Проблема в том, что точка с запятой может стоять или не стоять в конце строки после ее завершения. И я не всегда помню, чтобы удалить его, если это не так. В первый раз, когда это произошло, я изо всех сил пытался отладить ошибку. Как только я проследил его до точки с запятой, я почувствовал себя немного обманутым, поскольку я даже не набрал эту точку с запятой. Теперь, когда это случалось несколько раз, я знаю, что нужно на это обращать внимание. И я также стараюсь быть немного менее счастливым, когда дело доходит до сохранения файла, над которым я работаю.
