Mengoptimalkan Impor TypeScript: Mengonfigurasi Prettier dan ESLint untuk Format Multi-baris

Menyederhanakan Pernyataan Impor di TypeScript

Saat mengerjakan proyek TypeScript atau JavaScript yang besar, sering kali kita menemukan pernyataan import yang panjang, terutama saat mengimpor beberapa anggota dari satu modul. Meskipun garis-garis ini pada awalnya tampak tidak berbahaya, garis-garis ini dapat dengan mudah melampaui garis Anda Lebih cantik konfigurasi lebar cetak pengaturan, membuat kode lebih sulit dibaca dan dipelihara.

Agar kode Anda tetap rapi dan mudah dibaca, penting untuk mengotomatiskan pemformatan impor ini. Alat seperti Lebih cantik Dan ESLint dapat dikustomisasi untuk secara otomatis membagi pernyataan impor panjang menjadi beberapa baris. Hal ini memastikan kode Anda tetap bersih dan konsisten, mematuhi aturan pemformatan yang telah Anda siapkan.

Namun, mengonfigurasi alat ini untuk memformat pernyataan impor secara otomatis sesuai keinginan bisa jadi rumit. Meskipun pengaturan default Prettier dan ESLint menangani banyak masalah pemformatan, pengaturan tersebut sering kali gagal dalam menguraikan pernyataan impor yang panjang di beberapa baris.

Dalam panduan ini, kita akan mempelajari cara mengonfigurasi Prettier dan ESLint untuk memformat pernyataan impor dengan benar di proyek TypeScript Anda. Kami akan membahas pengaturan yang diperlukan untuk mencapai impor multi-baris sambil menjaga konsistensi di seluruh basis kode Anda.

Mengonfigurasi Prettier dan ESLint untuk Impor Multi-baris di TypeScript

Tujuan utama dari skrip di atas adalah untuk mengkonfigurasi Lebih cantik Dan ESLint untuk secara otomatis memformat pernyataan impor panjang di beberapa baris dalam proyek TypeScript. Konfigurasi Prettier diatur untuk menentukan gaya pengkodean, seperti tanda kutip tunggal dan koma di akhir, dan untuk mengatur bagaimana kode harus dibungkus menggunakan lebar cetak aturan. Ketika garis melebihi lebar yang ditetapkan (dalam hal ini, 80 atau 120 karakter), Prettier akan secara otomatis memformat kode agar lebih mudah dibaca. Dengan menggunakan plugin-mengatur-impor yang lebih cantik plugin, kami memastikan bahwa pernyataan import dipisahkan dan diurutkan secara logis.

Dalam konfigurasi ESLint, file impor/pesanan aturan dari eslint-plugin-impor plugin sangat penting untuk mengontrol cara impor diatur. Tujuannya di sini adalah untuk menerapkan struktur impor yang konsisten, yaitu impor dari grup berbeda (seperti modul bawaan, paket eksternal, dan modul internal) dipisahkan oleh baris baru. Selain itu, impor dalam grup yang sama disusun berdasarkan abjad untuk meningkatkan keterbacaan. Aturan-aturan ini mencegah impor menjadi berantakan, terutama ketika berhadapan dengan sejumlah besar anggota yang diimpor dari beberapa file.

Aspek penting lainnya dari pengaturan ESLint adalah baris baru-antara opsi, yang memastikan bahwa setiap grup impor dipisahkan oleh baris kosong. Hal ini membuat kode lebih terorganisir secara visual, terutama pada basis kode yang lebih besar. Dikombinasikan dengan mengabjadkan aturannya, seluruh blok impor menjadi terstruktur dan lebih mudah dipelihara. Saat kode diformat saat disimpan di Visual Studio Code, pengaturan ini diterapkan secara otomatis, memastikan pemformatan impor yang konsisten di seluruh proyek tanpa penyesuaian manual.

Terakhir, menguji konfigurasi ini sangat penting untuk memastikan konfigurasi berfungsi dengan benar. Itu Bersenda gurau pengujian unit dirancang untuk memeriksa apakah konfigurasi Prettier dan ESLint menangani pemisahan dan pemformatan impor seperti yang diharapkan. Misalnya, ketika pernyataan import yang panjang diberikan, pengujian akan memverifikasi apakah pernyataan tersebut dipecah menjadi beberapa baris dengan benar. Pendekatan ini memungkinkan pengembang untuk mengotomatiskan pengujian aturan pemformatan mereka, memastikan bahwa setiap perubahan kode di masa depan akan mematuhi pedoman struktur impor yang sama.

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

Meningkatkan Keterbacaan Kode dengan Pemformatan Impor yang Lebih Cantik dan ESLint

Saat menangani basis kode yang lebih besar, mempertahankan struktur impor yang konsisten menjadi penting untuk meningkatkan keterbacaan kode dan kolaborasi tim. Salah satu masalah umum yang dihadapi pengembang adalah berapa lama pernyataan import dapat mengacaukan bagian atas file, terutama ketika pernyataan tersebut berisi banyak elemen dari satu modul. Di sinilah alat seperti itu Lebih cantik Dan ESLint ikut berperan, memungkinkan Anda mengotomatiskan pemisahan impor pada beberapa jalur. Memastikan bahwa pernyataan import mematuhi lebar yang ditentukan, biasanya berdasarkan pada lebar cetak pengaturan, membantu mencegah pengguliran horizontal dan membuat kode mudah dipindai.

Aspek penting lainnya adalah pola organisasi impor itu sendiri. Menggunakan impor/pesanan aturan yang disediakan oleh ESLint, Anda dapat mengelompokkan impor berdasarkan asalnya: pustaka bawaan, dependensi pihak ketiga, atau modul internal. Grup ini dapat dibagi berdasarkan baris baru, sehingga memudahkan pengembang untuk mengidentifikasi dependensi dengan cepat. Metode ini mendorong impor terstruktur, yang bila dikombinasikan dengan penyortiran berdasarkan abjad mengabjadkan opsi, semakin meningkatkan kejelasan dan konsistensi di seluruh basis kode.

Selain itu, pengembang mungkin ingin memanfaatkan alat seperti plugin-mengatur-impor yang lebih cantik untuk memastikan bahwa impor tidak hanya dibagi dengan benar tetapi juga diatur ulang secara logis. Alat-alat ini secara otomatis menerapkan struktur impor yang diinginkan setiap kali file disimpan di editor seperti Visual Studio Code. Hal ini memastikan bahwa pengembang tidak perlu menyesuaikan pernyataan impor secara manual dan dapat fokus pada penulisan kode yang lebih bersih dan mudah dipelihara.