Поддържане на чистия код с по-хубаво

Форматирането на кода изглежда като тривиална тема, но това е нещо, което може да повлияе на качеството и коректността на вашия код, как получава контрол върху версията и как си сътрудничите с други. Ако обаче не искате да затъвате в подробности къде отива всяка последна скоба, опитайте да възложите проблема на инструмента с отворен код, Prettier.

Форматиране на въпроси

Екипите за разработка на софтуер губят безброй часове в историята, спорейки за максималната дължина на линията или на коя линия трябва да върви скобата. Каквото и да се казва от личните предпочитания, повечето хора се съгласяват поне за едно: форматирането на кода трябва да бъде последователно в рамките на даден проект.

Prettier е инструмент, предназначен да постигне това. Дайте му малко код и той ще върне същия код, форматиран по последователен начин. Prettier има интеграция на текстов редактор, инструмент за команден ред и онлайн демонстрация.

Говорейки на правилния език

На първо място, ще искате да знаете дали Prettier е съвместим с езика или езиците, с които обикновено работите. Понастоящем Prettier се фокусира върху основен набор от езици, главно посветени на уеб разработката отпред, включително:

• JavaScript
• HTML
• CSS
• Sass
• Маркдаун
• ЯМЛ

Има и отворена поддръжка за допълнителни езици чрез приставки.

Изпробвайте по-хубаво с помощта на онлайн площадката

Преди дори да се опитате да инсталирате Prettier, може да искате да проверите детската площадка. Използвайки уеб интерфейс, можете да поставите някакъв примерен код и да наблюдавате как Prettier ще го преобразува. Това е чудесен начин да получите впечатление за това, което всъщност прави инструментът, но може да действа и като основен метод за използване на Prettier, ако вашите изисквания са по-леки.

По подразбиране детската площадка трябва да изглежда като два основни панела за текстов редактор, един отляво за вашия вход, а един отдясно, показващ изхода на Prettier. Първоначално ще видите примерния код, но можете просто да премахнете всичко това и да поставите в собствения си.

Опитайте например да въведете следния JavaScript:

(функция ()
{
window.alert ('добре')
}())

По-хубавото трябва да го превърне в:

(функция () {
window.alert ("добре");
})();

Забележете, по подразбиране промените, които Prettier прави, включват:

• Преобразуване на низове с единичен кавички в двойни кавички
• Добавяне на запетая
• Преобразуване на отстъпите в две интервали

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

Конфигуриране на опции

По-хубавото се самоопределя като „мнителен“, умишлен избор на дизайн, което означава, че контролът върху спецификите се жертва за простота и последователност. Той е предназначен за вас да настроите, а след това да забравите, вместо да останете заети с всеки последен детайл за форматиране на вашия код. (За алтернатива с много по-фин контрол върху всеки последен детайл за форматиране, опитайте еслинт.)

Авторите обаче също така осъзнават, че някои решения имат функционално въздействие освен това, как изглежда кодът. Някои опции - включително някои за наследени цели - остават, така че поне трябва да разберете какво правят, дори ако използвате Prettier в състоянието му по подразбиране.

Най-добрият начин за управление По-хубави опции е да ги запишете в конфигурационен файл. Има много начини да организирате това, но започнете, като създадете файл с име .prettierrc.json в локалната директория на проекта. Той може да съдържа всяка от поддържаните опции в стандартен JSON обект, напр.

{
"tabWidth": 8
}

Същият конфигурационен файл ще бъде прочетен от Prettier, независимо дали го стартирате чрез командния ред или поддържан текстов редактор.

Използвайки прежда или npm, инсталацията трябва да бъде ясна. За прежда:

$ прежда глобално добавете по-красива

И за npm:

$ npm install --global по-хубав

След като инсталирате Prettier глобално, трябва да можете да пишете:

$ по-красива

По подразбиране ще получите екран с помощен текст, който ще потвърди, че инструментът е инсталиран и работи правилно.

Почистване на файл

За да преформатирате файл, използвайте команда, подобна на:

$ по-красиво - напишете име на файл.js

Това ще замени оригиналния файл, което често е най-удобният подход. Като алтернатива, може просто да искате по-хубаво да действа върху всеки файл в проект:

$ по-красива - напишете.

Prettier ще работи във всички файлове в текущата директория, като форматира всички, които разпознава.

