工作中常用的vscode外掛

魏三公子發表於2018-11-14
原文網址 : https://juejin.im/post/5beb8cc0e51d4569e52d79fa
VSCode

最近折騰著換編輯器，找到一些好東西，分享給大家。

Auto Close Tag自動補全關閉標籤

安裝即可用，你敲html標籤，它能自動幫你補全。

image

Auto Rename Tag自動重新命名標籤

在你更改標籤名的時候，它會幫你把對應的關閉標籤頁進行同樣的更改。

image

Beautify

HTML、CSS、JS、JSON SASS語法高亮,格式化程式碼的工具

ctrl+shift+p輸入beautify就有提示。

Better Comments

不同的註釋顯示不同的顏色，*，？，！起頭然後開始寫，你可以看到註釋的顏色是不同的

image

Bracket Pair Colorizer

對應括號顯示同樣的顏色，以防我們搞混括號配對。

image

Code Runner

幫助我們執行程式碼的工具，比如你要執行一個js檔案，開啟這個檔案，然後ctrl+alt+n就可以執行檔案，系統自動呼叫node幫我們執行檔案。

Document This(js 和typescript的註釋模板)

ctrl+alt+D，兩次（注意：新版的vscode已經原生支援,在function上輸入/** tab）

image

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

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

vue-beautify

vue檔案格式化，有三種用法 1、快捷鍵ctrl+shift+f ; 2、在檔案中右鍵選擇Beautify Vue ; 3、按f1,搜尋 Beautify Vue然後點選.

image

markdown的使用

新建md檔案，ctrl+shift+v可以邊寫邊預覽

相關文章