TypeScript درآمدات کو بہتر بنانا: ملٹی لائن فارمیٹ کے لیے خوبصورت اور ESLint کو ترتیب دینا

ٹائپ اسکرپٹ میں درآمدی بیانات کو ہموار کرنا

بڑے TypeScript یا JavaScript پروجیکٹس پر کام کرتے وقت، طویل درآمدی بیانات کا سامنا کرنا ایک عام بات ہے، خاص طور پر جب ایک ہی ماڈیول سے متعدد اراکین کو درآمد کیا جائے۔ اگرچہ یہ لکیریں ابتدائی طور پر بے ضرر لگ سکتی ہیں، لیکن وہ آسانی سے آپ سے تجاوز کر سکتی ہیں۔ خوبصورت ترتیب کی پرنٹ چوڑائی ترتیب دینا، کوڈ کو پڑھنا اور برقرار رکھنا مشکل بناتا ہے۔

اپنے کوڈ کو صاف ستھرا اور پڑھنے کے قابل رکھنے کے لیے، ان درآمدات کی فارمیٹنگ کو خودکار بنانا ضروری ہے۔ جیسے اوزار خوبصورت اور ESLint طویل درآمدی بیانات کو خود بخود متعدد لائنوں میں تقسیم کرنے کے لیے اپنی مرضی کے مطابق کیا جا سکتا ہے۔ یہ اس بات کو یقینی بناتا ہے کہ آپ کا کوڈ صاف ستھرا اور یکساں رہے، فارمیٹنگ کے جو اصول آپ نے ترتیب دیے ہیں ان کی پابندی کریں۔

تاہم، ان ٹولز کو خود بخود درآمدی بیانات کو مطلوبہ شکل دینے کے لیے ترتیب دینا مشکل ہوسکتا ہے۔ اگرچہ Prettier اور ESLint دونوں کی ڈیفالٹ سیٹنگز فارمیٹنگ کے بہت سے مسائل کو ہینڈل کرتی ہیں، لیکن جب یہ متعدد لائنوں میں طویل درآمدی بیانات کو توڑنے کی بات آتی ہے تو وہ اکثر کم پڑ جاتی ہیں۔

اس گائیڈ میں، ہم آپ کے TypeScript پروجیکٹ میں امپورٹ سٹیٹمنٹس کو صحیح طریقے سے فارمیٹ کرنے کے لیے Prettier اور ESLint کو کنفیگر کرنے کا طریقہ دریافت کریں گے۔ ہم آپ کے کوڈبیس میں مستقل مزاجی کو برقرار رکھتے ہوئے ملٹی لائن امپورٹس حاصل کرنے کے لیے درکار ترتیبات کو دیکھیں گے۔

TypeScript میں ملٹی لائن امپورٹس کے لیے Prettier اور ESLint کو ترتیب دینا

مندرجہ بالا اسکرپٹ کا بنیادی مقصد ترتیب دینا ہے۔ خوبصورت اور ESLint TypeScript پروجیکٹ میں متعدد لائنوں میں طویل درآمدی بیانات کو خود بخود فارمیٹ کرنے کے لیے۔ پریٹیر کنفیگریشن کوڈنگ کے انداز کی وضاحت کرنے کے لیے ترتیب دی گئی ہے، جیسے کہ سنگل کوٹس اور ٹریلنگ کوما، اور اس بات کا انتظام کرنے کے لیے کہ کوڈ کو کس طرح لپیٹنا چاہیے۔ پرنٹ چوڑائی حکمرانی جب لائن سیٹ کی چوڑائی سے زیادہ ہو جاتی ہے (اس صورت میں، 80 یا 120 حروف)، Prettier خود بخود کوڈ کو مزید پڑھنے کے قابل بنانے کے لیے فارمیٹ کر دے گا۔ کا استعمال کرتے ہوئے خوبصورت-پلگ ان-آرگنائز-درآمدات پلگ ان، ہم اس بات کو یقینی بناتے ہیں کہ درآمدی بیانات تقسیم ہوں اور منطقی طور پر ترتیب دی جائیں۔

ESLint کنفیگریشن میں، درآمد / آرڈر سے حکمرانی eslint-plugin-import درآمدات کو کس طرح منظم کیا جاتا ہے اس کو کنٹرول کرنے کے لیے پلگ ان ضروری ہے۔ یہاں کا مقصد ایک مستقل درآمدی ڈھانچہ کو نافذ کرنا ہے، جہاں مختلف گروپس کی درآمدات (جیسے بلٹ ان ماڈیولز، بیرونی پیکجز، اور اندرونی ماڈیولز) کو نئی لائنوں سے الگ کیا جاتا ہے۔ مزید برآں، پڑھنے کی اہلیت کو بہتر بنانے کے لیے ایک ہی گروپ کے اندر درآمدات کو حروف تہجی کے مطابق کیا جاتا ہے۔ یہ قواعد درآمدات کو بے ترتیبی ہونے سے روکتے ہیں، خاص طور پر جب متعدد فائلوں سے درآمد شدہ اراکین کی بڑی تعداد سے نمٹتے ہیں۔

