ปลั๊กอิน Vim ที่แนะนำสำหรับการเข้ารหัส JavaScript? [ปิด]

125

ตามที่กล่าวไว้ในปัจจุบันคำถามนี้ไม่เหมาะสำหรับรูปแบบถาม & ตอบของเรา เราคาดหวังว่าคำตอบจะได้รับการสนับสนุนจากข้อเท็จจริงการอ้างอิงหรือความเชี่ยวชาญ แต่คำถามนี้อาจก่อให้เกิดการถกเถียงโต้แย้งการสำรวจความคิดเห็นหรือการอภิปรายเพิ่มเติม หากคุณรู้สึกว่าคำถามนี้สามารถปรับปรุงได้และอาจเปิดใหม่ได้โปรดไปที่ศูนย์ช่วยเหลือเพื่อรับคำแนะนำ

ปิดให้บริการใน7 ปีที่ผ่านมา

ฉันเพิ่งเริ่มใช้ JS & Vim ปลั๊กอินใดที่จะช่วยฉันในการเขียนโค้ด Javascript

javascript vim

— Tarek Saied
แหล่งที่มา

6

เพื่อให้คำถามมีความชัดเจนยิ่งขึ้นและเพื่อช่วย OP ในภาษาอังกฤษสำหรับโพสต์ในอนาคต ... ควรอ่าน: "สวัสดีฉันเพิ่งเริ่มใช้ JS & Vim ปลั๊กอินใดที่จะช่วยให้ฉันเขียนโค้ด Javascript ได้" คุณสามารถพูดว่า "ฉันเพิ่งเริ่มใช้ Javascript และ vim" คุณสามารถใช้ "what is" สำหรับเอกพจน์ได้เช่น " a_pluginคืออะไรที่ช่วยฉันได้ ... " หรือคุณสามารถใช้ "which" สำหรับพหูพจน์แบบนี้ " Which_plugins would help me ... " นอกจากนี้โปรดสังเกตว่าแทนที่จะเป็น "ปลั๊กอินคือ " คุณควรใช้ "plugins would " เพราะเป็นการสมมุติ หวังว่าจะช่วย :-)

— hendrixski

3

@hendrixski - โหวตเพื่อเปิดสิ่งนี้อีกครั้ง

— ocodo

8

คำถามที่ไม่สร้างสรรค์ที่สุดเท่าที่เคยมีมา

— Vladislav Zorov

8

ฉันค่อนข้างสนุกที่คำถาม "ไม่สร้างสรรค์" นี้ช่วยให้ฉันปรับปรุงขั้นตอนการทำงานได้มาก

— MaiaVictor

เนื่องจากคำถามถูกปิด (IMO อย่างไม่เป็นธรรม) ฉันจะเพิ่มความคิดเห็นที่นี่: มีฟรอนต์เอนด์ที่ใช้อิเล็กตรอนสำหรับ NeoVim พร้อมกับการเติมข้อความอัตโนมัติของเซิร์ฟเวอร์ภาษา typescript นอกกรอบ (ใช้ได้กับ vanilla JS ด้วย!): onivim.io . มันยังค่อนข้างหยาบรอบ ๆ ขอบ แต่ฉันใช้มันเป็นไดรเวอร์ประจำวันมาสองสามสัปดาห์แล้วและไม่มีปัญหามากเกินไป มีชุมชนที่ดีจริงๆอยู่รอบ ๆ และอยู่ระหว่างการพัฒนาที่หนักมากดังนั้นฉันจึงคาดหวังสิ่งดีๆจากที่นี่ในอนาคต! การเปิดเผยข้อมูลทั้งหมด: ฉันบริจาครายเดือนให้กับโครงการและวางแผนที่จะมีส่วนร่วมในอนาคต

— Parker Ault

116

การตรวจสอบไวยากรณ์ / Linting

มีวิธีที่ง่ายมากในการรวม JSLint หรือjshint.com ที่ขับเคลื่อนโดยชุมชน(ซึ่งเป็น IMO ที่ดีกว่ามาก) กับ Vim โดยใช้ปลั๊กอิน Syntastic Vim ดูโพสต์อื่น ๆ ของฉันสำหรับข้อมูลเพิ่มเติม

การเรียกดูซอร์สโค้ด / รายการแท็ก

นอกจากนี้ยังมีวิธีที่ประณีตมากที่จะเพิ่มแท็กรายชื่อโดยใช้ของ Mozilla DoctorJS (เดิมjsctags ) ซึ่งยังใช้ในการCloud9 IDE 's Ace บรรณาธิการออนไลน์

