Frontend Thursday vol. 54

1. Visual Studio Code 1.60

Jak wynika z raportu  State of JS 2020, VS Code jest IDE najczęściej używanym przez JavaScript Developerów (i to z pokryciem około 85% rynku!). W związku z tym pojawienie się nowej wersji tego edytora tekstu nie staje się frontendowym newsem, ale z pewnością zainteresuje sporą część z Was. Zwłaszcza, że do nowej wersji trafiło kilka ciekawych usprawnień.

Największą nowością w VS Code 1.60 jest automatyczne wykrywanie języka. Rozwiązanie działa bez dodatkowej konfiguracji, czy dopisywania rozszerzenia pliku. Całość oparta jest o sztuczną inteligencję, ale w dobie Copilota nie robi to już chyba takiego wrażenia.

Kolejną zmianą trafiającą do VS Code jest kolorowanie klamr. Co prawda, podobna funkcjonalność była już dostępna przy użyciu pluginu (w końcu VS Code znany jest ze swojego urodzaju pluginów), ale Microsoft chwali się, że dokonał znaczących usprawnień wydajności.

Teraz przejdźmy do tego, co Frontend developerów interesuje najbardziej, czyli funkcjonalności dedykowanych dla JavaScript. Nowy VS Code dostarcza rozbudowany system inline suggestion (funkcjonalność ta wspiera parametry funkcji, zwracane wartości i typy zmiennych). Oprócz tego dostajemy również rozbudowany spelling suggestions. Jak to mówią: bunkrów nie ma ale i tak jest zaje****.

Oczywiście to nie koniec zmian i nowości w VS Code 1.60, ale jeśli interesuje Was pełna lista to odsyłam Was do linku ze źródeł.

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

Źródła:

https://code.visualstudio.com/updates/v1_60#_inlay-hints-for-javascript-and-typescript

2. Statyczne bloki inicjalizacji zmierzają do ES2022

JavaScript od dawna posiada statyczne pola, ale jeśli ich inicjalizacja wymaga uruchomienia kawałka kodu, to zdani byliśmy na hack z wykorzystaniem _ (przykład poniżej). Dlaczego potrzebujemy lepszego rozwiązania problemu inicjalizacji statycznych pól? Po pierwsze stosowane do tej pory rozwiązanie to hack, i jak większość hacków, potrafi być mocno nieczytelne. Po drugie, tak napisana funkcja inicjalizująca nie ma dostępu do prywatnych pól w klasie bazowej.

class Translator {
  static translations = {
    yes: 'ja',
    no: 'nein',
    maybe: 'vielleicht',
  };
  static englishWords = [];
  static germanWords = [];
  static _ = initializeTranslator( // (A)
    this.translations, this.englishWords, this.germanWords);
}
function initializeTranslator(translations, englishWords, germanWords) {
  for (const [english, german] of Object.entries(translations)) {
    englishWords.push(english);
    germanWords.push(german);
  }
}

Rozwiązanie tego problemu jakie zaakceptowało TC39, to właśnie statyczne bloki inicjalizacji, które do złudzenia przypominają te od dawna znane z Javy. Nowe rozwiązanie dostępne jest już w TypeScript 4.4 i V8 od wersji 93, a ze względu na osiągnięcie konsensusu przez starszyznę JavaScriptu należy spodziewać się, że funkcjonalność ta wkrótce trafi również do Firefoxa i Safari.

class Translator {
  static translations = {
    yes: 'ja',
    no: 'nein',
    maybe: 'vielleicht',
  };
  static englishWords = [];
  static germanWords = [];
  static { // (A)
    for (const [english, german] of Object.entries(this.translations)) {
      this.englishWords.push(english);
      this.germanWords.push(german);
    }
  }
}

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

Źródła:

https://2ality.com/2021/09/class-static-block.html