Zalecane wtyczki Vima do kodowania JavaScript? [Zamknięte]

125

Jestem nowy w JS i Vimie. Które wtyczki pomogłyby mi w pisaniu kodu JavaScript?

Tarek Saied
źródło
6
Aby uściślić to pytanie i pomóc operatorowi w posługiwaniu się językiem angielskim w przyszłych postach ... Powinien brzmieć: „Cześć, jestem nowy w JS i Vimie. Które wtyczki pomogłyby mi w pisaniu kodu JavaScript?” Możesz powiedzieć „Jestem nowy w Javascript i Vimie”. Możesz użyć „co jest” dla liczby pojedynczej, na przykład „Co to jest a_plugin, która by mi pomogła…” lub „która” w przypadku liczby mnogiej, jak ta: „ Które_pluginy pomogłyby mi ...”. Również zauważyć, że zamiast „wtyczek jest ” należy użyć „plugins będzie ”, ponieważ jest to hipotetyczna. Mam nadzieję, że to pomoże :-)
hendrixski
3
@hendrixski - zagłosuj, aby ponownie otworzyć.
ocodo
8
Najbardziej konstruktywne, niekonstruktywne pytanie w historii.
Vladislav Zorov
8
Bardzo podoba mi się to, że to „mało konstruktywne” pytanie pomogło mi znacznie poprawić mój przepływ pracy.
MaiaVictor,
Ponieważ pytanie jest (niesprawiedliwie IMO) zamknięte, dodam tylko komentarz tutaj: istnieje elektroniczny interfejs dla NeoVim z autouzupełnianiem serwera języka maszynopisu po wyjęciu z pudełka (działa również z waniliowym JS!): Onivim.io . Nadal jest trochę szorstki na krawędziach, ale używam go jako mojego codziennego sterownika od kilku tygodni i nie miałem zbyt wielu problemów. Ma naprawdę dobrą społeczność wokół niego, i to pod bardzo intensywnego rozwoju, więc spodziewać się dobrych rzeczy od niego w przyszłości! Pełne ujawnienie: przekazuję comiesięczną darowiznę na rzecz projektu i planuję wnieść swój wkład w przyszłości.
Parker Ault,

Odpowiedzi:

116

Sprawdzanie składni / linting

Istnieje bardzo łatwy sposób na zintegrowanie JSLint lub społecznościowej jshint.com (co jest znacznie lepszym IMO) z Vimem przy użyciu wtyczki Syntastic Vim. Zobacz mój drugi post, aby uzyskać więcej informacji.

Przeglądanie kodu źródłowego / lista tagów

Jest też bardzo gustowny sposób, aby dodać znacznik z wykazu za pomocą Mozilli DoctorJS (dawniej jsctags ), który jest również stosowany w Cloud9 IDE „s Ace Online Editor .

  1. Zainstaluj następujące pakiety za pomocą swojego ulubionego menedżera pakietów (Ubuntu apt-get, dombrew Maca itp.):
    1. exuberant-ctags
      • UWAGA: Po zainstalowaniu upewnij się, że ctagsfaktycznie działa, exuberant-ctagsa nie jest wstępnie zainstalowany system operacyjny ctags. Możesz się tego dowiedzieć, wykonując ctags --version.
    2. node (Node.js)
  2. Klonuj DoctorJSz github:git clone https://github.com/mozilla/doctorjs.git
  3. Wejdź do katalogu DoctorJSdir i make install(Będziesz także potrzebować makezainstalowanej aplikacji, ale jest to bardzo podstawowe).
    • Jest kilka błędów związanych z instalacją wtyczki, na razie make installnie działa. Na razie po prostu dodaję katalog repozytorium bin/do mojego $ PATH. Zobacz strony GitHub i problemów DoctorJS, aby uzyskać więcej informacji.
  4. Zainstaluj wtyczkę TagBar Vim ( UWAGA: To TagBar, a nie stara niesławna TagList!).
  5. ZYSK. :)

Nowy projekt - Tern.js

DoctorJS obecnie nie żyje . Pojawił się nowy obiecujący projekt o nazwie tern.js . Jest obecnie we wczesnej fazie beta i powinien ostatecznie go zastąpić.

Istnieje projekt ramitos / jsctags, który używa rybitwy jako swojego silnika. Po prostu npm install -gto, a tagbar automatycznie użyje go do plików javascript.

Ory Band
źródło
5
+1 dla TagBar (był świadomy tylko TagList!)
RobM
9
Obecnie doctorjs wymaga klonowania rekurencyjnego, jak określono w tym błędzie , git clone --recursive https://github.com/mozilla/doctorjs.gita następnie sprawienia, by instalacja działała
Andy Ray
1
doctorjs w systemie Windows: baumichel.blogspot.ca/2011/11/ ... dodanie dodatkowych typów plików do TagBar: github.com/majutsushi/tagbar/wiki
Andrew
6
Przed wykonaniem kroku 3 CD do doctorjs i to zrobić: git submodule init && git submodule update. Następnie wykonaj krok 3.
glortho
2
Polecenie parzenia to w rzeczywistościbrew install ctags-exuberant
sym3tri
17

snipMate emuluje system wstawiania TextMate i domyślnie zawiera kilka przydatnych fragmentów kodu JS (między innymi). Dodanie własnego jest niezwykle łatwe.