ESLint سیٹ اپ کا ایک اور اہم پہلو ہے۔ نئی لائنوں کے درمیان اختیار، جو اس بات کو یقینی بناتا ہے کہ ہر درآمدی گروپ کو خالی لائن سے الگ کیا گیا ہے۔ یہ کوڈ کو زیادہ بصری طور پر منظم کرتا ہے، خاص طور پر بڑے کوڈ بیس میں۔ کے ساتھ مل کر حروف تہجی کے مطابق اصول کے مطابق، پورا درآمدی بلاک ساختہ اور برقرار رکھنے میں آسان ہو جاتا ہے۔ جب کوڈ کو بصری اسٹوڈیو کوڈ میں محفوظ کرنے پر فارمیٹ کیا جاتا ہے، تو یہ ترتیبات خود بخود لاگو ہوجاتی ہیں، جس سے دستی ایڈجسٹمنٹ کے بغیر پورے پروجیکٹ میں مستقل درآمدی فارمیٹنگ کو یقینی بنایا جاتا ہے۔

آخر میں، اس کنفیگریشن کو جانچنا بہت ضروری ہے تاکہ یہ یقینی بنایا جا سکے کہ یہ صحیح طریقے سے کام کرتی ہے۔ دی طنز یونٹ ٹیسٹوں کو یہ جانچنے کے لیے ڈیزائن کیا گیا ہے کہ آیا Prettier اور ESLint کنفیگریشن توقع کے مطابق درآمدی تقسیم اور فارمیٹنگ کو ہینڈل کرتے ہیں۔ مثال کے طور پر، جب ایک طویل درآمدی بیان فراہم کیا جاتا ہے، تو ٹیسٹ اس بات کی تصدیق کرتا ہے کہ آیا یہ مناسب طریقے سے متعدد لائنوں میں تقسیم ہے۔ یہ نقطہ نظر ڈویلپرز کو اپنے فارمیٹنگ کے قواعد کی جانچ کو خودکار کرنے کی اجازت دیتا ہے، اس بات کو یقینی بناتے ہوئے کہ مستقبل میں کوڈ میں ہونے والی کوئی بھی تبدیلی اسی درآمدی ڈھانچے کے رہنما خطوط پر عمل کرے گی۔

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

Prettier اور ESLint امپورٹ فارمیٹنگ کے ساتھ کوڈ پڑھنے کی اہلیت کو بڑھانا

بڑے کوڈ بیسز کے ساتھ کام کرتے وقت، کوڈ پڑھنے کی اہلیت اور ٹیم کے تعاون دونوں کو بہتر بنانے کے لیے مستقل درآمدی ڈھانچے کو برقرار رکھنا بہت ضروری ہو جاتا ہے۔ ڈویلپرز کو درپیش ایک عام مسئلہ یہ ہے کہ درآمدی بیانات کتنی دیر تک فائل کے اوپری حصے میں بے ترتیبی پیدا کر سکتے ہیں، خاص طور پر جب وہ ایک ہی ماڈیول کے بہت سے عناصر پر مشتمل ہوں۔ یہ وہ جگہ ہے جہاں ٹولز پسند کرتے ہیں۔ خوبصورت اور ESLint آپ کو متعدد لائنوں پر درآمدات کی تقسیم کو خودکار کرنے کی اجازت دیتا ہے۔ اس بات کو یقینی بنانا کہ درآمدی بیانات ایک متعین چوڑائی پر عمل پیرا ہوں، عام طور پر کی بنیاد پر پرنٹ چوڑائی ترتیب، افقی اسکرولنگ کو روکنے میں مدد کرتا ہے اور کوڈ کو اسکین کرنے میں آسان رکھتا ہے۔

ایک اور اہم پہلو خود درآمدات کا تنظیمی نمونہ ہے۔ کا استعمال کرتے ہوئے درآمد / آرڈر ESLint کی طرف سے فراہم کردہ اصول، آپ درآمدات کو ان کی اصل کی بنیاد پر گروپ کر سکتے ہیں: بلٹ ان لائبریریز، تھرڈ پارٹی انحصار، یا اندرونی ماڈیول۔ ان گروپوں کو نئی لائنوں کے ذریعے تقسیم کیا جا سکتا ہے، جس سے ڈویلپرز کے لیے انحصار کو تیزی سے شناخت کرنا آسان ہو جاتا ہے۔ یہ طریقہ ساختی درآمدات کو فروغ دیتا ہے، جسے حروف تہجی کی ترتیب کے ساتھ ملا کر حروف تہجی کے مطابق آپشن، پورے کوڈ بیس میں وضاحت اور مستقل مزاجی کو مزید بڑھاتا ہے۔

مزید برآں، ڈویلپرز جیسے ٹولز کا فائدہ اٹھانا چاہتے ہیں۔ خوبصورت-پلگ ان-آرگنائز-درآمدات اس بات کو یقینی بنانے کے لیے کہ درآمدات کو نہ صرف صحیح طریقے سے تقسیم کیا گیا ہے بلکہ منطقی طور پر دوبارہ ترتیب دیا گیا ہے۔ جب بھی فائل کو بصری اسٹوڈیو کوڈ جیسے ایڈیٹر میں محفوظ کیا جاتا ہے تو یہ ٹولز مطلوبہ درآمدی ڈھانچہ کو خود بخود نافذ کرتے ہیں۔ یہ اس بات کو یقینی بناتا ہے کہ ڈویلپرز کو دستی طور پر درآمدی بیانات کو ایڈجسٹ کرنے کی ضرورت نہیں ہے اور وہ کلینر اور زیادہ قابل برقرار کوڈ لکھنے پر توجہ مرکوز کر سکتے ہیں۔