什麼編輯器適合寫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的吧
所有支持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 :&&
&樣式文件同理分離出來,在.vue或者.js裡面都能 import這樣不同文件的代碼提示插件就看個人的喜好花式安裝了這樣一來一個組件一個文件夾,看起來還是蠻清晰的(vue1.x就上車了,那時候編輯器還不知道.vue是什麼鬼)atom
配上activate-power-mode插件
寫vue不能更爽缺點:atom內置控制台不支持下面的app.m message這種訪問
@尤雨溪 不知道是什麼原因?
忽略這點 atom寫vue還是相當不錯的主 webstorm,輔 vs code。
vim。
主要是不用*.vue單文件格式,分別寫tpl/css/js,對各種編輯器/IDE天然友好(各種語法高亮/代碼補全/智能提示都不受影響);然後通過目錄規範使其在邏輯上成為一個整體(單獨文件夾+同名);再通過構建策略使其在運行時能夠整體載入(載入js自動載入同名css,tpl內聯到js裡面)
要說缺點就是不能直接享用一些官方提供的基於單文件格式的解決方案,比如scoped css,不過由於單文件寫法和分離式寫法本質上含有等價的關聯關係,這些solution理論上都是可以在分離式寫法中實現的。本人採用另一種簡單粗暴的設計:用一個placeholder做css前綴,在構建階段替換成一個唯一id,組件路徑/路徑md5/隨機串/自增id都可以,比如SCOPE_element =&> ff9500_element,獲得近似的開發體驗以及scoped css的效果作為Atom的粉絲,我推薦
Atom IDE(atom-ide-ui)+ language-vue + ide-vue + linter-eslint
language-vue 可以高亮vue就不多說了。
這裡推薦用Atom IDE,其實我為了用它的OutLine視圖,可以方便索引 function ,配合 ide-vue 完美(.vue文件代碼若比較多,解析時間會長一點)。不過總比Ctrl+F 或直接上下滾動找方便。
另外注意:如果Atom IDE 和 linter-eslint 同時使用,會提示衝突,建議把Atom的 Code Formatting 關閉,保留linter-eslint,因為Atom IDE的校驗只能在.js文件中生效,無視.vue文件。若想讓linter-eslint對.vue文件內js代碼生效,需在其 setting 勾上Lint HTML Files
希望對使用Atom寫Vue.js的Coder有幫助!
我想知道websotrm寫vue文件中的style...用sass寫,添加lang=sass不支持,求大神教我怎麼設置後支持sass的格式?
vscode / atom
那必須是webstorm呀,裝上vue的插件,代碼擼的飛起
因為需要同時開發後台服務,使用 Intellij IDEA,安裝 vue-for-idea 插件,體驗還是挺不錯的。
1.8的vscode
---
下個版本的vscode,如果不跳票[html] CSS and JS autocomplete not working inside style and script tags respectively in html file · Issue #8928 · Microsoft/vscode · GitHub推薦閱讀:
※visual studio code 可以配置c++ 一鍵編譯運行嗎?
※為什麼visual studio code 沒有uwp版本?
※Visual Studio Code會開源嗎?
※如何評價 Visual Studio Code?
※Visual Studio Code有哪些你常用的插件?
TAG:SublimeText | Atom文本編輯器 | VisualStudioCode | Vuejs |