Strona główna

Inteligentne podpowiadanie kodu javascript z projektem Tern

java_2_

Jednym z pożądanych funkcji edytora kodu jest inteligentne, kontekstowe podpowiadanie składni kodu użytkownika. Zalety są powszechnie znane – nie trzeba wkuwać na pamięć listy metod, funkcji czy też całej dokumentacji bibliotek, z których korzystamy.

Często spotykałem się z opinią, że tego typu funkcje dostępne są tylko w dużych środowiskach IDE, a przydatność tej funkcji jest na tyle ważna, że dyskwalifikuje użycie bardziej tradycyjnych edytorów (np. ViM) do poważnej pracy programistycznej. W tym wpisie pokażę że można mieć tą funkcję także w lekkich edytorach

Warto jednak mieć czasami alternatywę do przeciążałych IDE. W tym wpisie pokażę, jak za pomocą jednej wtyczki oraz dedykowanego silnika analizującego kod Javascript osiągnąć taką samą funkcjonalność w edytorze ViM. Mimo że opisuję tutaj proces dla konkretnego edytora, integracje dostępne są dla wielu innych edytorów i IDE.

Tern inteligentna analiza i modyfikacja kodu JavaScript

Naszym silnikiem, będzie narzędzie Tern (http://ternjs.net) . Jest to serwer, napisany w nodejs, który analizuje pliki JavaScript i wyciąga odpowiednie informacje o strukturze kodu listy funkcji, metod czy klas oraz powiązanych z nimi dokumentacji. Z naszej perspektywy, narzędzie to ma szereg przydatnych funkcji.

  • Silnik inferencji

  • - Jest to mechanizm, znany np. z języków funkcyjnych takich jak np. SML – silnik spróbuje ustalić na podstawie przekazywanych argumentów oraz kontekstów ich użycia, ich typy oraz typ wartości zwracanej przez funkcje i metody. Ze względu na słabe typowanie w języku JavaScript, rezultaty mogą być różne i czasem błędne, ale informacja o typach stanowić może dodatkową, przydatną dokumentację.

  • Wsparcie dla requirejs Wg. dokumentacji, narzędzie potrafi rozpoznawać zależności, opisywane w standardzie requirejs

  • Rozpoznawanie bloków dokumentacji

  • - na podstawie tej dokumentacji, narzędzie dostarczy informacji kontekstowej o bieżącej funkcji lub metodzie.

  • Mechanizm wtyczek - wtyczki rozszerzają funkcje silnika, a także zawierają podpowiedzi dla popularnych bibliotek. Pełną listę można znaleźć tutaj: https://www.npmjs.com/browse/keyword/tern

Instalacja i integracja z ViM

Instalacja wtyczki w przypadku starego dobrego ViM jest prosta, zakładając, że mamy zainstalowaną wtyczkę pathogen. Proces jest następujący:

1. Jeżeli nie zainstalowaliśmy wcześniej node.js: sudo apt-get install nodejs

2. W katalogu ~/.vim/bundle/ ściągamy wtyczkę z github: git clone https://github.com/marijnh/tern_for_vim

3. W katalogu ściągniętej wtyczki (~/.vim/bundle/tern_for_vim/) instalujemy narzędzie tern i zależności: npm install

Na tym kończymy konfigurację wtyczki. Wymagana jest jeszcze konfiguracja na poziomie projektu, by to zrobić, w katalogu aplikacji tworzymy pliku .tern-project. Dla przykładu, w moim, Drupalowym projekcie plik wyglądał następująco:

{
  "libs": [
    "browser",
    "jquery",
    „underscore”
  ],
  "loadEagerly": [
    "misc/*.js"
  ],
  "plugins": {
    "requirejs": {
      "baseURL": "./",
      "paths": {}
    }
  }
}

W tym przypadku, załadowaliśmy informacje o bibliotece jquery, underscore oraz browser (czyli API dostępne w przeglądarce). Zakładamy, że oprócz tych bibliotek (i obecnie edytowany plik), ładowane i analizowane są pliki z podkatalogu misc (sekcja loadEagerly).

Szczegóły konfiguracji można znaleźć tutaj. Po wykonaniu tej czynności, dopełnianie kodu w edytorze, powinno działać bezproblemowo. W przypadku ViM, podpowiedź otrzyma się po użyciu kombinacji CTRL-X CTRL-O, lub użycie wtyczki pokroju youcompleteme

Inne możliwości

Oprócz opisanych funkcjonalności, wtyczka dla edytora, korzystając z Tern jest w stanie

  • Inteligentna refaktoryzacja

  • Wykrywanie odwołań do obiektów, klas, metod w kodzie

  • Wyświetlenie dokumentacji wybranego obiektu, klasy czy funkcji

Zainteresowanych odsyłam do dokumentacji samej wtyczki.

Źródła

Written by Jarek Sobiecki
  • Toolkit