Перевод статьи «Start Using Prettier The Right Way».
Возможно, вы, как и я, установили расширение Prettier, включили форматирование при сохранении, разочаровались, когда код начал при сохранении прыгать, и отключили расширение. К сожалению, мне потребовалось много времени, чтобы начать использовать Prettier правильно. Цель этой статьи — помочь вам избежать моих ошибок.
Настраиваем Prettier
Если Prettier у вас не установлен — установите (инструкция).
В корне вашего проекта создайте файл .prettierrc. В нем будут содержаться все правила, которые должны применяться к этому проекту.
Инструкция для тех, кто хочет просто использовать Prettier, не вдаваясь в подробности его работы: просто вставьте в файл .prettierrc код, приведенный ниже.
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true
}
Ну а если вы все-таки хотите знать, что значат все эти настройки, — читайте дальше, я разберу каждую строку.
Объяснение настроек
Замыкающие запятые
Начиная с ES5 мы можем ставить замыкающие запятые в JavaScript-коде (обратите внимание, что они не разрешены в JSON). Мне очень это нравится, потому так можно просто добавлять свойства в объект, не проверяя сперва, есть ли запятая в расположенной выше строке. Казалось бы, один символ — сущая ерунда, ни на что не влияет. Но поверьте: влияет, и еще как.
Давайте посмотрим на эту опцию в действии.
{ "trailingComma": 2 }
// вот это
let obj = {
foo: "foo",
bar: "bar"
}
// превращается в это
let obj = {
foo: "foo",
bar: "bar",
}
Ширина Tab
Эту опцию объяснить проще всего. Речь идет о смене ширины отступа, который вы делаете клавишей tab, с дефолтных 4 пробелов на 2.
Смотрим в действии.
{ "tabWidth": 2 }
// вот это
let obj = {
foo: "foo",
bar: {
bar: "bar"
},
}
// превращается в это
let obj = {
foo: "foo",
bar: {
bar: "bar"
},
}
Точки с запятой
Что в JavaScript хорошо, так это автоматическая вставка точки с запятой. Но это также может быть головной болью, если одни члены команды используют точки с запятой, а другие — нет. Компромиссный вариант — добавлять точки с запятой при форматировании. Это позволяет всем членам команды видеть, где на самом деле находятся подразумеваемые точки с запятой.
Смотрим пример.
{ "semi": true }
// вот это let foo = 0 let bar = 10 // превращается в это let foo = 0; let bar = 10;
Стандартизированные кавычки
Две последние опции касаются кавычек. Вторая из них нужна, если вы пишете JSX. Эти опции указывают Prettier конвертировать все двойные кавычки в одинарные. Если вам нужно использовать апостроф, просто воспользуйтесь клавишей escape, и Prettier сделает именно в этой отдельной строке двойные кавычки.
Опция в действии.
{ "singleQuote": true }
// вот это let foo = "Hello World" let bar = 'Don\'t try this at home.' // превращается в это let foo = 'Hello World' let bar = "Don't try this at home."
Итоги
Теперь, когда я лучше разобрался в Prettier и том, как использовать его в своем рабочем процессе, он стал для меня незаменимым инструментом. С ним я работаю куда более продуктивно и пишу более чистый код.
Возможно, я пропустил какие-то полезные опции, которые стоило бы включить в файл .prettierrc? Поделитесь в комментариях!
Примечание редакции Techrocks. Приведем также пару комментариев к оригинальной статье.
Niki Hristov
Я разместил весь свой конфиг Prettier в папке, где хранятся все мои проекты. Таким образом мне не приходится устанавливать Prettier в каждый JavaScript-проект, над которым я работаю. VSCode автоматически форматирует любой проект, находящийся в основной папке.
Michael, в ответ Niki Hristov
Вы можете сократить свой файл конфигурации, удалив опции, которые совпадают с дефолтными настройками Prettier.
В документации указан еще один способ конфигурации. Можно опубликовать свой конфиг как NPM-пакет, хотя бы даже только на GitHub. После этого вы сможете устанавливать свой собственный пакет во все свои проекты. Таким образом любой человек, который тоже захочет поработать над вашими проектами (контрибьютор на GitHub) будет использовать тот же конфиг-файл.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