ติดตั้งแพ็คเกจต่อไปนี้โดยใช้ตัวจัดการแพ็คเกจที่คุณชื่นชอบ (ของ Ubuntu บ้านapt-getของ Mac ฯลฯ ): brew
1. exuberant-ctags
  - หมายเหตุ:หลังจากติดตั้งให้แน่ใจว่าทำงานctagsจริงทำงานและไม่ได้ระบบปฏิบัติการที่ติดตั้งไว้แล้วexuberant-ctags คุณสามารถหาข้อมูลโดยการดำเนินการctagsctags --version
2. node (Node.js)
โคลนDoctorJSจาก github:git clone https://github.com/mozilla/doctorjs.git
เข้าไปข้างในDoctorJSdir และmake install(คุณจะต้องmakeติดตั้งแอพด้วย แต่นี่เป็นพื้นฐานมาก)
- มีข้อบกพร่องบางอย่างในการติดตั้งปลั๊กอินmake installไม่ได้ทำเคล็ดลับในขณะนี้ ตอนนี้ฉันแค่เพิ่มbin/dir repo ใน$ PATH ของฉันแทน ดูGitHub ของ DoctorJS และหน้าปัญหาสำหรับข้อมูลเพิ่มเติม
ติดตั้งปลั๊กอิน TagBar Vim ( หมายเหตุ:เป็น TagBar ไม่ใช่ TagList เก่าที่น่าอับอาย!)
กำไร. :)

โครงการใหม่ - Tern.js

DoctorJS ปัจจุบันตาย มีโปรเจ็กต์ใหม่ที่มีแนวโน้มชื่อว่าtern.js tern.jsขณะนี้อยู่ในช่วงเบต้าและควรแทนที่ในที่สุด

มีโครงการramitos / jsctagsซึ่งใช้ tern เป็นเครื่องมือ เพียงแค่npm install -gนั้นแท็กบาร์จะใช้สำหรับไฟล์จาวาสคริปต์โดยอัตโนมัติ

— Ory Band
แหล่งที่มา

5

+1 สำหรับ TagBar (รู้เฉพาะ TagList!)

— RobM

9

ปัจจุบัน doctorjs คุณจะต้องโคลน recursive ตามที่ระบุในข้อผิดพลาดนี้ , git clone --recursive https://github.com/mozilla/doctorjs.gitและจากนั้นให้ติดตั้งควรจะทำงาน

— แอนดี้เรย์

1

doctorjs บน Windows: baumichel.blogspot.ca/2011/11/…การเพิ่มประเภทไฟล์เพิ่มเติมใน TagBar: github.com/majutsushi/tagbar/wiki

— Andrew

6

ก่อนทำขั้นตอนที่ 3 ให้ cd ลงใน doctorjs แล้วทำสิ่งนี้: git submodule init && git submodule update. จากนั้นทำขั้นตอนที่ 3

— glortho

2

คำสั่งชงเป็นจริงbrew install ctags-exuberant

— sym3tri

17

snipMateเลียนแบบ TextMate⇥ระบบการแทรกและมาพร้อมกับตัวอย่างข้อมูล JS ที่มีประโยชน์มากมาย (รวมถึงอื่น ๆ ) โดยค่าเริ่มต้น ง่ายมากที่จะเพิ่มของคุณเอง

javaScriptLintช่วยให้คุณตรวจสอบรหัสของคุณกับjsl

นอกจากนี้คุณสามารถค้นหาไฟล์ไวยากรณ์ JavaScript ที่หลากหลายได้ใน vim.org ลองใช้และดูว่าอันไหนดีที่สุดสำหรับคุณและสไตล์การเขียนโค้ดของคุณ

omnicomplete พื้นเมือง ( ctrlx- ctrlo) ทำงานได้ดีสำหรับฉัน คุณสามารถทำให้มันมีไดนามิกมากขึ้นด้วยautoComplPopแต่บางครั้งมันก็น่ารำคาญ

แก้ไขตามความคิดเห็นของ tarek11011:

acp ใช้ไม่ได้กับ JavaScript โดยค่าเริ่มต้นคุณต้องปรับแต่งเล็กน้อย นี่คือวิธีที่ฉันทำ (แฮ็คสกปรกฉันยังคงเป็น Vim noob):

ใน vim-autocomplpop / plugin / acp.vim ฉันได้เพิ่มphpและjavascript(และactionscript) เพื่อbehavsให้ดูเหมือนว่า:

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

ด้านล่างเล็กน้อยมีชุดรหัสบล็อกที่มีลักษณะดังนี้:

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

ฉันได้ทำซ้ำสิ่งนี้และแก้ไขเล็กน้อยเพื่อให้มีลักษณะดังนี้:

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

