Оптимизација увоза ТипеСцрипт-а: Конфигурисање лепшег и ЕСЛинт-а за вишередни формат

Поједностављене изјаве о увозу у ТипеСцрипт-у

Када радите на великим ТипеСцрипт или ЈаваСцрипт пројектима, уобичајено је наићи на дуге наредбе за увоз, посебно када увозите више чланова из једног модула. Иако ове линије у почетку могу изгледати безопасно, лако могу премашити ваше Лепше конфигурације принтВидтх подешавање, што отежава читање и одржавање кода.

Да би ваш код био уредан и читљив, важно је да аутоматизујете форматирање ових увоза. Алати попут Лепше и ЕСЛинт може се прилагодити да аутоматски подели дугачке изјаве за увоз у више редова. Ово осигурава да ваш код остане чист и доследан, поштујући правила обликовања која сте поставили.

Међутим, конфигурисање ових алата за аутоматско форматирање изјава за увоз по жељи може бити незгодно. Иако подразумеване поставке и Преттиер и ЕСЛинт решавају многе проблеме са форматирањем, често нису у реду када је у питању разбијање дугих наредби за увоз у више редова.

У овом водичу ћемо истражити како да конфигуришете Преттиер и ЕСЛинт да правилно форматирају изјаве за увоз у вашем ТипеСцрипт пројекту. Проћи ћемо кроз подешавања потребна за постизање вишелинијског увоза уз одржавање доследности у вашој бази кода.

Конфигурисање Преттиер и ЕСЛинт за вишелинијски увоз у ТипеСцрипт-у

Главни циљ горњих скрипти је конфигурисање Лепше и ЕСЛинт да аутоматски форматирате дугачке наредбе за увоз у више редова у ТипеСцрипт пројекту. Конфигурација Преттиер је подешена да дефинише стилове кодирања, као што су појединачни наводници и зарези на крају, и да управља начином на који код треба да буде умотан помоћу принтВидтх владати. Када линија премаши постављену ширину (у овом случају, 80 или 120 знакова), Преттиер ће аутоматски форматирати код како би га учинио читљивијим. Коришћењем лепши-плугин-организе-импортс плугин, обезбеђујемо да су увозни изрази подељени и поређани логички.

У ЕСЛинт конфигурацији, увоз/наруџбина правило из еслинт-плугин-импорт додатак је неопходан за контролу начина на који је увоз организован. Овде је циљ да се примени доследна структура увоза, где су увози из различитих група (као што су уграђени модули, екстерни пакети и интерни модули) одвојени новим редовима. Поред тога, увози унутар исте групе су распоређени по абецедном реду ради побољшања читљивости. Ова правила спречавају да увоз постане затрпан, посебно када се ради о великом броју увезених чланова из више датотека.

Још један значајан аспект подешавања ЕСЛинт-а је нови редови-између опција, која осигурава да је свака група за увоз одвојена празним редом. Ово чини код визуелно организованијим, посебно у већим кодним базама. У комбинацији са алфабетисати правило, цео блок увоза постаје структуриран и лакши за одржавање. Када се код форматира приликом чувања у Висуал Студио Цоде-у, ова подешавања се примењују аутоматски, обезбеђујући доследно форматирање увоза у целом пројекту без ручних подешавања.

На крају, тестирање ове конфигурације је кључно да би се осигурало да исправно ради. Тхе Јест Јединични тестови су дизајнирани да провере да ли конфигурације Преттиер и ЕСЛинт управљају поделом увоза и форматирањем како се очекује. На пример, када је дата дуга изјава за увоз, тест проверава да ли је правилно подељен у више редова. Овај приступ омогућава програмерима да аутоматизују тестирање својих правила форматирања, обезбеђујући да све будуће промене кода буду у складу са истим смерницама за структуру увоза.

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

Побољшање читљивости кода са Преттиер и ЕСЛинт увозним форматирањем

Када се ради о већим базама кода, одржавање конзистентних структура увоза постаје кључно за побољшање и читљивости кода и тимске сарадње. Један уобичајени проблем са којим се програмери суочавају је колико дуго изјаве за увоз могу затрпати врх датотеке, посебно када садрже много елемената из једног модула. Овде су алати попут Лепше и ЕСЛинт долазе у игру, омогућавајући вам да аутоматизујете поделу увоза на више линија. Обезбеђивање да се увозни изрази придржавају дефинисане ширине, обично засноване на принтВидтх подешавање, помаже у спречавању хоризонталног померања и олакшава скенирање кода.

Други кључни аспект је организациони образац самог увоза. Коришћењем увоз/наруџбина правило које обезбеђује ЕСЛинт, можете груписати увозе на основу њиховог порекла: уграђене библиотеке, зависности трећих страна или интерни модули. Ове групе се могу поделити новим редовима, што олакшава програмерима да брзо идентификују зависности. Овај метод промовише структурирани увоз, који се комбинује са сортирањем по абецедном реду алфабетисати опција, додатно побољшава јасноћу и доследност у бази кода.

Поред тога, програмери ће можда желети да искористе алате као што су лепши-плугин-организе-импортс како би се осигурало да се увоз не само правилно дели већ и логички преуређује. Ови алати аутоматски примењују жељену структуру увоза сваки пут када се датотека сачува у уређивачу као што је Висуал Студио Цоде. Ово осигурава да програмери не морају ручно да прилагођавају увозне изјаве и да се могу усредсредити на писање чистијег кода који се лакше одржава.