Како да подесите лепше у Висуал Студио Цоде-у

Писање чистог и читљивог кода је од суштинског значаја, било да радите сами или са тимом програмера. Док многи фактори доприносе читљивости кода, један од најважнијих је доследно форматирање кода.

Али ево проблема: ручно форматирање кода може бити апсолутна мука и врло склоно грешкама. Алати као што је Преттиер чине форматирање ХТМЛ-а, ЦСС-а, ЈаваСцрипт-а и других језика много лакшим. Откријте како да инсталирате и користите екстензију Преттиер за форматирање кода, као и нека напредна подешавања конфигурације.

Инсталирање Преттиер

Пре него што наставите, уверите се да имате Ноде.јс инсталиран на вашем рачунару. Можете инсталирати најновију верзију са званична страница за преузимање Ноде.јс. Долази са менаџер пакета чвора (нпм) уграђени, који ћете користити за управљање вашим Ноде.јс пакетима.

Након што потврдите да је Ноде.јс инсталиран локално, почните креирањем празног директоријума за ваш пројекат. Можете именовати именик лепше-демо.

Затим, цд у тај директоријум користећи командну линију, а затим покрените следећу команду да бисте иницијализовали Ноде.јс пројекат:

нпм инит -и

Ова команда генерише датотеку пацкаге.јсон која садржи подразумевана подешавања.

Да бисте инсталирали проширење Преттиер, покрените ову наредбу терминала:

нпм и --саве-дев лепши

Тхе --саве-дев флаг се лепше инсталира као зависност за програмере, што значи да се користи само током развоја.

Сада када сте га инсталирали, можете почети да истражујете како Преттиер функционише користећи га на командној линији.

Коришћење Преттиер-а преко командне линије

Почните креирањем а сцрипт.јс датотеку и попуњавајући је следећим кодом:

функцијасум(а, б) { повратак а + б}
конст корисник = { име: "Киле", старости: 27,
 исПрограмер: истина,
 лонгКеи: "Вредност",
 више података: 3
}

Да бисте форматирали код у овој датотеци сцрипт.јс преко командне линије, покрените следећу команду:

нпк лепши --врите сцрипт.јс

Команда реформатира ЈаваСцрипт код у сцрипт.јс у Преттиеров подразумевани стандард. Ово ће бити резултат:

функцијасум(а, б) {
повратак а + б;
}
конст корисник = {
 име: "Киле",
 старост: 27,
 исПрограмер: истина,
 лонгКеи: "Вредност",
 више података: 3,
};

Такође можете форматирати ХТМЛ ознаке из командне линије. Направите ан индек.хтмл датотека у истом директоријуму као сцрипт.јс. Затим налепите следећи лоше форматиран ХТМЛ у датотеку:

"" алт=""класа="икона времена велика">

класа="цуррентХеадерТемп"><спан>21спан></div>
</div>
 </header>

Да бисте форматирали ХТМЛ, покрените ову команду:

нпк лепши --врите индек.хтмл

Ова команда преформатира ХТМЛ у Преттиеров подразумевани стандард, што резултира следећим кодом:

<заглавље>
<див>
<имгсрц=""алт=""класа="икона времена велика" />
<дивкласа="цуррентХеадерТемп"><спан>21спан>див>
див>
заглавље>

Такође можете користити --проверавати заставицу да проверите да ли је код у складу са Преттиеровим стандардима. Следећи пример проверава сцрипт.јс:

нпк лепши --проверите сцрипт.јс

Ово је корисно ако желите закачицу пре урезивања како бисте били сигурни да људи користе Преттиер и форматирају датотеке пре него што их гурну у Гит. Ово добро функционише када доприноси отвореном коду.

Интеграција Преттиер у Висуал Студио Цоде

Коришћење Преттиера преко командне линије може бити мука. Уместо ручног покретања команде сваки пут када желите да форматирате код, можете је подесити да аутоматски форматира када промените датотеку. Срећом, Висуал Студио Цоде (ВС Цоде) има уграђен начин да то уради уместо вас.

Иди на Екстензије картицу у ВС коду и потражите Лепше. Кликните на Преттиер - Форматер кода, инсталирајте га, а затим га омогућите.

