¿Complementos recomendados de Vim para la codificación de JavaScript? [cerrado]

125

Soy nuevo en JS y Vim. ¿Qué complementos me ayudarían a escribir código Javascript?

Tarek Saied
fuente
66
Para dar más claridad a la pregunta y ayudar al OP en su inglés para futuras publicaciones ... Debería leer: "Hola, soy nuevo en JS y Vim. ¿Qué complementos me ayudarían a escribir código Javascript?" Puede decir "Soy nuevo en Javascript y vim". Puede usar "what is" para singular, por ejemplo, "What es un_plugin que me ayudaría ..." o puede usar "which" para un plural como este: " Which_plugins me ayudaría ...". También tenga en cuenta que en lugar de "plugins es " debe usar "plugins would " porque es hipotético. Espero que ayude :-)
hendrixski
3
@hendrixski: vote para reabrir esto.
ocodo
8
La pregunta más constructiva no constructiva jamás realizada.
Vladislav Zorov
8
Disfruto bastante de cómo esta pregunta "no constructiva" me ayudó a mejorar mucho mi flujo de trabajo.
MaiaVictor
Dado que la pregunta está cerrada (injustamente en la OMI), solo agregaré un comentario aquí: hay un front-end basado en electrones para NeoVim con autocompletado de servidor de lenguaje mecanografiado listo para usar (¡también funciona con vanilla JS!): Onivim.io . Todavía es un poco difícil, pero lo he estado usando como mi conductor diario durante algunas semanas y no he tenido demasiados problemas. Tiene una comunidad realmente buena a su alrededor, y está en desarrollo muy pesado, ¡así que espero cosas buenas de él en el futuro! Divulgación completa: hago una donación mensual al proyecto y planeo contribuir en el futuro.
Parker Ault

Respuestas:

116

Comprobación de sintaxis / Linting

Hay una manera muy fácil de integrar JSLint o el jshint.com impulsado por la comunidad (que es mucho mejor IMO) con Vim usando el complemento Syntastic Vim. Vea mi otra publicación para más información.

Exploración de código fuente / Lista de etiquetas

Hay también una manera muy ordenada para agregar la etiqueta-lista de Mozilla usando DoctorJS (anteriormente jsctags ), que también se utiliza en Cloud9 IDE 's editor en línea Ace .

  1. Instale los siguientes paquetes utilizando su administrador de paquetes favorito (Ubuntu apt-get, la casabrew de Mac , etc.):
    1. exuberant-ctags
      • NOTA: Después de la instalación, asegúrese de que la ejecución ctagsrealmente se ejecute exuberant-ctagsy no el SO preinstalado ctags. Puedes averiguarlo ejecutando ctags --version.
    2. node (Node.js)
  2. Clon DoctorJSde github:git clone https://github.com/mozilla/doctorjs.git
  3. Vaya dentro del DoctorJSdirectorio y make install(también necesitará la makeaplicación instalada, pero esto es muy básico).
    • Hay algunos errores con la instalación del complemento, make installno funciona por el momento. Por ahora solo agrego el bin/directorio del repositorio a mi $ PATH en su lugar. Consulte las páginas de problemas y GitHub de DoctorJS para obtener más información.
  4. Instale el complemento TagBar Vim ( NOTA: ¡es TagBar, no la vieja y famosa TagList!).
  5. LUCRO. :)

Nuevo proyecto - Tern.js

DoctorJS está actualmente muerto . Hay un nuevo proyecto prometedor llamado tern.js . Actualmente está en versión beta temprana, y eventualmente debería reemplazarlo.

Hay un proyecto ramitos / jsctags que utiliza tern como motor. Solo npm install -geso, y tagbar lo usará automáticamente para archivos javascript.

Ory Band
fuente
55
+1 para TagBar (¡solo estaba al tanto de TagList!)
RobM
9
Actualmente doctorjs requiere que clones recursivamente como se especifica en este error , git clone --recursive https://github.com/mozilla/doctorjs.gity luego hacer que la instalación funcione
Andy Ray
1
doctorjs en Windows: baumichel.blogspot.ca/2011/11/… agregando tipos de archivo adicionales a TagBar: github.com/majutsushi/tagbar/wiki
Andrew
66
Antes de realizar el paso 3, CD en doctorjs y hacer esto: git submodule init && git submodule update. Luego haz el paso 3.
glortho
2
El comando brew es en realidadbrew install ctags-exuberant
sym3tri
17

