CODEWITHSUNDEEP
angularangular4-forms
ksk
ksk

Reputation: 307

What is the Best Practice to place order of Importing libraries inside @angular/core

example if my import statement is having 

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

so can any one help me with any article having information on writing them or suggest the in correct order like after AfterViewInit Component should be written like that

please help me learn best practices

i Tried in stack over flow and other sites i was not able to get answer 

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

i need official guidance from any site to give correct ordering

Upvotes: 2

Views: 2337

Answers (2)

T Tse
T Tse

Reputation: 846

When working on a project (whether personal or collaborative), it is often the case that a styleguide is created so that these "presonal tastes" aspect can be taken away and everyone can focus on the important part of the project (i.e. the code). Over time, we have come up with programs that formalizes these styles with static analysis tools such as linters. In the case of ES, an example would be this eslint rule that dictates that the imports has to be sorted.

You can read more about eslint here. The keywords you are looking for are "styleguide", "linter / linting", "continuous integration" (if you want github to send you an email / reject merge requests if the submitted code doesn't adhere to the styleguide).

For the official guidelines, see the other answer.

Upvotes: 2

wentjun
wentjun

Reputation: 42536

According to the official Angular styleguide, import lines within components should be arranged alphabetically, and destructured import symbols should be arranged alphabetically too. This would really help in terms of readability and locating of the imported modules.

You may read more about that particular rule here.

From your example,

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

Doing so is absolutely alright, and it conforms to what the styleguide mentions. You should standardise this rule with the rest of your project collaborators!

Here is another example. If you wish to import FormBuilder and FormControl into your component, it should go to the next line since 'F' is after 'A'.

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

However, you should leave leave a blank line to separate your third-party imports and your 'own' application imports. 

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

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

Upvotes: 1

Related Questions