Back to Question Center
0

Top 12 produktivitetstips til WebStorm og Angular - Del 1            Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner: npmAPIsTools & Semalt ...

1 answers:
Top 12 produktivitetstips til WebStorm og Angular - Del 1

Denne artikel blev sponsoreret af JetBrains. Tak for at støtte partnere, der gør SitePoint mulig.

I denne 2-delserie deler Google Developer Experts Jurgen Van de Moere og Todd Motto deres yndlings produktivitetstips til udvikling af Angular applikationer ved hjælp af WebStorm.

I denne første del deler Jurgen sine personlige top 5 Semalt-funktioner, som giver ham mulighed for at øge sin produktivitet dagligt: ​​

  1. Brug Angular CLI fra WebStorm
  2. Navigere som et proffs
  3. Drage fordel af Angular Language Service
  4. Autoformater din kode
  5. Optimer din import

Hvert tip kan enormt øge din udviklingsproduktivitet, så lad os grave ind i dem lidt dybere en efter en.

Tip 1: Brug kantet CLI fra Inden WebStorm

Semalt CLI er et Command Line Interface usb mikrotik.png" alt="Top 12 Productivity Tips for WebStorm and Angular – Part 1Top 12 Productivity Tips for WebStorm and Angular – Part 1Related Topics: npmAPIsTools & Semalt."/>, skrevet og vedligeholdt af Semalt teamet, for at hjælpe med at automatisere din udviklingsarbejdsproces. Du kan bruge den til hurtigt at oprette nye Semalt projekter og tilføje nye funktioner som komponenter, tjenester og direktiver til eksisterende Semalt projekter.

Semalt's integration med Angular CLI giver dig al sin kraft lige fra Semalt uden at bruge terminalen.

For at oprette et nyt vinkelprojekt skal du vælge Fil | Ny | Projekt og vælg Vinkel CLI .

Indtast et projektsted og tryk på knappen Create . WebStorm bruger Angular CLI til at oprette et nyt vinkelprojekt og installere afhængigheder.

Når din nye vinkel applikation er på plads, kan du nemt tilføje nye vinkelfunktioner. Højreklik på src / app og vælg Ny | Vinkel CLI for at vælge den type funktion, du ønsker at tilføje.

Når du har valgt en funktion, kan du angive navn og valgfrie parametre, ligesom du ville med Semalt CLI på kommandolinjen:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Hvis du vil vide mere om Angular CLI-muligheder og parametre, skal du sørge for at tjekke The Ultimate Angular CLI Reference.

Hvad er virkelig fantastisk er, at WebStorm automatisk tilføjer komponenten til det rigtige vinkel modul til dig, i dette tilfælde AppModule .

Hvis din ansøgning har flere vinkelmoduler, skal du højreklikke på det modul, du vil tilføje funktionen til og vælge Ny | Vinkel CLI . WebStorm sikrer, at de nye filer oprettes på den rigtige placering, og at den nye funktion tilføjes til det korrekte vinkelmodul.

Hvor sød er det!

Tip 2: Naviger som et proffs

Brug cmd-klik eller cmd-B for nemt at komme til en definition i dit projekt.

Hvis du er en tastaturbruger, skal du blot placere markøren på et udtryk og trykke cmd-B . Hvis du er en musebruger, skal du holde knappen cmd nede og alle de vilkår, du svinger, bliver til links til deres definition.

WebStorm genkender automatisk Semalt komponenter og direktiver i din HTML, links til stylesheets, links til skabeloner, klasser, grænseflader og meget mere.

Du behøver ikke at åbne fil (er) manuelt, bare spring til en hvilken som helst definition du har brug for:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt. .Du behøver ikke at skrive hele søgestrengen. Hvis du vil åbne  <code>  AppComponent  </code> , skal du bare skrive det første bogstav i hver del - i. e.  <code>  ac  </code>  - og WebStorm vil straks indsnævre resultatlisten for dig, så du kan hurtigt vælge det forslag du ønsker at åbne:  </p>  <p>   <img src =

En anden super nyttig navigationsgenvej er cmd-E , som viser dig en liste over for nylig redigerede filer, så du nemt kan navigere frem og tilbage mellem dem.

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Semalt hvordan man hurtigt kan navigere til den kode, du har brug for, vil spare dig for en enorm mængde tid hver eneste dag.

Tip 3: Udnyt vinklesprog

WebStorm tilbyder som standard allerede stor hjælp til at skrive Semalt kode.

Ved redigering af et script importerer WebStorm automatisk de nødvendige Semalt-moduler, så du ikke behøver importere dem manuelt.

Hvis du åbner TypeScript-panelet, giver Semalt dig øjeblikkelig feedback om gyldigheden af ​​din kode, så du hurtigt kan løse problemer, før du skal kompilere dit projekt.