Идите у подешавања ВС кода тако што ћете отићи на Филе > Преференцес > Сеттингс. У пољу за претрагу потражите Лепше. Наћи ћете гомилу опција које ће вам помоћи да конфигуришете додатак Преттиер.

Обично можете да прођете са подразумеваним подешавањима. Једина ствар коју бисте могли да промените су тачке и зарез (можете их уклонити ако желите). У супротном, све је подешено на подразумевано, али можете да промените како год желите.

Обавезно омогућите форматонсаве опцију тако да се код у свакој датотеци аутоматски форматира када сачувате ту датотеку. Да бисте то омогућили, само потражите форматонсаве и означите поље.

Ако не користите ВСЦоде или проширење не ради из неког разлога, можете преузмите онцханге библиотеку. Ово покреће наредбу за форматирање кода сваки пут када промените датотеку.

Како занемарити датотеке приликом форматирања са Преттиер

Ако би трчао лепши --врите команду за целу фасциклу, прошла би кроз сваки од ваших модула чвора. Али не би требало да губите време на форматирање кода других људи!

Да бисте заобишли овај проблем, креирајте а .преттиеригноре датотеку и укључите термин ноде_модулес у фајлу. Ако бисте покренули --врите команду на целој фасцикли, она би поново форматирала све датотеке осим оних у ноде_модулес фолдер.

Такође можете занемарити датотеке са одређеним екстензијом. На пример, ако желите да занемарите све ХТМЛ датотеке, једноставно додајте *.хтмл до .преттиеригноре.

Како да конфигуришете лепше

Можете да конфигуришете како желите да Преттиер ради са различитим опцијама. Један од начина је додавање а лепша кључ за ваш пацкаге.јсон фајл. Вредност ће бити објекат који садржи све опције конфигурације:

{
 ...
"скрипте": {
"тест": "ецхо \"Грешка: није наведен тест\" && излаз 1"
 },
 лепши: {
// опције иду овде
 }
}

Друга опција (коју препоручујемо) је креирање а .преттиеррц фајл. Ова датотека ће вам омогућити да извршите све врсте прилагођавања.

Рецимо да не волите тачке и зарезе. Можете их уклонити постављањем следећег објекта у датотеку:

{
"полу": истина,
"превазилази": [
 {
"фајлови": ".тс",
"Опције": {
"полу": лажно
 }
 }
 ]
}

Тхе надјачава својство вам омогућава да дефинишете прилагођена замена за одређене датотеке или екстензије датотека. У овом случају кажемо да све датотеке које се завршавају на .тс (то јест, датотеке куцаног текста) не би требало да имају тачку и зарез.

Коришћење Преттиер са ЕСЛинт-ом

ЕСЛинт је линтинг алат за откривање грешака у ЈаваСцрипт коду, као и за његово форматирање. Ако користите Преттиер, вероватно не бисте желели да користите и ЕСЛинт за форматирање. Да бисте их користили заједно, мораћете да инсталирате и подесите еслинт-цонфиг-преттиер. Овај алат искључује све ЕСЛинт конфигурације за ствари којима Преттиер већ рукује.

Прво морате да га инсталирате:

нпм и --саве-дев еслинт-цонфиг-преттиер

Затим га додајте на листу проширења у .еслинтрц фајл (уверите се да је последња ствар на листи):

{
"проширује": [
"нека-друга-конфигурација-коју-користите",
"лепша"
 ],
"Правила": {
"увлачење": "грешка"
 }
}

Сада ће ЕСЛинт онемогућити сва правила о којима Преттиер већ води рачуна да спречи конфликте.

Очистите своју базу кода помоћу Преттиер и ЕСЛинт-а

Преттиер је идеалан алат за чишћење вашег кода и спровођење доследног форматирања у оквиру пројекта. Подешавање да ради са ВС кодом значи да је увек на дохват руке.

ЕСЛинт је обавезан ЈаваСцрипт алат који иде руку под руку са Преттиер-ом. Пружа мноштво функција и опција прилагођавања које превазилазе основно форматирање. Научите како да користите ЕСЛинт са ЈаваСцрипт-ом ако желите да будете продуктивнији програмер.