snipMate emula el sistema de inserción de TextMate y viene con un montón de fragmentos útiles de JS (entre otros) por defecto. Es extremadamente fácil agregar el tuyo.

javaScriptLint le permite validar su código contra jsl.

También puede encontrar una variedad de archivos de sintaxis de JavaScript en vim.org. Pruébelos y vea cuál funciona mejor para usted y su estilo de codificación.

El omnicompleto nativo ( ctrlx- ctrlo) funciona muy bien para mí. Puede hacerlo más dinámico con autoComplPop , pero a veces puede ser molesto.

editar, en respuesta al comentario de tarek11011:

acp no funciona para JavaScript por defecto, tienes que modificarlo un poco. Así es como lo hice (truco sucio, todavía soy un novato de Vim):

En vim-autocomplpop / plugin / acp.vim he agregado phpy javascript(y actionscript) para behavsque se vea así:

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

Un poco más abajo, hay una serie de bloques de código que se ven así:

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

He duplicado este y lo edité un poco para que se vea así:

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

e hizo lo mismo para actionscript y php.

Si desea editar JS / CSS dentro de un documento HTML que puede hacer: juego de pies = html.css.javascript en la línea de comandos de Vim para hacer ctrlx- ctrloel trabajo como se esperaba en el método / propiedades nombres en JS bloques y propiedades / valores en bloques CSS. Sin embargo, este enfoque también tiene sus inconvenientes (sangría extraña ...).

romainl
fuente
¿Cómo hiciste esas teclas geniales?
Maxim Sloyko
1
Jaja, es <kbd> </kbd>. Los navegadores generalmente no tienen un estilo predeterminado para esta etiqueta, felicitaciones al equipo de SO por hacer el trabajo adicional.
romainl
gracias romainl, pero tengo un problema con autoComplPop, solo funciona con el archivo html sin js y css y php
Tarek Saied
Al igual que muchos complementos de Vim, acp es muy sensible a los tipos de archivos. Si el tipo de archivo del búfer es "html", ni acp ni omni complete funcionarán para JS / CSS / PHP incrustado. Y voy a editar mi respuesta, no hay suficientes opciones de edición / espacio aquí.
romainl
Es posible que prefiera utilizar la rama de mantenimiento actual de snipMate que Rok Garbas & co. juntar.
thisgeek
8

Este complemento también es útil: https://github.com/maksimr/vim-jsbeautify . Proporciona formato automático completo para javascript. Una pulsación de tecla y su código se ve hermoso. También puede ser útil al pegar fragmentos de código. Utiliza el popular js-beautifier, que también se puede encontrar como una aplicación en línea. Este último se puede encontrar aquí: http://jsbeautifier.org/ .

Chiel ten Brinke
fuente
3
Escribí un plugin de formato automático general para vim que integra el embellecedor js y más. Consulta aquí: github.com/Chiel92/vim-autoformat
Chiel ten Brinke
prettitier - el mejor
Alex Shwarc
6

Solo uso un plugin vim específico de js: jslint.vim - https://github.com/hallettj/jslint.vim que valida su código con las reglas de jslints y también le da errores de sintaxis.

Scott
fuente
gracias pero creo que tengo un problema mira img69.imageshack.us/img69/7629/11142565.png
Tarek Saied
Hm, en Windows hay instrucciones específicas que deberás seguir, requiere un intérprete de JavaScript. No he intentado instalarlo en Windows, pero las instrucciones de instalación están un poco más abajo en el archivo README, lo siento, no puedo ayudarlo más.
Scott
3

Para corregir la sangría y el autoformato (Ctrl =): sangría de JavaScript

Para establecer el ancho de sangría, agregue javascript.vim archivo en ~ / .vim / ftplugin dir con los siguientes contenidos (para sangría de dos espacios):

 setl sw=2 sts=2 et
Evgenii
fuente
en ~/.vimrc:autocmd FileType javascript setlocal sw=2 ts=2 sts=2
JuanPablo