Ako nastaviť krajšie v kóde Visual Studio

Písanie čistého a čitateľného kódu je nevyhnutné, či už pracujete sami alebo s tímom vývojárov. Zatiaľ čo k čitateľnosti kódu prispieva mnoho faktorov, jedným z najdôležitejších je konzistentné formátovanie kódu.

Ale tu je problém: manuálne formátovanie kódu môže byť absolútnou bolesťou a veľmi náchylné na chyby. Nástroje ako Prettier výrazne zjednodušujú formátovanie HTML, CSS, JavaScriptu a ďalších jazykov. Zistite, ako nainštalovať a používať rozšírenie Prettier na formátovanie kódu, ako aj niektoré pokročilé nastavenia konfigurácie.

Inštalácia Prettier

Pred pokračovaním sa uistite, že máte v počítači nainštalovaný súbor Node.js. Najnovšiu verziu si môžete nainštalovať z oficiálna stránka na stiahnutie Node.js. Dodáva sa s správca balíkov uzlov (npm) vstavaný, ktorý budete používať na správu svojich balíkov Node.js.

Po potvrdení, že Node.js je nainštalovaný lokálne, začnite vytvorením prázdneho adresára pre váš projekt. Adresár môžete pomenovať

krajšia ukážka.

Potom pomocou príkazového riadka cd do tohto adresára a potom spustite nasledujúci príkaz na inicializáciu projektu Node.js:

npm init -y

Tento príkaz vygeneruje súbor package.json obsahujúci predvolené nastavenia.

Ak chcete nainštalovať rozšírenie Prettier, spustite tento príkaz terminálu:

npm i --save-dev krajšie

The --save-dev flag sa nainštaluje krajšie ako závislosť pre vývojárov, čo znamená, že sa používa iba počas vývoja.

Teraz, keď ho máte nainštalovaný, môžete začať skúmať, ako Prettier funguje pomocou príkazového riadku.

Používanie Prettier cez príkazový riadok

Začnite vytvorením a script.js súbor a vyplňte ho nasledujúcim kódom:

funkciusúčet(a, b) { vrátiť a + b}
konšt používateľ = { názov: "Kyle", Vek: 27,
 isProgrammer: pravda,
 longKey: "hodnota",
 ďalšie údaje: 3
}

Ak chcete naformátovať kód v tomto súbore script.js cez príkazový riadok, spustite nasledujúci príkaz:

npx krajší --write script.js

Príkaz preformátuje kód JavaScript v script.js na predvolený štandard Prettier. Toto bude výsledok:

funkciusúčet(a, b) {
vrátiť a + b;
}
konšt používateľ = {
 názov: "Kyle",
 Vek: 27,
 isProgrammer: pravda,
 longKey: "hodnota",
 ďalšie údaje: 3,
};

Značky HTML môžete formátovať aj z príkazového riadku. Vytvorte index.html súbor v rovnakom adresári ako script.js. Potom do súboru vložte nasledujúci zle naformátovaný kód HTML:

"" alt=""trieda="veľká ikona počasia">

trieda="currentHeaderTemp"><rozpätie>21rozpätie></div>
</div>
 </header>

Ak chcete formátovať HTML, spustite tento príkaz:

npx krajší --write index.html

Tento príkaz preformátuje HTML na predvolený štandard Prettier, čo vedie k nasledujúcemu kódu:

<hlavička>
<div>
<imgsrc=""alt=""trieda="veľká ikona počasia" />
<divtrieda="currentHeaderTemp"><rozpätie>21rozpätie>div>
div>
hlavička>

Môžete tiež použiť --skontrolovať príznak, aby ste skontrolovali, či kód zodpovedá štandardom spoločnosti Prettier. Nasledujúci príklad kontroly script.js:

npx krajší --skontrolujte script.js

To je užitočné, ak chcete, aby sa pred potvrdením ubezpečil, že ľudia používajú Prettier a formátujú súbory pred ich odoslaním do Gitu. Toto funguje dobre, keď prispievanie k open source.

Integrácia Prettier do kódu Visual Studio

Používanie Prettier cez príkazový riadok môže byť utrpením. Namiesto manuálneho spúšťania príkazu zakaždým, keď chcete formátovať kód, môžete ho nastaviť tak, aby sa formátoval automaticky pri zmene súboru. Našťastie Visual Studio Code (VS Code) má zabudovaný spôsob, ako to urobiť za vás.

Choďte na Rozšírenia vo VS Code a vyhľadajte Krajšie. Kliknite na Prettier - Formátovač kódu, nainštalujte ho a potom ho povoľte.

