TypeScript İçe Aktarımlarını Optimize Etme: Çok Satırlı Format için Prettier ve ESLint'i Yapılandırma

TypeScript'te İçe Aktarma İfadelerini Kolaylaştırma

Büyük TypeScript veya JavaScript projeleri üzerinde çalışırken, özellikle tek bir modülden birden fazla üyeyi içe aktarırken, uzun içe aktarma ifadeleriyle karşılaşmak yaygındır. Bu çizgiler başlangıçta zararsız gibi görünse de kolaylıkla sınırlarınızı aşabilir. Daha güzel konfigürasyon baskı genişliği ayarı, kodun okunmasını ve bakımını zorlaştırır.

Kodunuzu düzgün ve okunabilir tutmak için bu içe aktarma işlemlerinin biçimlendirmesini otomatikleştirmek önemlidir. Gibi araçlar Daha güzel Ve ESLint uzun içe aktarma ifadelerini otomatik olarak birden fazla satıra bölecek şekilde özelleştirilebilir. Bu, ayarladığınız biçimlendirme kurallarına bağlı kalarak kodunuzun temiz ve tutarlı kalmasını sağlar.

Ancak, bu araçları içe aktarma ifadelerini istenildiği gibi otomatik olarak biçimlendirecek şekilde yapılandırmak zor olabilir. Hem Prettier hem de ESLint'in varsayılan ayarları birçok biçimlendirme sorununu ele alsa da, uzun içe aktarma ifadelerinin birden fazla satıra bölünmesi söz konusu olduğunda genellikle yetersiz kalırlar.

Bu kılavuzda, TypeScript projenizdeki içe aktarma ifadelerini doğru şekilde biçimlendirmek için Prettier ve ESLint'i nasıl yapılandıracağınızı keşfedeceğiz. Kod tabanınızda tutarlılığı korurken çok satırlı içe aktarmalar elde etmek için gereken ayarların üzerinden geçeceğiz.

TypeScript'te Çok Satırlı İçe Aktarmalar için Prettier ve ESLint'i Yapılandırma

Yukarıdaki komut dosyalarının asıl amacı yapılandırmaktır Daha güzel Ve ESLint Bir TypeScript projesinde uzun içe aktarma ifadelerini birden çok satırda otomatik olarak biçimlendirmek için. Prettier yapılandırması, tek tırnak işaretleri ve sondaki virgüller gibi kodlama stillerini tanımlamak ve kodun, baskı genişliği kural. Satır ayarlanan genişliği (bu durumda 80 veya 120 karakter) aştığında Prettier, kodu daha okunaklı hale getirmek için otomatik olarak biçimlendirecektir. kullanarak daha güzel-eklenti-düzenleme-içe aktarmalar eklentisiyle, içe aktarma ifadelerinin mantıksal olarak bölünmesini ve sıralanmasını sağlıyoruz.

ESLint yapılandırmasında, içe aktarma/sipariş itibaren kural eslint-eklenti-içe aktarma eklenti, içe aktarmanın nasıl organize edildiğini kontrol etmek için gereklidir. Buradaki amaç, farklı gruplardan (yerleşik modüller, harici paketler ve dahili modüller gibi) içe aktarmaların yeni satırlarla ayrıldığı tutarlı bir içe aktarma yapısını uygulamaktır. Ek olarak, aynı grup içindeki içe aktarmalar okunabilirliği artırmak için alfabetik olarak sıralanmıştır. Bu kurallar, özellikle birden fazla dosyadan çok sayıda içe aktarılan üyeyle uğraşırken, içe aktarmanın karmaşık hale gelmesini önler.

ESLint kurulumunun bir diğer önemli yönü de aradaki yeni satırlar Her içe aktarma grubunun boş bir satırla ayrılmasını sağlayan seçenek. Bu, özellikle daha büyük kod tabanlarında kodu görsel olarak daha organize hale getirir. ile kombine alfabetik sıraya koymak kural, tüm içe aktarma bloğu yapılandırılmış ve bakımı kolay hale gelir. Kod, Visual Studio Code'da kaydedildiğinde biçimlendirildiğinde, bu ayarlar otomatik olarak uygulanır ve manuel ayarlamalara gerek kalmadan tüm projede tutarlı içe aktarma biçimlendirmesi sağlanır.

