Visual Studio Kodunda Prettier Nasıl Kurulur

İster tek başınıza ister geliştiricilerden oluşan bir ekiple çalışıyor olun, temiz ve okunabilir kod yazmak çok önemlidir. Kodun okunabilirliğine birçok faktör katkıda bulunurken, en önemlilerinden biri tutarlı kod biçimlendirmesidir.

Ancak sorun şu: manuel kod biçimlendirme tam bir sıkıntı olabilir ve hataya çok açık olabilir. Prettier gibi araçlar, HTML, CSS, JavaScript ve diğer dilleri biçimlendirmeyi çok daha kolay hale getirir. Kod biçimlendirme için Prettier uzantısını ve ayrıca bazı gelişmiş yapılandırma ayarlarını nasıl kuracağınızı ve kullanacağınızı keşfedin.

Daha Güzel Kurulum

Devam etmeden önce, bilgisayarınızda Node.js'nin kurulu olduğundan emin olun. En son sürümü şuradan yükleyebilirsiniz: resmi Node.js indirme sayfası. ile birlikte gelir düğüm paketi yöneticisi (npm) Node.js paketlerinizi yönetmek için kullanacağınız yerleşik.

Node.js'nin yerel olarak kurulduğunu onayladıktan sonra, projeniz için boş bir dizin oluşturarak başlayın. dizine isim verebilirsiniz daha güzel demo.

Ardından, bir komut satırı kullanarak bu dizine cd yazın, ardından bir Node.js projesini başlatmak için aşağıdaki komutu çalıştırın:

npm başlatma -y

Bu komut, varsayılan ayarları içeren bir package.json dosyası oluşturur.

Prettier uzantısını yüklemek için şu terminal komutunu çalıştırın:

npm i --save-dev daha güzel

bu --save-dev bayrak, geliştirici bağımlılığı olarak daha güzel yüklenir, yani yalnızca geliştirme sırasında kullanılır.

Artık yüklediğinize göre Prettier'ın komut satırında kullanarak nasıl çalıştığını keşfetmeye başlayabilirsiniz.

Prettier'ı Komut Satırı Yoluyla Kullanma

oluşturarak başlayın komut dosyası.js dosya ve aşağıdaki kod ile doldurma:

işlevtoplam(bir, b) { geri dönmek bir + b }
sabit kullanıcı = { isim: "Kyle", yaş: 27,
 Programcı: doğru,
 uzunKey: "Değer",
 daha fazla veri: 3
}

Bu script.js dosyasındaki kodu komut satırı aracılığıyla biçimlendirmek için aşağıdaki komutu çalıştırın:

npx daha güzel -- script.js yaz

Komut, script.js'deki JavaScript kodunu Prettier'in varsayılan standardına göre yeniden biçimlendirir. Bu sonuç olacak:

işlevtoplam(bir, b) {
geri dönmek bir + b;
}
sabit kullanıcı = {
 isim: "Kyle",
 yaş: 27,
 Programcı: doğru,
 uzunKey: "Değer",
 daha fazla veri: 3,
};

HTML işaretlemesini komut satırından da biçimlendirebilirsiniz. Oluşturduğunuz bir index.html dosya ile aynı dizinde komut dosyası.js. Ardından, aşağıdaki kötü biçimlendirilmiş HTML'yi dosyaya yapıştırın:

"" alt=""sınıf="hava durumu simgesi büyük">

sınıf="currentHeaderTemp"><açıklık>21açıklık></div>
</div>
 </header>

HTML'yi biçimlendirmek için şu komutu çalıştırın:

npx daha güzel -- index.html yaz

Bu komut, HTML'yi Prettier'in varsayılan standardına göre yeniden biçimlendirir ve bu da aşağıdaki kodla sonuçlanır:

<başlık>
<div>
<imgkaynak=""alternatif=""sınıf="hava durumu simgesi büyük" />
<divsınıf="currentHeaderTemp"><açıklık>21açıklık>div>
div>
başlık>

Şunu da kullanabilirsiniz: --kontrol etmek kodun Prettier standartlarına uygun olup olmadığını kontrol etmek için bayrak. Aşağıdaki örnek kontroller komut dosyası.js:

npx daha güzel -- script.js'yi kontrol edin

Bu, insanların Prettier kullandığından ve dosyaları Git'e aktarmadan önce biçimlendirdiğinden emin olmak için bir ön işleme kancası istiyorsanız kullanışlıdır. Bu ne zaman iyi çalışır açık kaynağa katkıda bulunmak.

Prettier'ı Visual Studio Koduna Tümleştirme

Prettier'ı komut satırı aracılığıyla kullanmak acı verici olabilir. Kodu her formatlamak istediğinizde manuel olarak bir komut çalıştırmak yerine, bir dosyayı değiştirdiğinizde otomatik olarak formatlanacak şekilde ayarlayabilirsiniz. Şans eseri, Visual Studio Code (VS Code) bunu sizin yerinize yapmak için yerleşik bir yola sahiptir.

Gitmek Uzantılar VS Kodunda sekmesi ve arayın daha güzel. Tıklamak Prettier - Kod biçimlendirici, kurun ve ardından etkinleştirin.