Можете също така да отпечатате резултата на стандартен изход, вместо да променяте оригиналния файл, което ви позволява да запишете изхода в друг файл или да го пренасочите другаде:

$ по-хубав test.js> test2.js

Проверка на файл

За да имате по-хубав отчет за чистотата на вашия код, без действително да правите промени, използвайте - чек флаг с едно име на файл или много:

$ по-красива --чек.

Ще получите изходен ред за всеки файл, който не съответства на очаквания формат, според конфигурацията на Prettier:

Проверка на форматирането ...
[предупреждавам] .prettierrc
[предупреждавам] .prettierrc.json
[предупреждение] Проблеми със стила на кода, открити в горния файл (и). Забравихте да стартирате Prettier?

Опции на командния ред

Стандартните опции на Prettier се предлагат като опции от командния ред, ако имате нужда от тях. Ето пример за това как - единична кавичка флагът влияе на изхода:

$ по-красива tmp.js
пример за функция () {
console.log ("здравей, свят");
}
$ по-красива - единична кавичка tmp.js
пример за функция () {
console.log ('здравей, свят');
}

Получаване на помощ

Инструментът за команден ред предоставя информативна помощ за всяка опция чрез --помогне флаг:

$ по-красива --помощ затваряща запетая
--trailing-запетая 
Отпечатвайте запетаи, където е възможно, когато са многоредови.
Валидни опции:
es5 Последващи запетаи, когато са валидни в ES5 (обекти, масиви и т.н.)
няма Задължителни запетаи.
всички последващи запетаи, където е възможно (включително аргументи на функцията).
По подразбиране: es5

Използване на текстов редактор

След като инсталирате Prettier, можете да го използвате в различни сценарии, в зависимост от това какъв набор от инструменти вече използвате. Шансовете са, че използвате текстов редактор. Prettier има обвързващи елементи за повечето от популярните, така че ето как да настроите три от тях:

Възвишен текст

JsPrettier е приставка Sublime Text, която прави Prettier достъпна в редактора. Въпреки че има няколко различни начина за инсталиране на JsPrettier, препоръчваме да използвате метода за управление на пакети. Вече трябва да сте инсталирали Prettier, след това отворете командната палитра на Sublime Text и изберете „Control Package: Install Package“:

След това потърсете „jsprettier“ и кликнете, за да го инсталирате:

След като JsPrettier бъде инсталиран, можете да щракнете с десния бутон върху всеки отворен файл, за да го форматирате. Можете също да зададете стойността на auto_format_on_save да се вярно в настройките на JsPrettier, което ще доведе до JsPrettier автоматично почистване на всички съвместими файлове, когато ги запишете в Sublime Text.

Атом

Инсталацията за Atom е много подобна на Sublime Text: просто използвайте вградения в редактора пакет мениджър, за да инсталирате по-красив-атом:

Веднъж инсталирана, използването е познато: пряк път или елемент от менюто ви позволява да форматирате файл при поискване, докато настройката Atom ви позволява автоматично да стартирате Prettier, когато файлът бъде запазен.

Вим

Vim е много мощен редактор, базиран на команден ред, който не е подходящ за начинаещи. Постигането на по-красива работа с vim е подходящо сложно, но все пак това са само няколко стъпки:

mkdir -p ~ / .vim / pack / plugins / start
git клонинг https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

Git е може би най-лесният начин за изтегляне на необходимите файлове, но всякакви средства за превръщане на vim-по-красив в тази начална директория трябва да свърши работата.

Веднъж инсталиран, Prettier автоматично ще се стартира, когато файлът бъде запазен в vi. Може да се стартира ръчно по всяко време чрез По-хубава команда:

Което трябва да доведе до изчистен файл:

Интегрирайте по-хубаво във вашия проект

Използването на код за форматиране като Prettier може да помогне за поддържането на кодова база, която е по-лесна за четене. Също така може да помогне да се заобиколят дебатите за това кой конкретен стил да се използва при кодиране - просто възложете тези решения на Prettier!

И накрая, може да се настрои git кука, за да се гарантира, че кодът винаги се почиства, когато е ангажиран с хранилището на вашия проект. Отделните разработчици могат да бъдат свободни да форматират своя код, както пожелаят, но централното копие винаги ще бъде чисто и последователно.

нано срещу Vim: Най-добрият текстов редактор на терминали, сравнен

Търсите терминален текстов редактор за Linux? Основният избор е между Vim и nano! Ето как се сравняват.

За автора