Hogyan állítsunk be szebbet a Visual Studio Code-ban

A tiszta és olvasható kód írása elengedhetetlen, akár egyedül, akár fejlesztői csapattal dolgozik. Bár számos tényező hozzájárul a kód olvashatóságához, az egyik legfontosabb a következetes kódformázás.

De itt van a probléma: a kézi kódformázás abszolút fájdalommal jár, és nagyon hajlamos a hibákra. Az olyan eszközök, mint a Prettier, sokkal egyszerűbbé teszik a HTML, CSS, JavaScript és más nyelvek formázását. Fedezze fel, hogyan telepítheti és használhatja a Prettier bővítményt a kód formázásához, valamint néhány speciális konfigurációs beállítást.

A Prettier telepítése

A folytatás előtt győződjön meg arról, hogy a Node.js telepítve van a számítógépén. A legújabb verziót a hivatalos Node.js letöltési oldal. Ez jár hozzá a csomóponti csomagkezelő (npm) beépített, amelyet a Node.js csomagok kezelésére fog használni.

Miután meggyőződött arról, hogy a Node.js helyileg telepítve van, kezdje el egy üres könyvtár létrehozásával a projekt számára. Elnevezheti a könyvtárat

szebb-demó.

Ezután írja be a cd-t a könyvtárba egy parancssor segítségével, majd futtassa a következő parancsot a Node.js projekt inicializálásához:

npm init -y

Ez a parancs létrehoz egy package.json fájlt, amely tartalmazza az alapértelmezett beállításokat.

A Prettier bővítmény telepítéséhez futtassa ezt a terminálparancsot:

npm i --save-dev szebb

A --save-dev A flag szebben telepítődik fejlesztői függőségként, ami azt jelenti, hogy csak a fejlesztés során használják.

Most, hogy telepítette, megkezdheti a Prettier működésének felfedezését a parancssorban történő használatával.

A Prettier használata a parancssoron keresztül

Kezdje azzal, hogy létrehoz egy script.js fájlt, és töltse fel a következő kóddal:

funkcióösszeg(a, b) { Visszatérés a + b }
const felhasználó = { név: "Kyle", kor: 27,
 isProgrammer: igaz,
 longKey: "Érték",
 további adatok: 3
}

A script.js fájl kódjának parancssoron keresztüli formázásához futtassa a következő parancsot:

npx szebb --write script.js

A parancs újraformázza a JavaScript kódot a script.js-ben a Prettier alapértelmezett szabványára. Ez lesz az eredmény:

funkcióösszeg(a, b) {
Visszatérés a + b;
}
const felhasználó = {
 név: "Kyle",
 kor: 27,
 isProgrammer: igaz,
 longKey: "Érték",
 további adatok: 3,
};

A HTML-jelölést a parancssorból is formázhatja. Hozzon létre egy index.html fájl ugyanabban a könyvtárban, mint script.js. Ezután illessze be a következő rosszul formázott HTML-kódot a fájlba:

"" alt=""osztály="időjárás-ikon nagy">

osztály="currentHeaderTemp"><span>21span></div>
</div>
 </header>

A HTML formázásához futtassa ezt a parancsot:

npx szebb --write index.html

Ez a parancs újraformázza a HTML-kódot a Prettier alapértelmezett szabványára, ami a következő kódot eredményezi:

<fejléc>
<div>
<imgsrc=""alt=""osztály="időjárás-ikon nagy" />
<divosztály="currentHeaderTemp"><span>21span>div>
div>
fejléc>

Használhatja a --jelölje be zászlót, hogy ellenőrizze, hogy a kód megfelel-e a Prettier szabványainak. A következő példa ellenőrzi script.js:

npx szebb -- ellenőrizze a script.js fájlt

Ez akkor hasznos, ha egy előzetes véglegesítési horgot szeretne biztosítani, hogy az emberek a Prettier-t használják, és formázzák a fájlokat, mielőtt átküldenék őket a Gitbe. Ez akkor működik jól, ha hozzájárul a nyílt forráskódhoz.

A Prettier integrálása a Visual Studio kódba

A Prettier parancssoron keresztüli használata fájdalmas lehet. Ahelyett, hogy manuálisan futtatna egy parancsot minden alkalommal, amikor formázni szeretné a kódot, beállíthatja, hogy a fájl módosításakor automatikusan formázza. Szerencsére a Visual Studio Code (VS Code) beépített módot kínál erre.

Menj a Kiterjesztések fület a VS Code-ban, és keressen rá Csinosabb. Kattintson Csinosabb - Kódformázó, telepítse, majd engedélyezze.