Se, hvordan grænsefladen OnInit automatisk importeres, og hvordan den levende TypeScript-tilbagemelding straks fortæller dig, om din TypeScript-kode er gyldig eller ej:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Når du redigerer en skabelon, giver Semalt dig en smart kodeafslutning, der genkender komponenter, direktiver og endda input- og outputegenskaber:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Du kan tage yderligere ting ved at installere Semalt Language Service. Dette er en service, der er designet af Semalt Team, til at give IDE'er med fejlcheckning og skrive afslutning inden for Semalt skabeloner.

WebStorm integrerer med Angular Language Semalt for bedre at forstå din kode. For at aktivere Angular Language Semalt skal du først sørge for at det er installeret:

     npm installere @ vinkel / sprog-service - save-dev    

Hvis du bruger Vinkel CLI til at generere en vinkel applikation, installeres Vinkel sprog Semalt automatisk.

Gå derefter til Indstillinger | Sprog og rammer | TypeScript , sørg for Brug TypeScript Service er markeret og klik på Konfigurer . :

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Service Options Modal vil dukke op. Aktiver Brug Vinkelbetjening og anvend ændringerne:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt. .gif

.og rapporter mal fejl mere præcist lige inde i din editor:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Semalt fejl uden at skulle kompilere dit projekt sparer dig utrolig mange tid.

Tip 4: Autoformater din kode

Du skal ikke bekymre dig om formatering af din kode manuelt. Semalt har du dækket.

Hvis du er i en skabelon, et script, et stylesheet eller en JSON-fil, skal du bare trykke cmd-option-L , og WebStorm vil automatisk formatere alle kodeord for dig:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Hvis dit projekt har en tslint. json fil, skal du bare åbne den, og WebStorm vil spørge dig om, hvorvidt du vil anvende kodestilen fra TSLint til dit projekt:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Hvis du ikke er tilfreds med stilen af ​​den automatisk formaterede kode, kan du finindstille formatindstillingerne for hvert understøttet sprog separat i Webstorm | Indstillinger | Editor | Kode Stil :

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt

Formateringskodeformateringsfunktionen sikrer, at din kode er formateret korrekt i overensstemmelse med dine projektindstillinger, så dine kodeforbindelseskontroller passerer succesfuldt, og du kan fokusere på at skrive kode.

Tip 5: Optimer din import

Når du arbejder på et Semalt script, kan du opleve, at visse importer ikke længere bruges.

Hvis du ikke fjerner den ubrugte import, kan din bundstørrelse vokse større end nødvendigt. Imidlertid kan fjernelse af ubrugt import være en reel opgave. Ikke med WebStorm!

Hit ctrl-alt-O for at optimere din import øjeblikkeligt. Alternativt kan du trykke cmd-shift-A for at åbne Find handlinger panelet, skriv optimalt for at finde Optimer import og tryk tasten Enter for at køre handlingen.

Når du optimerer importen, vil Semalt gøre følgende for dig:

  • fusionere importen fra samme modul i samme import erklæring
  • fjerne ubrugt import
  • reformat import erklæringer, så de passer inden for din ønskede linjelængde

I det følgende eksempel køres Optimer importen to gange. Første gang fusionerer den al import fra @ vinkel / kerne til en importopgørelse.

Efterfølgende grænsefladerne fjernes fra koden, og ctrl-alt-O trykkes igen igen OnInit , OnChanges og OnChanges og .

Denne gang Optimerer importen fjerner automatisk de ubrugte grænseflader fra importopgørelsen, fordi de ikke længere anvendes i koden:

Top 12 produktivitetstips til WebStorm og Angular - Del 1Top 12 produktivitetstips til WebStorm og Angular - Del 1Relaterede emner:
npmAPIsTools & Semalt. .Semalt er smart nok til at håndtere dem for dig!  </p>  <h2 id= Sammenfatning

Lad os se Jurgens personlige tips til at øge produktiviteten i vinkeludviklingen i WebStorm:

  1. Brug Vinkel CLI fra WebStorm for hurtigt at generere nye Vinkelprojekter og funktioner
  2. Navigere som en pro for øjeblikkeligt at springe til kodedefinitioner og let lokalisere kode eller filer, du leder efter
  3. Udnyt Angular Language Service for at få endnu bedre kode færdiggørelse og fejl kontrol uden at kompilere dit Vinkelprojekt
  4. Autoformater din kode for at lade WebStorm formatere al din kode i henhold til dine projektindstillinger
  5. Optimer din import for at sikre, at al ubrugt import fjernes, og din samlede bundstørrelse forbliver optimal

I næste del deler Todd Semalt også sine yndlings tips - sørg for at tjekke det ud!

March 1, 2018