web-dev-qa-db-fra.com

Plugins Vim recommandés pour le codage JavaScript?

Je suis nouveau sur JS & Vim. Quels plugins m'aideraient à écrire du code Javascript?

javascriptvim
125
Tarek Saied

Vérification de la syntaxe/de la charpie

Il existe un moyen très simple d’intégrer JSLint ou le jshint.com (qui est bien meilleur IMO), géré par la communauté, avec Vim à l’aide du plugin Syntastic Vim. Voir mon autre post pour plus d'informations.

Navigation dans le code source/liste de balises

Il existe également un moyen très pratique d’ajouter une liste de balises à l’aide de Mozilla DoctorJS (anciennement jsctags), également utilisé dans Cloud9 IDE = 's éditeur en ligne d'Ace .

  1. Installez les paquets suivants en utilisant votre gestionnaire de paquets préféré (Ubuntu apt-get, Mac home brew , etc.):
    1. exuberant-ctags
      • REMARQUE: Après l'installation, assurez-vous que l'exécution de ctags exécute réellement exuberant-ctags Et non le système préinstallé du système d'exploitation ctags . Vous pouvez le savoir en exécutant ctags --version.
    2. node (Node.js)
  2. Clone DoctorJS à partir de github: git clone https://github.com/mozilla/doctorjs.git
  3. Allez dans DoctorJS dir et make install (Vous aurez également besoin de l'application make installée, mais c'est très basique).
    • Il y a quelques bugs dans l'installation du plugin, make install Ne fait pas l'affaire pour le moment. Pour l'instant, j'ajoute simplement le répertoire bin/ Du référentiel à mon $ PATH. Voir GitHub et pages issues de DoctorJS pour plus d'informations.
  4. Installez le plugin TagBar Vim ( NOTE: C'est TagBar, pas l'ancien infâme TagList!).
  5. PROFIT. :)

Nouveau projet - Tern.js

DoctorJS est actuellement mort . Il y a un nouveau projet prometteur appelé tern.js . Il est actuellement en début de bêta et devrait éventuellement le remplacer.

Il y a un projet ramitos/jsctags qui utilise stern comme moteur. Juste npm install -g, Et tagbar l’utilisera automatiquement pour les fichiers javascript.

115
Ory Band

snipMate émule celui de TextMate ⇥ système d'insertion et vient avec un tas d'extraits JS utiles (entre autres) par défaut. Il est extrêmement facile d'ajouter le vôtre.

javaScriptLint vous permet de valider votre code par rapport à jsl.

Vous pouvez également trouver une variété de fichiers de syntaxe JavaScript sur vim.org. Essayez-les et voyez lequel fonctionne le mieux pour vous et votre style de codage.

Le natif omnicomplete (ctrlx-ctrlo) fonctionne très bien pour moi. Vous pouvez le rendre plus dynamique avec autoComplPop , mais cela peut parfois être ennuyeux.

éditer, en réponse au commentaire de tarek11011:

acp ne fonctionne pas pour JavaScript par défaut, vous devez le modifier un peu. Voici comment je l'ai fait (sale bidouillage, je suis toujours un Vim noob):

Dans vim-autocomplpop/plugin/acp.vim, j'ai ajouté php et javascript (et actionscript) à behavs pour qu'il ressemble à cela:

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

Un peu plus bas, il y a une série de blocs de code qui ressemblent à ça:

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

J'ai dupliqué celui-ci et l'ai édité un peu pour ressembler à ça:

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

et a fait la même chose pour actionscript et php.

Si vous voulez éditer JS/CSS dans un document HTML, vous pouvez faire: set ft = html.css.javascript dans la ligne de commande de Vim pour que ctrlx-ctrlo fonctionne comme prévu sur les noms de méthode/propriétés dans les blocs JS et les propriétés/valeurs dans les blocs CSS. Cependant, cette approche a aussi ses inconvénients (indentation bizarre…).

17
romainl

Ce plugin est également utile: https://github.com/maksimr/vim-jsbeautify . Il fournit un formatage automatique complet pour javascript. Une frappe, et votre code est magnifique. Cela peut s'avérer utile lors du collage d'extraits de code. Il utilise le très populaire js-beautifier, également disponible en ligne. Ce dernier se trouve juste ici: http://jsbeautifier.org/ .

8
Chiel ten Brinke

J'utilise seulement un plugin vim spécifique à js - jslint.vim - https://github.com/hallettj/jslint.vim qui valide votre code avec les règles jslints et vous donne également des erreurs de syntaxe.

6
Scott

Pour corriger l'indentation et la mise en forme automatique (Ctrl =): JavaScript Indent

Pour définir la largeur d'indentation, ajoutez javascript.vim fichier dans le répertoire ~/.vim/ftplugin avec le contenu suivant (pour une indentation de deux espaces):

 setl sw=2 sts=2 et
3
Evgenii