Lépjen be a VS Code beállításaiba a következőhöz navigálva Fájl > Beállítások > Beállítások. A keresőmezőben keressen rá Csinosabb. Rengeteg lehetőséget talál a Prettier bővítmény konfigurálásához.

Általában meg lehet boldogulni az alapértelmezett beállításokkal. Az egyetlen dolog, amit érdemes megfontolni, az a pontosvessző (ha akarja, eltávolíthatja őket). Ellenkező esetben minden alapértelmezettre van állítva, de tetszés szerint módosíthatja.

Feltétlenül engedélyezze a formátum mentése opciót, így az egyes fájlokban lévő kódok automatikusan formázódnak a fájl mentésekor. Az engedélyezéséhez csak keressen rá formátum mentése és jelölje be a négyzetet.

Ha nem használja a VSCode-ot, vagy a bővítmény valamilyen okból nem működik, megteheti töltse le az onchange könyvtárat. Ez lefuttatja a kód formázásához szükséges parancsot, amikor módosítja a fájlt.

Fájlok figyelmen kívül hagyása szebbnél szebb formázáskor

Ha futnád a szebbet --ír parancsot a teljes mappán, akkor minden egyes csomópontmodulon keresztül menne. De nem szabad időt vesztegetnie mások kódjának formázásával!

A probléma megkerüléséhez hozzon létre a .elég figyelmen kívül hagyni fájlt, és tartalmazza a kifejezést node_modules a fájlban. Ha futtatnád a --ír parancsot a teljes mappán, akkor az összes fájlt újraformázza, kivéve a mappában lévőket node_modules mappát.

Figyelmen kívül hagyhatja az adott kiterjesztésű fájlokat is. Például, ha figyelmen kívül szeretné hagyni az összes HTML-fájlt, egyszerűen adja hozzá *.html nak nek .elég figyelmen kívül hagyni.

Hogyan konfiguráljunk szebbet

Beállíthatja, hogy a Prettier hogyan működjön a különböző beállításokkal. Az egyik módja az a szebb kulcs a tiédhez package.json fájlt. Az érték egy objektum lesz, amely tartalmazza az összes konfigurációs lehetőséget:

{
 ...
"szkriptek": {
"teszt": "echo \"Hiba: nincs megadva teszt\" && kilépés 1"
 },
 szebb: {
// a lehetőségek itt találhatók
 }
}

A második lehetőség (amelyet javasolunk) az a .prettierrc fájlt. Ez a fájl lehetővé teszi mindenféle testreszabás elvégzését.

Tegyük fel, hogy nem szereted a pontosvesszőt. Eltávolíthatja őket, ha elhelyezi a következő objektumot a fájlban:

{
"félig": igaz,
"felülír": [
 {
"fájlok": ".ts",
"lehetőségek": {
"félig": hamis
 }
 }
 ]
}

A felülírja tulajdonság lehetővé teszi egyéni felülírások meghatározását bizonyos fájlokhoz vagy fájlkiterjesztésekhez. Ebben az esetben azt mondjuk, hogy minden fájl, amely számra végződik .ts (vagyis a gépírás fájlok) nem tartalmazhatnak pontosvesszőt.

A Prettier használata az ESLint-tel

Az ESLint egy linting eszköz a JavaScript kód hibáinak észlelésére és formázására. Ha Prettier-t használ, valószínűleg nem szeretné az ESLint-et használni a formázáshoz. Ha együtt szeretné használni őket, telepítenie és be kell állítania őket eslint-config-prettier. Ez az eszköz kikapcsolja az összes ESLint-konfigurációt azoknál a dolgoknál, amelyeket a Prettier már kezel.

Először telepítenie kell:

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

Ezután adja hozzá a kiterjesztések listájához a .eslintrc fájl (győződjön meg róla, hogy ez az utolsó dolog a listában):

{
"kiterjeszt": [
"some-other-config-you-use",
"szebb"
 ],
"szabályok": {
"behúzás": "hiba"
 }
}

Az ESLint most letilt minden olyan szabályt, amelyre a Prettier már gondoskodik, hogy megelőzze az ütközéseket.

Tisztítsa meg kódbázisát a Prettier és az ESLint segítségével

A Prettier ideális eszköz a kód megtisztításához és a konzisztens formázás kikényszerítéséhez a projekten belül. Ha beállítja, hogy a VS kóddal működjön, akkor mindig kéznél van.

Az ESLint egy kötelező JavaScript-eszköz, amely kéz a kézben jár a Prettier-rel. Rengeteg olyan funkciót és testreszabási lehetőséget kínál, amelyek túlmutatnak az alapvető formázáson. Ha produktívabb fejlesztő szeretne lenni, tanulja meg az ESLint használatát JavaScripttel.