vscode運行vue項目(vscode插件安裝)

1.vetur(vue文件基本語法的高亮插件)

 


2.eslin(智能錯誤檢測插件)

 


3.Auto Close Tag(自動閉合HTML/XML標籤)

 


4.Auto Rename Tag(自動完成另一側標籤的同步修改)

 

5.Debugger for Chrome(映射vscode上的斷點到chrome上,方便調試)
 

 

6.open in browser(右鍵項目單擊啓動,運行單個HTML頁面)

 

7.JavaScript(ES6) code snippets(ES6語法智能提示以及快速輸入,除js外還支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各種包含js代碼文件的時間)

 

8.Path Intellisense(自動路徑補全)

 

9.Bracket Pair Colorizer(將匹配的括號染成相同的顏色。新版本的vscode將該功能內置,之後無需再單獨安裝這個插件)

 

10.Better Comments(可以幫助你編寫便於閱讀的註釋)

    使用Better Comments擴展,你可以將註釋分爲警告、詢問、待辦、重點等幾大類。

    在雙斜線後面使用下述字符做標記:

  •     * 表示重點
  •     ! 表示錯誤和警告
  •     ? 表示詢問和問題
  •     // 表示刪除
  •     TODO 表示待辦事項

 

11.Markdown All in One(可以處理所有的markdown需求,例如自動預覽、快捷鍵、自動完成等。例如,要在Markdown中加粗字體,只需要選中文字按快捷鍵Ctrl+B即可,這樣可以提高生產力。)

 

13.VisualCode Integrated Terminal(將命令/終端放在VSCode編輯器中不僅會使工作更爲輕鬆,還能節省空間。)

 

14.Settings Sync(使用多臺機器時,該擴展將大有幫助。Settings sync讓所有電腦/筆記本電腦依照visual studio的設置方式實現同步。)

 

15.LiveServer(在使用Live Server時,該VSCode擴展將有助於打開當前項目的Live web服務器。一般這項工作用像Webpack這樣的構建器完成即可,但是該擴展顯然更爲有效。只需右擊並打開運行live server,便會自動完成剩餘的工作。)

 

16.Beautify(Beautify是另一用於代碼格式化的良好擴展,與前文提到的Prettier幾乎一樣,但是效果更漂亮。到目前爲止,它已有將近1200萬的下載量了,還用筆者再多說什麼嗎。它可以格式化用Javascript、JSON、Sass、CSS和HTML編寫的代碼。)

 

17.Emmet(它可以幫助開發人員提高編寫代碼的速度。)

     emmet已在vscode中內置,輸入一段可展開的代碼,vscode會自動跳出一個後面帶有“Emmet Abbreviation”的提示欄,點擊提示欄/回車/Tab都可以展開縮寫代碼。內置emmet比較長的縮寫vscode並不能自動識別出來

     vscode沒有自動跳出可展開的內容,按下Tab鍵,如果代碼正確,也可以自動展開。

    

 

17.VSCode Icons(這是爲前端開發人員打造的VSCode擴展。與前文提到的material圖標很相似,但是設計不同。前端開發人員通常都喜歡可視化,對吧。這個圖標有助於查看文件類型,不管它們是HTML,CSS, Javascript還是其他類型。)

 

18.Color picker(顏色選擇器擴展有助於輕鬆選擇CSS文件中的顏色。它將立即反映或應用到當前正在處理的屬性。若喜歡使用RGBA顏色,也可以使用。)

 

19.Live Share   

 Live Share是VSCode文本編輯器中最先進的特性之一。當與團隊成員一起工作時,它無可挑剔。LiveShare的功能之一是允許每個開發人員實時地與其他開發人員共享代碼片段。

 這一點堪稱完美,且有助於實現更加高效和多產團隊協作。LiveShare允許即時共享當前的項目,即使在調試時也是如此。

 協作者不需要安裝任何存儲庫、sdk或任何東西來連接其他開發人員的當前代碼。團隊中的每個人都可以通過協作來遠程探索和修復問題。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章