Prejdite do nastavení kódu VS tak, že prejdete na Súbor > Predvoľby > Nastavenia. Vo vyhľadávacom poli vyhľadajte Krajšie. Nájdete tu množstvo možností, ktoré vám pomôžu nakonfigurovať rozšírenie Prettier.

Zvyčajne si vystačíte s predvolenými nastaveniami. Jediná vec, ktorú môžete zmeniť, sú bodkočiarky (ak chcete, môžete ich odstrániť). V opačnom prípade je všetko predvolené, ale môžete to zmeniť, ako chcete.

Nezabudnite povoliť formatonsave možnosť, aby sa kód v každom súbore automaticky naformátoval, keď súbor uložíte. Ak ju chcete povoliť, stačí vyhľadať formatonsave a začiarknite políčko.

Ak nepoužívate VSCode alebo rozšírenie z nejakého dôvodu nefunguje, môžete stiahnite si knižnicu onchange. Toto spustí príkaz na formátovanie kódu vždy, keď zmeníte súbor.

Ako ignorovať súbory pri formátovaní pomocou programu Prettier

Ak by ste mali behať krajšie --písať príkaz na celý váš priečinok, prejde každý jeden z vašich modulov uzla. Nemali by ste však strácať čas formátovaním kódu iných ľudí!

Ak chcete tento problém obísť, vytvorte a .prettierignore súbor a zahrnúť výraz node_modules v súbore. Ak by ste mali spustiť --písať príkaz na celý priečinok, preformátuje všetky súbory okrem súborov v node_modules priečinok.

Môžete tiež ignorovať súbory so špecifickou príponou. Napríklad, ak chcete ignorovať všetky HTML súbory, jednoducho pridajte *.html do .prettierignore.

Ako nakonfigurovať krajšie

Môžete nakonfigurovať, ako chcete, aby Prettier pracoval s rôznymi možnosťami. Jedným zo spôsobov je pridať a krajšie kľúč k vášmu package.json súbor. Hodnota bude objekt obsahujúci všetky možnosti konfigurácie:

{
 ...
"skriptá": {
"test": "echo \"Chyba: nebol zadaný žiadny test\" && ukončenie 1"
 },
 krajšie: {
// možnosti sú tu
 }
}

Druhou možnosťou (ktorú odporúčame) je vytvorenie a .prettierrc súbor. Tento súbor vám umožní vykonávať všetky druhy prispôsobení.

Povedzme, že nemáte radi bodkočiarky. Môžete ich odstrániť umiestnením nasledujúceho objektu do súboru:

{
"polo": pravda,
"prepíše": [
 {
"súbory": ".ts",
"možnosti": {
"polo": falošný
 }
 }
 ]
}

The prepíše vlastnosť umožňuje definovať vlastné prepísania pre určité súbory alebo prípony súborov. V tomto prípade hovoríme, že všetky súbory končiace na .ts (t. j. súbory strojopisu) by nemali mať žiadne bodkočiarky.

Používanie Prettier With ESLint

ESLint je nástroj na linting na zisťovanie chýb v kóde JavaScript, ako aj na jeho formátovanie. Ak používate Prettier, pravdepodobne by ste nechceli používať ESLint aj na formátovanie. Ak ich chcete používať spolu, musíte ich nainštalovať a nastaviť eslint-config-prettier. Tento nástroj vypne všetky konfigurácie ESLint pre veci, ktoré už Prettier zvláda.

Najprv ho musíte nainštalovať:

npm i --save-dev eslint-config-prettier

Potom ho pridajte do zoznamu rozšírení v .eslintrc súbor (uistite sa, že je to posledná vec v zozname):

{
"predlžuje": [
"nejaká-iná-konfigurácia-vy-používate",
"krajší"
 ],
"pravidlá": {
"zarážka": "chyba"
 }
}

Teraz ESLint zakáže všetky pravidlá, o ktoré sa už Prettier stará, aby sa predišlo konfliktom.

Vyčistite si kódovú základňu s Prettier a ESLint

Prettier je ideálny nástroj na vyčistenie kódu a vynútenie konzistentného formátovania v rámci projektu. Nastavenie na prácu s kódom VS znamená, že je vždy na dosah.

ESLint je nevyhnutný JavaScriptový nástroj, ktorý ide ruka v ruke s Prettier. Poskytuje množstvo funkcií a možností prispôsobenia, ktoré presahujú rámec základného formátovania. Naučte sa používať ESLint s JavaScriptom, ak chcete byť produktívnejší vývojár.