Tối ưu hóa việc nhập TypeScript: Định cấu hình Prettier và ESLint cho định dạng nhiều dòng

Hợp lý hóa các câu lệnh nhập trong TypeScript

Khi làm việc trên các dự án TypeScript hoặc JavaScript lớn, bạn thường gặp phải các câu lệnh nhập dài, đặc biệt là khi nhập nhiều thành viên từ một mô-đun duy nhất. Mặc dù những đường này ban đầu có vẻ vô hại nhưng chúng có thể dễ dàng vượt quá khả năng của bạn. Đẹp hơn cấu hình của inChiều rộng cài đặt, làm cho mã khó đọc và bảo trì hơn.

Để giữ cho mã của bạn gọn gàng và dễ đọc, điều quan trọng là phải tự động hóa định dạng của các lần nhập này. Công cụ như Đẹp hơn Và ESLint có thể được tùy chỉnh để tự động chia các câu lệnh nhập dài thành nhiều dòng. Điều này đảm bảo rằng mã của bạn luôn rõ ràng và nhất quán, tuân thủ các quy tắc định dạng bạn đã thiết lập.

Tuy nhiên, việc định cấu hình các công cụ này để tự động định dạng các câu lệnh nhập như mong muốn có thể khó khăn. Mặc dù cài đặt mặc định của cả Prettier và ESLint đều xử lý nhiều vấn đề về định dạng, nhưng chúng thường thiếu sót khi chia nhỏ các câu lệnh nhập dài trên nhiều dòng.

Trong hướng dẫn này, chúng ta sẽ khám phá cách định cấu hình Prettier và ESLint để định dạng chính xác các câu lệnh nhập trong dự án TypeScript của bạn. Chúng tôi sẽ xem xét các cài đặt cần thiết để đạt được mục nhập nhiều dòng trong khi vẫn duy trì tính nhất quán trên cơ sở mã của bạn.

Định cấu hình Prettier và ESLint để nhập nhiều dòng trong TypeScript

Mục tiêu chính của các đoạn script trên là cấu hình Đẹp hơn Và ESLint để tự động định dạng các câu lệnh nhập dài trên nhiều dòng trong dự án TypeScript. Cấu hình Prettier được thiết lập để xác định các kiểu mã hóa, chẳng hạn như dấu ngoặc đơn và dấu phẩy ở cuối, đồng thời để quản lý cách gói mã bằng cách sử dụng inChiều rộng luật lệ. Khi dòng vượt quá độ rộng đã đặt (trong trường hợp này là 80 hoặc 120 ký tự), Prettier sẽ tự động định dạng mã để dễ đọc hơn. Bằng cách sử dụng đẹp hơn-plugin-tổ chức-nhập khẩu plugin, chúng tôi đảm bảo rằng các câu lệnh nhập được phân chia và sắp xếp một cách hợp lý.

Trong cấu hình ESLint, nhập khẩu/đặt hàng cai trị từ nhập khẩu eslint-plugin plugin là điều cần thiết để kiểm soát cách tổ chức nhập khẩu. Mục tiêu ở đây là thực thi cấu trúc nhập nhất quán, trong đó nhập từ các nhóm khác nhau (chẳng hạn như mô-đun tích hợp, gói bên ngoài và mô-đun nội bộ) được phân tách bằng dòng mới. Ngoài ra, các nội dung nhập trong cùng một nhóm được sắp xếp theo thứ tự bảng chữ cái để cải thiện khả năng đọc. Các quy tắc này ngăn quá trình nhập trở nên lộn xộn, đặc biệt khi xử lý số lượng lớn thành viên được nhập từ nhiều tệp.

Một khía cạnh quan trọng khác của việc thiết lập ESLint là dòng mới-giữa tùy chọn này đảm bảo rằng mỗi nhóm nhập được phân tách bằng một dòng trống. Điều này làm cho mã được tổ chức trực quan hơn, đặc biệt là trong các cơ sở mã lớn hơn. Kết hợp với sắp xếp theo thứ tự bảng chữ cái quy tắc, toàn bộ khối nhập sẽ trở nên có cấu trúc và dễ bảo trì hơn. Khi mã được định dạng khi lưu trong Visual Studio Code, các cài đặt này sẽ được áp dụng tự động, đảm bảo định dạng nhập nhất quán trên toàn bộ dự án mà không cần điều chỉnh thủ công.

Cuối cùng, việc kiểm tra cấu hình này là rất quan trọng để đảm bảo nó hoạt động chính xác. các trò đùa các bài kiểm tra đơn vị được thiết kế để kiểm tra xem cấu hình Prettier và ESLint có xử lý việc phân tách và định dạng nhập như mong đợi hay không. Ví dụ: khi cung cấp một câu lệnh nhập dài, quá trình kiểm tra sẽ xác minh xem nó có được chia thành nhiều dòng đúng cách hay không. Cách tiếp cận này cho phép các nhà phát triển tự động hóa việc kiểm tra các quy tắc định dạng của họ, đảm bảo rằng mọi thay đổi mã trong tương lai sẽ tuân thủ cùng các nguyên tắc cấu trúc nhập.

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

Nâng cao khả năng đọc mã với định dạng nhập đẹp hơn và ESLint

Khi xử lý các cơ sở mã lớn hơn, việc duy trì cấu trúc nhập nhất quán trở nên quan trọng để cải thiện cả khả năng đọc mã và khả năng cộng tác của nhóm. Một vấn đề phổ biến mà các nhà phát triển gặp phải là các câu lệnh nhập có thể làm lộn xộn phần đầu tệp trong bao lâu, đặc biệt khi chúng chứa nhiều phần tử từ một mô-đun duy nhất. Đây là nơi các công cụ như Đẹp hơn Và ESLint phát huy tác dụng, cho phép bạn tự động hóa việc phân chia dữ liệu nhập trên nhiều dòng. Đảm bảo rằng các câu lệnh nhập tuân theo chiều rộng xác định, thường dựa trên inChiều rộng cài đặt, giúp ngăn chặn việc cuộn ngang và giữ cho mã dễ quét.

Một khía cạnh quan trọng khác là mô hình tổ chức của chính hàng nhập khẩu. Sử dụng nhập khẩu/đặt hàng quy tắc do ESLint cung cấp, bạn có thể nhóm các mục nhập dựa trên nguồn gốc của chúng: thư viện tích hợp sẵn, phần phụ thuộc của bên thứ ba hoặc mô-đun nội bộ. Các nhóm này có thể được phân chia theo dòng mới, giúp nhà phát triển dễ dàng xác định các phần phụ thuộc một cách nhanh chóng. Phương pháp này thúc đẩy nhập khẩu có cấu trúc, khi kết hợp với việc sắp xếp theo thứ tự bảng chữ cái thông qua sắp xếp theo thứ tự bảng chữ cái tùy chọn, nâng cao hơn nữa sự rõ ràng và nhất quán trên toàn bộ cơ sở mã.

Ngoài ra, các nhà phát triển có thể muốn tận dụng các công cụ như đẹp hơn-plugin-tổ chức-nhập khẩu để đảm bảo việc nhập khẩu không chỉ được phân chia chính xác mà còn được sắp xếp lại một cách hợp lý. Các công cụ này tự động thực thi cấu trúc nhập mong muốn mỗi khi tệp được lưu trong trình chỉnh sửa như Visual Studio Code. Điều này đảm bảo rằng các nhà phát triển không phải điều chỉnh các câu lệnh nhập theo cách thủ công và có thể tập trung vào việc viết mã sạch hơn và dễ bảo trì hơn.