通用插件
HTML Snippets
超級(jí)實(shí)用且初級(jí)的 H5代碼片段以及提示
HTMLHint
檢查你的 HTML代碼，包括了錯(cuò)誤提示
HTML CSS Support
讓 html 標(biāo)簽上寫class 智能提示當(dāng)前項(xiàng)目所支持的樣式
新版已經(jīng)支持scss文件檢索
Debugger for Chrome
讓 vscode 映射 chrome 的 debug功能，靜態(tài)頁(yè)面都可以用 vscode 來(lái)打斷點(diǎn)調(diào)試
jQuery Code Snippets
jquery 重度患者必須品鸠姨，廢話不多說(shuō)摄咆，上圖
vscode-icon
讓 vscode 資源樹目錄加上圖標(biāo)姻檀，必備良品！
Path Intellisense
自動(dòng)路勁補(bǔ)全蔬崩，默認(rèn)不帶這個(gè)功能的，趕緊裝
ESlint
ESlint 接管原生 js 提示搀暑，可以自定制提示規(guī)則沥阳。這個(gè)比較高玩，不會(huì)的就算了自点，
詳情配置請(qǐng)看我的另一篇文章 https://segmentfault.com/a/11...
Project Manager
在多個(gè)項(xiàng)目之前快速切換的工具
Beautify
美化在Visual Studio 中 javascript桐罕，JSON，CSS桂敛，Sass功炮，和HTML的代碼。
Bootstrap 3 Snippets
一組用于Visual Studio代碼的Bootstrap 3 Snippets术唬。
創(chuàng)建一個(gè)新的HTML文檔并鍵入“bs3”以查看所有可用的代碼段
相當(dāng)好使
看到提示選擇
結(jié)果：
Atuo Rename Tag
修改 html 標(biāo)簽薪伏，自動(dòng)幫你完成尾部閉合標(biāo)簽的同步修改，不過有些bug碴开。
賊得勁兒毅该！
GitLens
豐富的git日志插件
fileheader
頂部注釋模板，可定義作者潦牛、時(shí)間等信息眶掌，并會(huì)自動(dòng)更新最后修改時(shí)間
快捷鍵
ctrl+alt+i 您可以在頭部插入注釋。
配置默認(rèn)作者
filesize
在底部狀態(tài)欄顯示當(dāng)前文件大小巴碗，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建朴爬、修改時(shí)間
Bracket Pair Colorizer
讓括號(hào)擁有獨(dú)立的顏色，易于區(qū)分橡淆≌儇可以配合任意主題使用母赵。
Vue插件
以下推薦vue框架所需的插件
vetur
語(yǔ)法高亮、智能感知具滴、Emmet等
VueHelper
特征：
（1）可能是Vscode中最好的vue代碼片段插件凹嘲，不僅包括vue2 all api，還包含vue-router 2和vuex 2代碼
（2）每個(gè)片段都有詳細(xì)的說(shuō)明构韵，主要是為了方便學(xué)習(xí)周蹭，因?yàn)樵趯W(xué)習(xí)忘記使用api的時(shí)候，經(jīng)常查閱文檔會(huì)浪費(fèi)時(shí)間疲恢，所以我會(huì)增加每個(gè)代碼片段的描述凶朗，說(shuō)明基礎(chǔ)來(lái)自官方文件
Import Cost
引入包大小計(jì)算,對(duì)于項(xiàng)目打包后體積掌握很有幫助
主題
Dracula
目前我覺得是vscode上最漂亮的主題,vscode 1.11+允許自定義statusBar等全局ui后,該主題也跟進(jìn)改了很多小細(xì)節(jié),良心!~
One Dark Pro
源于Atom,老版本的Atom One Dark主題可以扔了.
Npm Intellisense
require 時(shí)的包提示（最新版的vscode已經(jīng)集成此功能）
Document this
js 的注釋模板 （注意：新版的vscode已經(jīng)原生支持,在function上輸入/** tab）
Vim
就是讓你用 vim 去編輯文檔
自定義代碼片段
https://yq.aliyun.com/articles/654701
HTML + VUE代碼片段示例
接下來(lái)對(duì) html.json 文件做如下操作
清空原來(lái)的內(nèi)容，并將下面的內(nèi)容粘貼到文件中
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log(\"$1\");",
// "$2"
// ],
// "description": "Log output to console"
// }
"Print to console": {
"scope": "javascript,typescript",
"prefix": "myhtvue",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
" <script src=\"../vue.js\"></script>",
"</head>",
"<body>",
" <div id=\"app\">",
" <${2:div}></div>",
" </div>",
"</body>",
"<script>",
" var vm = new Vue({",
" el: \"#app\",",
" data: {",
" ${1:msg}",
" },",
" })",
"</script>",
"</html>"
],
"description": "add vue.js dome"
}
}
