Plugin Vim yang disarankan untuk pengkodean JavaScript? [Tutup]

125

Saya baru mengenal JS & Vim. Plugin mana yang akan membantu saya menulis kode Javascript?

Tarek Saied
sumber
6
Untuk memberikan kejelasan pertanyaan lebih lanjut, dan untuk membantu OP dalam bahasa Inggris mereka untuk posting selanjutnya ... Itu seharusnya berbunyi: "Hai, saya baru di JS & Vim. Plugin mana yang akan membantu saya menulis kode Javascript?" Anda bisa mengatakan "Saya baru untuk Javascript dan vim". Anda dapat menggunakan "apa itu" untuk tunggal, jadi misalnya "Apa itu a_plugin yang akan membantu saya ..." atau Anda dapat menggunakan "yang" untuk jamak seperti ini: " Which_plugins akan membantu saya ...". Juga perhatikan bahwa alih-alih "plugin adalah " Anda harus menggunakan "plugin akan " karena ini adalah hipotesis. Semoga itu bisa membantu :-)
hendrixski
3
@hendrixski - pilih untuk membuka kembali ini.
ocodo
8
Pertanyaan paling tidak konstruktif yang pernah ada.
Vladislav Zorov
8
Saya cukup menikmati bagaimana pertanyaan "tidak konstruktif" ini membantu saya meningkatkan banyak alur kerja saya.
MaiaVictor
Karena pertanyaannya (IMO tidak adil) ditutup, saya hanya akan menambahkan komentar di sini: ada front-end berbasis-elektron untuk NeoVim dengan pelengkapan otomatis server bahasa skrip di luar kotak (bekerja dengan vanilla JS juga!): Onivim.io . Ini masih agak kasar, tetapi saya telah menggunakannya sebagai driver harian saya selama beberapa minggu sekarang dan belum terlalu banyak masalah. Ini memiliki komunitas yang sangat baik di sekitarnya, dan sedang dalam pengembangan yang sangat berat, jadi saya berharap hal-hal baik darinya di masa depan! Pengungkapan penuh: Saya memberikan sumbangan bulanan ke proyek dan berencana untuk berkontribusi di masa depan.
Parker Ault

Jawaban:

116

Pemeriksaan Sintaks / Linting

Ada cara yang sangat mudah untuk mengintegrasikan JSLint atau jshint.com berbasis komunitas (yang jauh lebih baik IMO) dengan Vim menggunakan plugin Syntastic Vim. Lihat posting saya yang lain untuk info lebih lanjut.

Penjelajahan Kode Sumber / Daftar tag

Ada juga cara yang sangat rapi untuk menambahkan tag-listing menggunakan Mozilla DoctorJS (sebelumnya jsctags ), yang juga digunakan di Cloud9 IDE 's Ace editor online .

  1. Instal paket-paket berikut menggunakan manajer paket favorit Anda (Ubuntu apt-get, rumahbrew Mac , dll.):
    1. exuberant-ctags
      • CATATAN: Setelah menginstal pastikan menjalankan ctagsbenar-benar berjalan exuberant-ctagsdan bukan OS yang diinstal sebelumnya ctags. Anda dapat mengetahuinya dengan mengeksekusi ctags --version.
    2. node (Node.js)
  2. Klon DoctorJSdari github:git clone https://github.com/mozilla/doctorjs.git
  3. Masuk ke dalam DoctorJSdir dan make install(Anda juga harus makememasang aplikasi, tetapi ini sangat mendasar).
    • Sudah ada beberapa bug dengan menginstal plugin, make installtidak melakukan trik untuk saat ini. Untuk saat ini saya hanya menambahkan bin/dir repo ke $ PATH saya sebagai gantinya. Lihat GitHub DoctorJS dan halaman masalah untuk info lebih lanjut.
  4. Instal plugin TagBar Vim ( CATATAN: Ini TagBar, bukan TagList lama yang terkenal!).
  5. KEUNTUNGAN. :)

Proyek Baru - Tern.js

DoctorJS saat ini sudah mati . Ada proyek yang menjanjikan baru yang disebut tern.js . Saat ini dalam versi beta awal, dan pada akhirnya harus menggantinya.

Ada ramitos proyek / jsctags yang menggunakan tiga barang sebagai mesinnya. Hanya npm install -gitu, dan tagbar akan secara otomatis menggunakannya untuk file javascript.

