VsCode從零開始配置一個屬於自己的Vue開發環境


vscode vue

VsCode算是比較熱門的一個代碼編輯器了,全名Visual Studio Code
下載地址:點我去下載
插件眾多,功能齊全,我在平常開發過程中都是用的它,整理了些自認好用的插件,

自己也記錄下,萬一以后換電腦了捏😂

參考文檔:https://liubing.me/vscode-vue-setting.html

Vetur

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=octref.vetur
開發Vue必裝的一個插件

未安裝之前vue文件顯示這樣的

VsCode從零開始配置一個屬於自己的Vue開發環境

安裝完成后顯示這樣的,看着是不是賊拉舒服

VsCode從零開始配置一個屬於自己的Vue開發環境

Vue 2 Snippets

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
主要加強vue的便捷寫法

VsCode從零開始配置一個屬於自己的Vue開發環境

VsCode從零開始配置一個屬於自己的Vue開發環境

 

Auto Close Tag

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
自動閉合標簽所用

VsCode從零開始配置一個屬於自己的Vue開發環境

配合快捷鍵Alt+. (Command+Alt+. for Mac)特別好使。

VsCode從零開始配置一個屬於自己的Vue開發環境

Auto Rename Tag

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
自動修改重命名配對的標簽

VsCode從零開始配置一個屬於自己的Vue開發環境

Bookmarks

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
可以對成片的代碼做一些書簽標記,方便后續查看。

VsCode從零開始配置一個屬於自己的Vue開發環境

Bracket Pair Colorizer

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
對括號進行着色,方便區分,下面的圖分別是安裝前后的比較

VsCode從零開始配置一個屬於自己的Vue開發環境

VsCode從零開始配置一個屬於自己的Vue開發環境

 

Vue Peek

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
用於Vue快速查看組件定義以及組件跳轉,具體使用見插件文檔地址中的使用方法。

VsCode從零開始配置一個屬於自己的Vue開發環境

JavaScript (ES6) code snippets

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
用於快速生成ES6代碼片段

VsCode從零開始配置一個屬於自己的Vue開發環境

Material Icon Theme

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Material風格的icon文件圖標,可以看下安裝前后的區別。

VsCode從零開始配置一個屬於自己的Vue開發環境

VsCode從零開始配置一個屬於自己的Vue開發環境

ESLint

插件文檔地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
這個不用多說了,規范代碼格式的。

 

注:新手上路,后面發現其他問題或者有用的插件會補充進去,大家有更好用插件的多多留言奧💗。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM