W tym wpisie pisałem jak tworzyć/edytować skróty klawiszowe pod własne preferencje. Dzisiaj opiszę, w jaki sposób eksportować lub importować już stworzone skróty.

Jest to bardzo przydatna funkcja. Nie musimy za każdym razem po instalacji programu czy systemu operacyjnego ustawiać wszystkiego od nowa. Wystarczy jeden plik, a IDE ustawi nam wszystko za nas.

Zacznijmy od eksportu.

Eksport ustawień

Żeby zrobić eksport ustawień wystarczy kliknąć: File -> Manage IDE Settings -> Export Settings...

Jak widać eksport odnosi się do wielu konfiguracji. Możemy wybrać sobie co chcemy eksportować. Na koniec musimy zapisać plik na dysku, w wybranym przez nas miejscu.

Import ustawień

Mając już plik możemy nasze ustawienia zaimportować. Robimy to analogicznie jak z eksportem: File -> Manage IDE Settings -> Import Settings.... Wyskoczy popup z ustawieniami gotowymi do importu:

Możemy sobie wybrać konkrentnie co chcemy zaimportować z tego pliku. Domyślnie wszystkie ustawienia są zaznaczone. Na koniec jeszcze musimy zatwierdzić import:

Za pomocą kontrolki Datepicker, w łatwy sposób umożliwisz użytkownikowi obsługę wprowadzania daty.

Konfiguracja modułów

Żeby zacząć używać Datpickera musimy zaimportować jego moduł. Szczegóły, jak to zrobić znajdziesz w tym wpisie.

Dodajemy MatDatepickerModule:

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';