Ory Band
sumber
5
+1 untuk TagBar (hanya mengetahui TagList!)
RobM
9
Saat ini doctorjs mengharuskan Anda untuk mengkloning rekursif seperti yang ditentukan dalam bug ini , git clone --recursive https://github.com/mozilla/doctorjs.gitdan kemudian membuat instal harus bekerja
Andy Ray
1
doctorjs di Windows: baumichel.blogspot.ca/2011/11/... menambahkan filetypes tambahan ke TagBar: github.com/majutsushi/tagbar/wiki
Andrew
6
Sebelum melakukan langkah 3, cd ke doctorjs dan melakukan ini: git submodule init && git submodule update. Kemudian lakukan langkah 3.
glortho
2
Perintah minuman sebenarnyabrew install ctags-exuberant
sym3tri
17

snipMate mengemulasi sistem penyisipan TextMate dan dilengkapi dengan sekumpulan snipet JS yang berguna (antara lain) secara default. Sangat mudah untuk menambahkan milik Anda sendiri.

javaScriptLint memungkinkan Anda untuk memvalidasi kode Anda terhadap jsl.

Anda juga dapat menemukan berbagai file sintaksis JavaScript di vim.org. Cobalah dan lihat mana yang paling cocok untuk Anda dan gaya pengkodean Anda.

Omnicomplete asli ( ctrlx- ctrlo) bekerja sangat baik untuk saya. Anda dapat membuatnya lebih dinamis dengan autoComplPop , tetapi kadang-kadang bisa mengganggu.

sunting, sebagai tanggapan atas komentar tarek11011:

acp tidak berfungsi untuk JavaScript secara default, Anda harus mengubah sedikit. Inilah cara saya melakukannya (hack kotor, saya masih seorang Vim noob):

Dalam vim-autocomplpop / plugin / acp.vim saya telah menambahkan phpdan javascript(dan actionscript) behavssehingga terlihat seperti itu:

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

Sedikit di bawah, ada serangkaian blok kode yang terlihat seperti itu:

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

Saya telah menggandakan yang ini dan sedikit mengeditnya agar terlihat seperti itu:

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

dan melakukan hal yang sama untuk script dan php.

Jika Anda ingin mengedit JS / CSS dalam dokumen HTML yang dapat Anda lakukan: set ft = html.css.javascript di baris perintah Vim untuk membuat ctrlx- ctrlobekerja seperti yang diharapkan pada metode / properti nama dalam blok JS dan properti / nilai dalam blok CSS. Namun pendekatan ini juga memiliki kelemahan (lekukan aneh ...).

romainl
sumber
How did you do those cool looking keystrokes?
Maxim Sloyko
1
Haha, it's <kbd></kbd>. Browsers usually have no default styling for this tag, kudos to the SO team for doing the extra work.
romainl
thank you romainl , but a have a problem with autoComplPop it is work only with html file no js and css and php
Tarek Saied
Like a lot of Vim plugins acp is very sensitive to filetypes. If the buffer's filetype is "html", neither acp nor omni complete will work for embedded JS/CSS/PHP. And I'm going to edit my answer, not enough editing options/room here.
romainl
You may prefer to use the current maintenance branch of snipMate that Rok Garbas & co. put together.
thisgeek
8

This plugin is also useful: https://github.com/maksimr/vim-jsbeautify. It provides full autoformatting for javascript. One keystroke, and your code looks beautiful. It can come in handy when pasting code snippets as well. It makes use of the popular js-beautifier, which can also be found as an online application. The latter can be found right here: http://jsbeautifier.org/.

Chiel ten Brinke
sumber
3
I wrote a general autoformatting plugin for vim which integrates the js-beautifier and more. Check here: github.com/Chiel92/vim-autoformat
Chiel ten Brinke
prettitier - the best
Alex Shwarc
6

I only use one js specific vim plugin - jslint.vim - https://github.com/hallettj/jslint.vim which validates your code with jslints rules and gives you syntax errors as well.

Scott
sumber
thanks but I think I have a problem look at img69.imageshack.us/img69/7629/11142565.png
Tarek Saied
Hm, on windows there are specific instructions you'll need to follow, it requires a javascript interpreter. I haven't tried installing it on windows, but the install instructions are down the page a bit in the README, sorry I can't be more help there.
Scott
3

To fix indentation and autoformatting (Ctrl =): JavaScript Indent

To set indentation width, add javascript.vim file into ~/.vim/ftplugin dir with following contents (for two space indentation):

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