最近折騰著換編輯器,找到一些好東西,分享給大家。
Auto Close Tag自動補全關閉標籤
安裝即可用,你敲html標籤,它能自動幫你補全。
![image](https://i.iter01.com/images/ff5bbfcc3ae7e696d44e06e6d45cdc8dd0a158da8c7b69440c3656542352daad.gif)
Auto Rename Tag自動重新命名標籤
在你更改標籤名的時候,它會幫你把對應的關閉標籤頁進行同樣的更改。
![image](https://i.iter01.com/images/a8fe829e3ab0814245a98c346a70ebeefa15cfedf6f8775c983f2b3d9cd0c213.gif)
Beautify
HTML、CSS、JS、JSON SASS語法高亮,格式化程式碼的工具
ctrl+shift+p輸入beautify就有提示。
Better Comments
不同的註釋顯示不同的顏色,*,?,!起頭然後開始寫,你可以看到註釋的顏色是不同的
![image](https://i.iter01.com/images/ed89f37d79f39bf9cc9a7e8df45b755cfa410bbdc29332d9f63dc69b9f2aaf77.png)
Bracket Pair Colorizer
對應括號顯示同樣的顏色,以防我們搞混括號配對。
![image](https://i.iter01.com/images/badcb4cf14aa7969869ed505b150073828edcca6e67116289109ab33552a42ce.png)
Code Runner
幫助我們執行程式碼的工具,比如你要執行一個js檔案,開啟這個檔案,然後ctrl+alt+n就可以執行檔案,系統自動呼叫node幫我們執行檔案。
Document This(js 和typescript的註釋模板)
ctrl+alt+D,兩次(注意:新版的vscode已經原生支援,在function上輸入/** tab)
![image](https://i.iter01.com/images/cc8d964ba0b454dd3f223f4253ce08eba1341c3879f119d31180a4f8969ea443.gif)
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 路徑補全工具
![image](https://i.iter01.com/images/3e1a551dbd7549c7c7c7ade076bd244dbab4391501bc2b8774b817a39003f8dd.gif)
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 為檔案管理器增加檔案型別圖示
![image](https://i.iter01.com/images/c9f8896e6afb2ebeae8722c0f420006f3e3df804c5846b58aff466bac737aa7f.gif)
vue-beautify
vue檔案格式化,有三種用法 1、快捷鍵ctrl+shift+f ; 2、在檔案中右鍵選擇Beautify Vue ; 3、按f1,搜尋 Beautify Vue然後點選.
![image](https://i.iter01.com/images/842a0930be0cf0a5805de9d2c1bed8be2b9be6324c99019f92dfda0d7ccb9c02.gif)
markdown的使用
新建md檔案,ctrl+shift+v可以邊寫邊預覽