@NgModule({
  exports: [
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class MaterialModule {}

Importujemy trzy moduły: MatInputModule - Datepicker korzysta z pola tekstowego dlatego ten moduł jest nam potrzebny.

MatDatepickerModule - Moduł obsługujący kontrolkę

MatNativeDateModule - W przypadku kontrolki Datepicker musimy dodatkowo zaimportować jeden moduł. Służy on do obsługi daty. Możemy wybrać inny jak na przykład: MatMomentDateModule

Pierwsze użycie

Dodajmy taki kod do szablonu:

<mat-form-field>
  <mat-label>Kiedy masz urodziny?</mat-label>
  <input matInput [matDatepicker]="birthDatepicker">
  <mat-datepicker-toggle matSuffix [for]="birthDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #birthDatepicker></mat-datepicker>
</mat-form-field>

Do zbudowania Datpickera korzystamy z czterech elementów:

Z etykiety - to jest opcjonalne

Z pola tekstowego, w którym będzie wyświetlana data. Przypisujemy do niego identyfikator, którym będziemy się później posługiwać. Ta linijka kodu jest wymagana.

mat-datepicker-toggle to ikonka po wciśnięciu której wyświetli popup z kalendarzem umożliwiający użytkownikowi wybór daty. Dyrektywa: matSuffix sprawi, że ikonka zostanie wyświetlona po prawej stronie. Jeśli chcemy wyświetlić ją po lewej stronie wystaczy ustawić: matPrefix. Ta linijka jest opcjonalna.

I na koniec mat-datpicker to nasz Datepicker przypisujemy do niego unikalny ID wcześniej przez nas zdefiniowany. To oczywiście jest wymagane do działania Datepickera.

Ustawienie formatu daty

Kiedy uruchomisz ten przykład po wyborze daty zauważ, że data jest zapisana w formacie: Miesiąc/Dzień/Rok. Taki format obowiązuje w USA. Załóżmy, że chcemy wyświetlać datę w formacie Dzień.Miesiąc.Rok. Możemy to zrobić globalnie.

Otwórz plik, w którym importujesz moduły z Angular Material i dodaj:

import { MAT_DATE_LOCALE } from '@angular/material/core';
import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';

@NgModule({
  exports: [
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
 providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'pl-PL' }
  ]
})
export class MaterialModule {}

Zaimportowaliśmy zmienną MAT_DATE_LOCALE oraz w providers ustawiliśmy format wyświetlania daty domyślnie w Polsce.

Wybór zakresu daty

Inna ciekawą funkcjonalnością jest umożliwienie użytkownikowi ustawienia zakresu daty: od - do. Przykład:

<mat-form-field>
	<mat-date-range-input [rangePicker]="rangeDate">
		<input matStartDate placeholder="Od">
		<input matEndDate placeholder="Do">
	</mat-date-range-input>
	<mat-datepicker-toggle matSuffix [for]="rangeDate"></mat-datepicker-toggle>
	<mat-date-range-picker #rangeDate></mat-date-range-picker>
</mat-form-field>

Więcej informacji znajdziesz o tej kontrolce pod tym linkiem

Podmiana tekstu w JavaScript jest dość prosta:

const someText = 'Lorem ipsum: {{message}}';
console.log(someText.replace('{{message}}', 'Hello!'));

Fraza {{message}} zostanie podmieniona. Ale jeśli, w tekście występowałaby więcej niż jeden raz to zostanie zastąpiona tylko ta pierwsza:

const someText = 'Lorem ipsum: {{message}}. Lorem ipsum: {{message}}';
console.log(someText.replace('{{message}}', 'Hello!'));

Wynik:

Lorem ipsum: Hello!. Lorem ipsum: {{message}}

Jest kilka sposobów na podmianę tekstu:

Funkcja replaceAll

Możemy użyć replaceAll

const someText = 'Lorem ipsum: {{message}}. Lorem ipsum: {{message}}';
console.log(someText.replaceAll('{{message}}', 'Hello!'));

Inny sposób

Jakiś czas temu miałem ten problem w NodeJS, ale tam replaceAll nie była obsługiwana. Można to obejść na przykład tak:

const replaceAll = (text, phrase, value) => text.split(phrase).join(value);
const someText = 'Lorem ipsum: {{message}}. Lorem ipsum: {{message}}';
console.log(replaceAll(someText, '{{message}}', 'Hello!'));

Skrypty

Każdy, który chodź trochę programował we frontend prędzej czy później spotkał się z plikiem package.json. Zawiera on różnego rodzaju zależności, które są wykorzystywane w tworzonym projekcie. Często w tym pliku znajdują się także skrypty, które na przykład uruchamiają projekt lub testy. Spójrzmy na poniższy przykład:

{
   ...
   "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
}

Powyższy fragment pochodzi z pliku package.json wygenerowanego przez Angulara. Pod scripts znajduje się lista kilku zadań/skryptów gotowych do uruchomienia za pomocą składni:

npm run nazwa-skryptu

npm run start

npm run build

Akurat w tym przypadku skrypty składają się z maksymalnie dwóch komend jak: ng serve. Takie przechowywanie skryptów jest szczególnie przydatne gdy polecenia są dość długie i zawiłe.

Więc skrypty pozwalają nam na usprawnienie pracy. Webstorm udostępnia funkcjonalność która pozwala na jeszcze wygodniejszą obsługę takich skryptów.

Konfiguracja w Webstorm

Samo wklepywanie w terminal poleceń nie wydaje się czymś trudnym. Z drugiej strony wyobraź sobie przypadek kiedy potrzebujesz się przełączać między różnymi skryptami. Za każdym razem musisz wklepywać npm run .... A nie lepiej użyć skrótu klawiszowego i w jeszcze szybszy sposób przełączać się między zadaniami? Ja wybieram tą drugą opcję.

Żeby skonfigurować skrypt przejdźmy do pliku package.json. Zauważ, że przy każdym skrypcie wyświetla się zielona strzałka:

Jeśli w nią klikniemy wyświetli się popup:

Mamy kilka opcji: możemy uruchomić skrypt. Włączyć go w trybie debugowania lub stworzyć dla niego konfigurację: Modify [script name] Configuration....

Ten popup możemy także wyświetlić za pomocą skrótu klawiszowego: Alt + Enter. Jeśli chcemy dany skrypt uruchomić bezpośrednio wystarczy kliknąć: Ctrl + Shift + F10. Te dwa skróty działają tylko gdy jesteś w pliku package.json.

My chcemy stworzyć konfigurację, która sprawi, że będziemy mogli uruchomić skrypt z dowolnego miejsca w projekcie. Wybieramy opcję: Modify [script name] Configuration...:

Nadajemy nazwę i zatwierdzamy. Mamy skonfigurowany nasz skrypt!

Obsługa skryptów

Po dodaniu skryptu zostanie on wyświetlony u góry w liście skryptów:

Skrót klawiszowy: Shift + F10 spowoduje uruchomienie skryptu, który wyświetla się w tej liście. Inaczej mówiąc bieżący skrypt.

Jeśli chcemy uruchomić inny skrypt niż bieżący najpierw klikamy skrót klawiszowy: Ctrl + Alt + F10:

Wybieramy skrypt do uruchomienia.

Żeby zatrzymać aktualnie uruchomiony skrypt klikamy: Ctrl + F2

Czym jest NVM?

NVM to skrót od: Node Version Manager. Jest to narzędzie, które ułatwi Ci życie w pracy związanej z NodeJS. Wyobraź sobie, że masz kilka aplikacji, które korzystają z różnych wersji NodeJS. Wystarczy jedna komenda i możesz szybko przełączyć się na daną wersję. Jeśli pracujesz z NodeJS i nie znasz tego narzędzie zachęcam do zapoznania się z nim.

Instalacja

NVM możesz zainstalować na takich systemach jak: Linux, MacOS, Windows. Poniżej pokazuję proces instalacji na Linuxie:

Wywołaj komendę:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Czasami zdarza się że po instalacji i użyciu komendy nvm terminal informuje nas, że nie może znaleźć takiego polecenia. Zwykle pomaga zamknięcie terminalu i otwarcie go na nowo. Ale i jeśli to nie pomoże to dodatkowo wywołaj:

source ~/.profile

Przydatne komendy

Poniżej przedstawiam listę komend do codziennej pracy z NVM:

Instalacja/użycie konkretnej wersji

nvm use version-of-nodejs

Informacja o aktualnie używanej wersji

nvm current

Lista zainstalowanych wersji

nvm list

Ustawienie domyślnej wersji

nvm alias default 12.10.0

Lista możliwych wersji do zainstalowania

nvm ls-remote

Uruchomienie skryptu w podanej wersji NodeJS

nvm run 12.13.1 script.js