Son olarak, bu yapılandırmanın test edilmesi, doğru çalıştığından emin olmak için çok önemlidir. Alay birim testleri, Prettier ve ESLint yapılandırmalarının içe aktarma bölme ve biçimlendirmeyi beklendiği gibi işleyip işlemediğini kontrol etmek için tasarlanmıştır. Örneğin, uzun bir içe aktarma ifadesi sağlandığında test, bunun birden fazla satıra düzgün şekilde bölünüp bölünmediğini doğrular. Bu yaklaşım, geliştiricilerin biçimlendirme kurallarının testini otomatikleştirmesine olanak tanıyarak gelecekteki kod değişikliklerinin aynı içe aktarma yapısı yönergelerine uymasını sağlar.

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  plugins: ['prettier-plugin-organize-imports'],
}
// Prettier configuration setup for import splitting

module.exports = {
  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
  "rules": {
    "import/order": [
      "error", {
        "groups": ["builtin", "external", "internal"],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }],
    "max-len": ["error", { "code": 80 }],
  }
}
// ESLint rule setup to organize imports into multiple lines and ensure alphabetical order

import {
  longFunctionNameOne,
  longFunctionNameTwo,
  longFunctionNameThree
} from '@example/long-module-name';

import {
  shortFunctionNameOne,
  shortFunctionNameTwo
} from '@example/short-module-name';
// Example of formatted import statements following the configured rules

const eslint = require('eslint');
const prettier = require('prettier');
const { describe, it } = require('@jest/globals');

describe('Import Formatting', () => {
  it('should split long imports into multiple lines', () => {
    const code = `import { a, b, c, d } from '@example/package';`;
    const formatted = prettier.format(code, { printWidth: 80 });
    expect(formatted).toMatch(/import { a, b }/);
  });
});
// Unit test to check if long imports are split into multiple lines using Jest

Daha Güzel ve ESLint İçe Aktarma Formatlaması ile Kod Okunabilirliğini Artırma

Daha büyük kod tabanlarıyla uğraşırken tutarlı içe aktarma yapılarını sürdürmek, hem kodun okunabilirliğini hem de ekip işbirliğini geliştirmek için hayati önem taşır. Geliştiricilerin karşılaştığı yaygın sorunlardan biri, özellikle tek bir modülden birçok öğe içerdiğinde, içe aktarma ifadelerinin dosyanın üst kısmını ne kadar uzun süre doldurabileceğidir. Burası gibi araçların olduğu yer Daha güzel Ve ESLint içe aktarma işlemlerinin birden fazla satıra bölünmesini otomatikleştirmenize olanak tanıyarak devreye girer. İçe aktarma ifadelerinin, genellikle baskı genişliği ayarı, yatay kaydırmanın önlenmesine yardımcı olur ve kodun taranmasını kolaylaştırır.

Bir diğer önemli husus da ithalatın organizasyon yapısıdır. kullanarak içe aktarma/sipariş ESLint tarafından sağlanan kural sayesinde, içe aktarmaları kökenlerine göre gruplandırabilirsiniz: yerleşik kitaplıklar, üçüncü taraf bağımlılıkları veya dahili modüller. Bu gruplar yeni satırlara göre bölünebilir, bu da geliştiricilerin bağımlılıkları hızlı bir şekilde tanımlamasını kolaylaştırır. Bu yöntem, alfabetik sıralamayla birleştirildiğinde yapılandırılmış içe aktarmayı destekler. alfabetik sıraya koymak seçeneği, kod tabanındaki netliği ve tutarlılığı daha da artırır.

Ayrıca geliştiriciler aşağıdaki gibi araçlardan yararlanmak isteyebilir: daha güzel-eklenti-düzenleme-içe aktarmalar ithalatın yalnızca doğru şekilde bölünmesini değil aynı zamanda mantıksal olarak yeniden düzenlenmesini sağlamak. Bu araçlar, dosya Visual Studio Code gibi bir düzenleyiciye her kaydedildiğinde istenen içe aktarma yapısını otomatik olarak uygular. Bu, geliştiricilerin içe aktarma ifadelerini manuel olarak ayarlamak zorunda kalmamalarını ve daha temiz ve bakımı daha kolay kod yazmaya odaklanabilmelerini sağlar.