Webstorm: Jak dodać wiele karetek w kodzie?

Opublikowano: 04.07.2024 - tagi: Webstorm IDE Karetka Kod Mysz Klawiatura

Sposób 1: Klawiatura + mysz

Wciśnij przycisk Alt i następnie zlokalizuj miejsce, w którym chcesz umieścić dodatkową karetkę. Wciśnij lewy przycisk myszy.

Sposób 2: Klawiatura

Możesz umieścić dodatkowe karetki poniżej lub powyżej aktualnej lokalizacji korzystając tylko z klawiatury.

Wciśnij dwa razy przycisk Ctrl (za drugim kliknięciem nie zwalniaj klawisza), używając strzałek góra/dół na klawiaturze możesz dodawać nowe karetki.


Podsumowanie: Czerwiec 2024

Opublikowano: 30.06.2024 - tagi: Blog Podsumowanie Czerwiec 2024

W czerwcu opublikowałem 1 wpis:


Webstorm:

  1. Praca z JSDoc

Przeczytałem 1 książkę:

  1. Unit Testing Principles, Practices, and Patterns — Vladimir Khorikov

Przesłuchałem 6 audiobooków:

  1. Feel Good Productivity — Ali Abdaal
  2. Korona śniegu i krwi — Elżbieta Cherezińska
  3. Ludzkie dzieci — P.D. James
  4. Ostatnie życzenie — Andrzej Sapkowski
  5. Tekst — Dmitry Glukhovsky
  6. Artemis — Andy Weir

Webstorm: Praca z JSDoc

Opublikowano: 29.06.2024 - tagi: Webstorm Porada Kod Dokumentacja Skrót Produktywność JavaScript TypeScript

Webstorm i JSDoc

Tworzenie dokumentacji za pomocą JSDoc można zautomatyzować. Wystarczy, że przed funkcją napiszesz: /** i naciśniesz klawisz Enter:

/**function sum(a, b) {
	return a + b;
}

Zostanie wygenerowana dokumentacja:

/**
 * 
 * @param a
 * @param b
 * @returns {*}
 */
function sum(a, b) {
	return a + b;
}

JSDoc i Typescript

Dodatkowo można poinformować Webstorm, żeby stworzył dokumentację kodu wraz z typami danych.

Czyli mając kod:

/**function sum(a: number, b: number): number {
    return a + b;
}

Możesz wygenerować to:

/**
 *
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function sum(a: number, b: number): number {
    return a + b;
}

Żeby tak się stało, upewnij się, że jedna opcja w ustawieniach jest zaznaczona.

Przejdź do Settings (CTRL + ALT + S) -> Editor -> Code Style -> TypeScript. Zakładka: Code Generation. Sekcja Comments i zaznacz opcję: Include types in JSDoc.


Podsumowanie: Maj 2024

Opublikowano: 31.05.2024 - tagi: Blog Podsumowanie Maj 2024

W maju opublikowałem 2 wpisy:


JavaScript:

  1. Jak filtrować dane z dwóch zbiorów?
  2. Jak zresetować listę?

Przeczytałem 2 książki:

  1. Ogień i krew część 1 — George R.R. Martin
  2. Mroczna materia — Blake Crouch

Przesłuchałem 9 audiobooków:

  1. Pieśń Lodu i Ognia. Tom 1. Gra o tron — George R.R. Martin
  2. To nie jest Miami — Melchor Fernanda
  3. Miasto ślepców — Jose Saramago
  4. Pokrzywa i kość — Kingfisher T.
  5. Gościni — Marcin Napiórkowski
  6. Cała prawda o planecie Ksi — Janusz A. Zajdel
  7. Pieśń Lodu i Ognia. Tom 2. Starcie Królów — George R.R. Martin
  8. Ziemiomorze. Najdalszy brzeg — Ursula K. Le Guin
  9. Pragnienie — Jozef Karika

JavaScript: Jak zresetować listę?

Opublikowano: 23.05.2024 - tagi: JavaScript Lista Opcja

Odznaczanie opcji z listy

Przykładowa lista wielokrotnego wyboru:

<label for="colour">What is your favourite colour?</label>
<br />
<select id="colour" name="colour" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="other">Other</option>
</select>
<br />
<button id="reset">Reset</button>

Jak zresetować listę do stanu początkowego po kliknięciu przycisku Reset?

Element: HTMLSelectElement posiada atrybut o nazwie: selectedIndex. Przechowuje indeks, który mówi, który element z listy jest zaznaczony (indeks jest liczony od 0).

Czyli jeśli posiada wartość 0 to znaczy, że pierwszy element z listy jest zaznaczony. Jeśli lista nie zawiera zaznaczonych elementów, to selectedIndex będzie mieć wartość: -1.

Żeby zresetować listę, wystarczy przypisać do selectedIndex wartość: -1:

const select = document.getElementById("colour");
const resetBtn = document.getElementById("reset");

resetBtn.addEventListener("click", () => {
  select.selectedIndex = -1;
});