工做中經常使用的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文件格式化，有三種用法 一、快捷鍵ctrl+shift+f ; 二、在文件中右鍵選擇Beautify Vue ; 三、按f1,搜索 Beautify Vue而後點擊.

markdown的使用

新建md文件，ctrl+shift+v能夠邊寫邊預覽