javaScriptLint umożliwia sprawdzenie poprawności kodu względem jsl.

Na vim.org można również znaleźć różne pliki składni JavaScript . Wypróbuj je i zobacz, który z nich najlepiej pasuje do Ciebie i Twojego stylu kodowania.

Natywny omnicomplete ( ctrlx- ctrlo) działa dla mnie bardzo dobrze. Możesz uczynić go bardziej dynamicznym dzięki autoComplPop , ale czasami może to być denerwujące.

edytuj, w odpowiedzi na komentarz tarek11011:

acp nie działa domyślnie dla JavaScript, musisz go trochę poprawić. Oto jak to zrobiłem (brudny hack, nadal jestem Vim noob):

W vim-autocomplpop / plugin / acp.vim dodałem phpi javascript(i actionscript) do, behavsaby wyglądało tak:

let behavs = {
    \   '*'            : [],
    \   'ruby'         : [],
    \   'python'       : [],
    \   'perl'         : [],
    \   'xml'          : [],
    \   'html'         : [],
    \   'xhtml'        : [],
    \   'css'          : [],
    \   'javascript'   : [],
    \   'actionscript' : [],
    \   'php'          : [],
    \ }

Nieco poniżej znajduje się seria bloków kodu, które wyglądają następująco:

"---------------------------------------------------------------------------
call add(behavs.ruby, {
    \   'command' : "\<C-x>\<C-o>",
    \   'meets'   : 'acp#meetsForRubyOmni',
    \   'repeat'  : 0,
    \ })

Ten zduplikowałem i trochę zmodyfikowałem, żeby wyglądał tak:

"---------------------------------------------------------------------------
call add(behavs.javascript, {
    \   'command' : "\<C-x>\<C-o>",
    \   'meets'   : 'acp#meetsForRubyOmni',
    \   'repeat'  : 0,
    \ })

i zrobiłem to samo dla actioncript i php.

Jeśli chcesz edytować JS / CSS w dokumencie HTML, możesz to zrobić: ustaw ft = html.css.javascript w linii poleceń Vima, aby zrobić ctrlx- działaj zgodnie z ctrlooczekiwaniami z nazwami metod / właściwości w blokach JS i właściwościami / wartościami w blokach CSS. Jednak takie podejście ma też swoje wady (dziwne wcięcia…).

romainl
źródło
Jak zrobiłeś te fajnie wyglądające naciśnięcia klawiszy?
Maxim Sloyko
1
Haha, to jest <kbd> </kbd>. Przeglądarki zwykle nie mają domyślnego stylu dla tego tagu, podziękowania dla zespołu SO za wykonanie dodatkowej pracy.
romainl
dziękuję romainl ale mam problem z autoComplPop to działa tylko z plikiem html no js i css oraz php
Tarek Saied
Podobnie jak wiele wtyczek Vima, acp jest bardzo wrażliwy na typy plików. Jeśli typ pliku bufora to „html”, ani acp, ani omni complete nie będą działać w przypadku osadzonego JS / CSS / PHP. I mam zamiar edytować moją odpowiedź, za mało opcji edycji / pokoju tutaj.
romainl
Może wolisz skorzystać z aktualnej gałęzi obsługi snipMate, którą jest Rok Garbas & co. Położyć razem.
thisgeek
8

Ta wtyczka jest również przydatna: https://github.com/maksimr/vim-jsbeautify . Zapewnia pełne autoformatowanie dla javascript. Jedno naciśnięcie klawisza i Twój kod wygląda pięknie. Może się przydać również podczas wklejania fragmentów kodu. Korzysta z popularnego js-beautifier, który można również znaleźć w aplikacji online. Ten ostatni można znaleźć tutaj: http://jsbeautifier.org/ .

Chiel ten Brinke
źródło
3
Napisałem ogólną wtyczkę do autoformatowania dla vima, która integruje js-beautifier i nie tylko. Sprawdź tutaj: github.com/Chiel92/vim-autoformat
Chiel ten Brinke
ładniejszy - najlepszy
Alex Shwarc
6

Używam tylko jednej wtyczki vim specyficznej dla js - jslint.vim - https://github.com/hallettj/jslint.vim, która sprawdza poprawność kodu za pomocą reguł jslints i wyświetla również błędy składniowe.

Scott
źródło
dzięki ale chyba mam problem spójrz na img69.imageshack.us/img69/7629/11142565.png
Tarek Saied
Hm, w systemie Windows są szczegółowe instrukcje, których musisz przestrzegać, wymaga to interpretera javascript. Nie próbowałem instalować go w systemie Windows, ale instrukcje instalacji znajdują się nieco na stronie w pliku README, przepraszam, że nie mogę tam więcej pomóc.
Scott,
3

Aby naprawić wcięcia i autoformatowanie (Ctrl =): Wcięcie JavaScript

Aby ustawić szerokość wcięcia, dodaj javascript.vimplik do katalogu ~ / .vim / ftplugin z następującą zawartością (dla wcięć dwóch spacji):

 setl sw=2 sts=2 et
Evgenii
źródło
w ~/.vimrc:autocmd FileType javascript setlocal sw=2 ts=2 sts=2
JuanPablo