工作中常用的vscode外掛
最近折騰著換編輯器,找到一些好東西,分享給大家。
Auto Close Tag自動補全關閉標籤
安裝即可用,你敲html標籤,它能自動幫你補全。
Auto Rename Tag自動重新命名標籤
在你更改標籤名的時候,它會幫你把對應的關閉標籤頁進行同樣的更改。
Beautify
HTML、CSS、JS、JSON SASS語法高亮,格式化程式碼的工具
ctrl+shift+p輸入beautify就有提示。
Better Comments
不同的註釋顯示不同的顏色,*,?,!起頭然後開始寫,你可以看到註釋的顏色是不同的
Bracket Pair Colorizer
對應括號顯示同樣的顏色,以防我們搞混括號配對。
Code Runner
幫助我們執行程式碼的工具,比如你要執行一個js檔案,開啟這個檔案,然後ctrl+alt+n就可以執行檔案,系統自動呼叫node幫我們執行檔案。
Document This(js 和typescript的註釋模板)
ctrl+alt+D,兩次(注意:新版的vscode已經原生支援,在function上輸入/** tab)
Easy Sass編譯輸出css
第一步:在 VS Code 中使用 Ctrl+Shift+P開啟命令面板,輸入Preferences: Open User Settings或Preferences: Open Workspace Settings。
usersittings
"easysass.compileAfterSave": true, //儲存即編譯
"easysass.formats": [ //nested:巢狀縮排的 css 程式碼。
//expanded:沒有縮排的、擴充套件的css程式碼。
//compact:簡潔格式的 css 程式碼。
//compressed:壓縮後的 css 程式碼
{
"format": "expanded",
"extension": ".css"
},
{
"format" : "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "css/" //自定義輸出路徑,如果不定義就會預設輸出跟當前sass一樣的路徑。
複製程式碼
JavaScript (ES6) code snippets
es6的程式碼自動補全
jQuery Code Snippets
jquery程式碼自動補全,比如你要寫一段ajax你需要輸入jqAjax然後敲回車。
Node.js Modules IntelliSense
提供JavaScript和TypeScript匯入宣告時的自動補全。
Path Autocomplete 路徑補全工具
Project Manager 專案管理工具
這兩種方式對於需要經常切換專案時,比較耗時 為解決這個問題,vscode提供了Project Manager外掛管理,開發時常用的專案
(1)command+ shift + p開啟配置檔案, 輸入 Project Manager: Edit Projects
[
{
"name": "nuxtest",
"rootPath": "e:\\nuxtest",
"paths": [],
"group": ""
},
{
"name": "vuetest",
"rootPath": "e:\\vuetest",
"paths": [],
"group": ""
}
]
複製程式碼
(2)在左側圖示欄下就會有個小資料夾的選項,點選進去就可以切換專案了。
Vetur
語法高亮、智慧感知、Emmet等幫助我們快速開發vue
vscode-icons 為檔案管理器增加檔案型別圖示
vue-beautify
vue檔案格式化,有三種用法 1、快捷鍵ctrl+shift+f ; 2、在檔案中右鍵選擇Beautify Vue ; 3、按f1,搜尋 Beautify Vue然後點選.
markdown的使用
新建md檔案,ctrl+shift+v可以邊寫邊預覽