1. 程式人生 > >工作中常用的vscode外掛

工作中常用的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可以邊寫邊預覽