และทำเช่นเดียวกันกับ actionscript และ php

หากคุณต้องการแก้ไข JS / CSS ภายในเอกสาร HTML คุณสามารถทำได้: ตั้งค่า ft = html.css.javascript ในบรรทัดคำสั่งของ Vim เพื่อให้ctrlx- ctrloทำงานตามที่คาดไว้กับชื่อ method / properties ในบล็อก JS และคุณสมบัติ / ค่าในบล็อก CSS อย่างไรก็ตามวิธีนี้ก็มีข้อเสียเช่นกัน (การเยื้องแปลก ๆ …)

— romainl
แหล่งที่มา

คุณกดแป้นพิมพ์ที่ดูเท่เหล่านั้นได้อย่างไร?

— Maxim Sloyko

1

ฮ่า ๆ มันคือ <kbd> </kbd> โดยปกติเบราว์เซอร์จะไม่มีรูปแบบเริ่มต้นสำหรับแท็กนี้ขอชื่นชมทีม SO ในการทำงานพิเศษ

— romainl

ขอบคุณ romainl แต่มีปัญหากับ autoComplPop มันใช้งานได้เฉพาะกับไฟล์ html ที่ไม่มี js และ css และ php

— Tarek Saied

เช่นเดียวกับปลั๊กอิน Vim จำนวนมาก acp มีความไวต่อประเภทไฟล์มาก หากประเภทไฟล์ของบัฟเฟอร์เป็น "html" ทั้ง acp หรือ omni ไม่สมบูรณ์จะใช้กับ JS / CSS / PHP แบบฝัง และฉันจะแก้ไขคำตอบของฉันมีตัวเลือก / ห้องแก้ไขไม่เพียงพอที่นี่

— romainl

คุณอาจต้องการใช้สาขาการบำรุงรักษาปัจจุบันของ snipMateที่ Rok Garbas & co รวมกัน.

— thisgeek

8

ปลั๊กอินนี้ยังมีประโยชน์: https://github.com/maksimr/vim-jsbeautify มีการจัดรูปแบบอัตโนมัติเต็มรูปแบบสำหรับจาวาสคริปต์ การกดแป้นพิมพ์เพียงครั้งเดียวรหัสของคุณจะดูสวยงาม อาจมีประโยชน์เมื่อวางข้อมูลโค้ดเช่นกัน ใช้ประโยชน์จาก js-beautifier ยอดนิยมซึ่งสามารถพบได้ในแอปพลิเคชันออนไลน์ หลังสามารถพบได้ที่นี่: http://jsbeautifier.org/

— ชิเอลสิบบรินเก้
แหล่งที่มา

3

ฉันเขียนปลั๊กอินการจัดรูปแบบอัตโนมัติทั่วไปสำหรับกลุ่มซึ่งรวม js-beautifier และอื่น ๆ ตรวจสอบที่นี่: github.com/Chiel92/vim-autoformat

— Chiel ten Brinke

สวยกว่า - ดีที่สุด

— Alex Shwarc

6

ฉันใช้เพียงหนึ่งปลั๊กอิน vim เฉพาะ js - jslint.vim - https://github.com/hallettj/jslint.vimซึ่งตรวจสอบรหัสของคุณด้วยกฎ jslints และให้ข้อผิดพลาดทางไวยากรณ์ด้วย

— สกอตต์
แหล่งที่มา

ขอบคุณ แต่ฉันคิดว่าฉันมีปัญหาดูที่img69.imageshack.us/img69/7629/11142565.png

— Tarek Saied

หืมบน windows มีคำแนะนำเฉพาะที่คุณต้องทำตามมันต้องใช้ตัวแปลจาวาสคริปต์ ฉันไม่ได้ลองติดตั้งบน windows แต่คำแนะนำในการติดตั้งอยู่ในหน้าเล็กน้อยใน README ขออภัยฉันไม่สามารถให้ความช่วยเหลือได้มากกว่านี้

— Scott

3

ในการแก้ไขการเยื้องและการจัดรูปแบบอัตโนมัติ (Ctrl =): การเยื้อง JavaScript

ในการตั้งค่าความกว้างของการเยื้องให้เพิ่มjavascript.vimไฟล์ลงใน ~ / .vim / ftplugin dir พร้อมเนื้อหาต่อไปนี้ (สำหรับการเยื้องช่องว่างสองช่อง):

 setl sw=2 sts=2 et

— Evgenii
แหล่งที่มา

ใน~/.vimrc:autocmd FileType javascript setlocal sw=2 ts=2 sts=2

— JuanPablo