什麼編輯器適合寫Vue?

最近開發Vue,也用過很多文本編輯器,總覺得找不到一款好的編輯器來開發Vue,所以想問問那些編輯器的生態圈對Vue友好一點。


VSCode with Vetur.


--------------------------------------------------------------------------------------------------------------

0.0.3版本後,生成代碼片段的描述改為英文

————————————————————————

說說自己寫的vscode插件:VueHelper。OYsun/vscode-VueHelper

(1)可能是目前vscode最好的vue代碼提示插件,不僅包括了vue2所有api,還含有vue-router2和vuex2的代碼提示

(2)每個提示都有詳細的中文描述,主要是方便學習,因為在學習的時候忘記某個api的用法,經常要查閱文檔,比較浪費時間,所以我將每個代碼提示都增加了描述,描述的依據都來源於官方中文文檔

(3)vue文件代碼高亮fork自[vuter](octref/vetur)

知乎沒辦法上傳gif動圖,想了解更多就去我的github項目那裡看吧。

- 這個插件的代碼提示會與官方文檔同步(根據文檔新增或者刪除某個api的時候更新),如果有某個api沒有提示可以提issues,另外有什麼建議也歡迎提issues

- 這個插件主要是方便自己學習vue,所以很多提示是根據自己的代碼風格,比如vue組件模板和vue-router,vuex主文件模板。僅供參考

- 如果發現生成的提示代碼有錯誤,請提issues,或者pr

- 如果你想要自己的編寫風格,請fork一份自行修改使用,可以在issues提建議一起討論,我這提供就算是基礎模板吧

- 如果該插件對你有幫助,不妨給個star


—————— 2月5日更新———————

WebStorm 171.2822.13版本 已經原生支持vue格式都文件了...

我使用了一下,感覺還不錯...

雖然還不是很完善

——————原答案—————————

看到題主想要 高亮 代碼補全

高亮的話 VSCode Sublime WebStorm Atom 都有... 其中根據配色機制的不同 Atom 和 Sublime的高亮更豐富

代碼補全的話 有兩種,一種是 API的提示 這個 Sublime Atom 都有snippets可以做到

如果想要指令的代碼補全 那就只有 WebStorm 提供了

至於為什麼 WebStorm 自己導入 lib 不能有API的提示的原因是 它只能根據解析的對象來處理

我相信,WebStorm後面一定會內置支持Vue的.... 雖然我一直都是用Sublime的,無粘滯感的Coding才是王道啊


必須是webstorm啊

template裡面標籤 代碼都有智能提示.

script加上es6的tag,寫起來和js文件並無區別


都沒人提atom,那我來個atom的吧

用的插件是這個

btw:其實說實話vue的ide有那麼重要嗎,我原來沒安裝插件的情況下,用個html format也感覺沒啥問題啊!


所有支持Language Server Protocol的編輯器都適合Vue

理由是 vuejs/vetur 已經抽離出 Vue Language Server, npm install vue-language-server -g ,提供了全局的命令 vls, 供編輯器使用


對不起vue作者。

沒有用.vue格式,強制把這些分開了,沒類型檢查,自動補全啥的不能活。。

css部分還沒涉及到。


編輯器的話就算了,我用ide webstorm

這是截圖 鏈接http://www.zhihu.com/question/20936155/answer/111454501


新版本webstorm已支持VUE指令。經過多個EAP版本,目前已升級到 2017.1 RC

RC:Whatamp;#x27;s new in WebStorm 2017.1

原EAP:WebStorm EAP - WebStorm - Confluence

官方介紹:

Vue.js support

Vue.js support comes to WebStorm!
Enjoy coding assistance for Vue template language and the language of your choice in thescript and style blocks of a .vue file. The IDE automatically completes Vue components andadds required imports for them. And we』re just getting started!


想打開就能寫 vscode 配上插件

想功能多點 webstorm


正在學習vue,用的是vscode,感覺這編輯器用起來有快感…


用 Sublime Text Atom 都是很不錯的選擇。

都有對應 .vue,Sass,Jade,自動補全 等的插件;前一段時間,Sublime 還注入了函數跳轉的功能,用起來就更為趁手了。

只不過,使用 Vue,也同時使用 ESLint 的話,到沒有很好的針對 ESlint 配置的格式化插件,要手動寫好代碼,這一點略顯得糾結。


如何評價一個編輯器適合不適合某個語言的開發:語法高亮和提示、代碼 lint 等工具的集成

我們內部用的比較多:

sublime 和 webstorm

具體工具我們在我們出版的《Vue.js 權威指南》也提到了


vscod. ....

想要代碼提示?那就分離.vue文件…

like this :

&&

&