Şuraya giderek VS Kodu ayarlarınıza gidin: Dosya > Tercihler > Ayarlar. Arama kutusunda şunu arayın: daha güzel. Prettier uzantısını yapılandırmanıza yardımcı olacak tonlarca seçenek bulacaksınız.

Tipik olarak, varsayılan ayarlarla idare edebilirsiniz. Değiştirmeyi düşünebileceğiniz tek şey noktalı virgüllerdir (isterseniz bunları kaldırabilirsiniz). Aksi takdirde, her şey varsayılan olarak ayarlanmıştır, ancak bunu istediğiniz gibi değiştirebilirsiniz.

etkinleştirdiğinizden emin olun. biçime kaydetme seçeneği, bu dosyayı kaydettiğinizde her dosyadaki kodun otomatik olarak biçimlendirilmesini sağlar. Etkinleştirmek için, sadece arayın biçime kaydetme ve kutuyu işaretleyin.

VSCode kullanmıyorsanız veya uzantı herhangi bir nedenle çalışmıyorsa, onchange kitaplığını indir. Bu, dosyayı her değiştirdiğinizde kodu biçimlendirmek için komutu çalıştırır.

Prettier ile Biçimlendirirken Dosyaları Yok Sayma

Eğer daha güzel koşacak olsaydın --yazmak tüm klasörünüzdeki komut, düğüm modüllerinizin her birinden geçer. Ancak başkalarının kodunu biçimlendirmekle zaman kaybetmemelisiniz!

Bu sorunu aşmak için bir .prettierignore dosyalayın ve terimi ekleyin düğüm_modülleri dosyanın içinde. Eğer çalıştıracak olsaydın --yazmak tüm klasördeki komut, içindekiler dışındaki tüm dosyaları yeniden biçimlendirir. düğüm_modülleri dosya.

Belirli bir uzantıya sahip dosyaları da yok sayabilirsiniz. Örneğin, tüm HTML dosyalarını yoksaymak istiyorsanız, basitçe ekleyin. *.html ile .güzelgörmezden gelin.

Daha Güzel Nasıl Yapılandırılır

Prettier'in farklı seçeneklerle nasıl çalışmasını istediğinizi yapılandırabilirsiniz. bir yol eklemektir daha güzel senin anahtarın paket.json dosya. Değer, tüm yapılandırma seçeneklerini içeren bir nesne olacaktır:

{
 ...
"Kodlar": {
"Ölçek": "echo \"Hata: test belirtilmedi\" && çıkış 1"
 },
 daha güzel: {
// seçenekler buraya gelir
 }
}

İkinci seçenek (tavsiye ettiğimiz) bir .prettierrc dosya. Bu dosya her türlü özelleştirmeyi yapmanıza izin verecektir.

Diyelim ki noktalı virgülleri sevmiyorsunuz. Aşağıdaki nesneyi dosyaya yerleştirerek bunları kaldırabilirsiniz:

{
"yarı": doğru,
"geçersiz kılmalar": [
 {
"Dosyalar": ".ts",
"seçenekler": {
"yarı": YANLIŞ
 }
 }
 ]
}

bu geçersiz kılmalar özelliği, belirli dosyalar veya dosya uzantıları için özel geçersiz kılmalar tanımlamanıza olanak tanır. Bu durumda, ile biten tüm dosyaların .ts (yani, TypeScript dosyalarında) noktalı virgül olmamalıdır.

Prettier'ı ESLint ile Kullanmak

ESLint, JavaScript kodundaki hataları tespit etmek ve biçimlendirmek için kullanılan bir linting aracıdır. Prettier kullanıyorsanız, muhtemelen biçimlendirme için de ESLint kullanmak istemezsiniz. Bunları birlikte kullanmak için yüklemeniz ve kurmanız gerekir eslint-config-güzel. Bu araç, Prettier'in zaten hallettiği şeyler için tüm ESLint yapılandırmalarını kapatır.

İlk olarak, yüklemeniz gerekir:

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

Ardından, uzantılar listesine ekleyin. .eslintrc dosya (listedeki son şey olduğundan emin olun):

{
"uzanır": [
"kullandığınız-başka-yapılandırma",
"daha güzel"
 ],
"tüzük": {
"girinti": "hata"
 }
}

Şimdi ESLint, Prettier'in çatışmaları önlemek için zaten hallettiği tüm kuralları devre dışı bırakacak.

Prettier ve ESLint ile Kod Tabanınızı Temizleyin

Prettier, kodunuzu temizlemek ve bir projede tutarlı biçimlendirmeyi zorlamak için ideal bir araçtır. VS Code ile çalışacak şekilde ayarlanması, her zaman erişilebileceği anlamına gelir.

ESLint, Prettier ile el ele giden olmazsa olmaz bir JavaScript aracıdır. Temel biçimlendirmenin ötesine geçen tonlarca özellik ve özelleştirme seçeneği sunar. Daha üretken bir geliştirici olmak istiyorsanız ESLint'i JavaScript ile nasıl kullanacağınızı öğrenin.