Какова наилучшая практика для размещения порядка импорта библиотек в @ angular / core

Question

пример, если мой оператор импорта имеет

import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';

так что любой может помочь мне с любой статьей, имеющей информацию о ее написании или предложить в правильном порядке, как после AfterViewInit Компонент должен быть написан так

Пожалуйста, помогите мне изучить лучшие практики

я пробовал в стеке над потоком и на других сайтах, я не смог получить ответ

import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';

Мне нужно официальное руководство с любого сайта, чтобы сделать правильный заказ

Answer 1

Согласно официальному руководству по стилю Angular, строки импорта внутри компонентов должны быть расположены в алфавитном порядке, а символы импорта с неструктурированной структурой также должны быть расположены в алфавитном порядке.Это действительно поможет с точки зрения читабельности и расположения импортируемых модулей.

Подробнее об этом конкретном правиле можно прочитать здесь .

Из вашего примера

import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';

Это абсолютно нормально и соответствует тому, что упоминает руководство по стилю.Вам следует стандартизировать это правило с остальными участниками проекта!

Вот еще один пример.Если вы хотите импортировать FormBuilder и FormControl в свой компонент, он должен перейти на следующую строку, так как 'F' после 'A'.

import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';

Однако вы должны оставить поле пустымлиния, чтобы отделить импорт от сторонних производителей и импорт собственных приложений.

import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';

import { Hero } from './hero.model';

Answer 2

При работе над проектом (персональным или совместным) часто бывает, что руководство по стилю создается таким образом, чтобы этот аспект «предварительных вкусов» можно было убрать, и каждый мог сосредоточиться на важной части проекта (т.е. код). Со временем мы разработали программы, которые формализуют эти стили с помощью инструментов статического анализа, таких как линтеры. В случае ES, примером будет это правило eslint , которое предписывает, что импорт должен быть отсортирован.

Подробнее о eslint вы можете прочитать здесь . Ключевые слова, которые вы ищете: "styleguide", "linter / linting", "непрерывная интеграция" (если вы хотите, чтобы github отправлял вам электронные письма / отклонял запросы на слияние, если представленный код не соответствует руководству по стилю).

Официальные указания см. В другом ответе.