一直以來(lái)，大家對(duì)開(kāi)發(fā)的代碼編輯器都沒(méi)有一個(gè)最好的選擇蒸绩，而vscode是我發(fā)現(xiàn)速度相對(duì)快蹲蒲，對(duì)于新版的html css js元素及屬性過(guò)濾、提示最準(zhǔn)確的代碼編輯器侵贵，因?yàn)椴寮嘟旄椋械娜瞬恢肋x擇哪些插件最好，本文檔教你安裝哪些，那些可選,安裝如下：
01卡睦、open in browser:在瀏覽器運(yùn)行預(yù)覽（alt+b）宴胧，安裝后自動(dòng)運(yùn)行√√√
02、OneDark：來(lái)自Atom的主題表锻，顏色更為柔和舒服恕齐，不傷眼睛的主題，ctrl+k加ctrl+t安裝后選擇主題√√√
03瞬逊、auto rename tag:修改HTML標(biāo)簽時(shí)显歧，自動(dòng)修改匹配的標(biāo)簽，安裝后自動(dòng)運(yùn)行√√√
04确镊、beautify: 可以格式化JSON|JS|HTML|CSS|SCSS,比內(nèi)置格式化好用士骤，安裝后自動(dòng)運(yùn)行√√√
05、path autocomplete:路徑智能補(bǔ)全（系統(tǒng)有自帶的路徑不全這個(gè)可以不要）蕾域，比path intellisense強(qiáng)拷肌，可以連續(xù)提示，不用按“/”旨巷，安裝后自動(dòng)運(yùn)行√√√
06巨缘、filesize:在底部狀態(tài)欄顯示當(dāng)前文件大小，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建采呐、修改時(shí)間若锁，安裝后自動(dòng)運(yùn)行√√√
07、html css support:讓 html 標(biāo)簽上寫(xiě)class智能提示當(dāng)前項(xiàng)目所支持的樣式（支持vue,內(nèi)置不支持）(容易干擾引入路徑)斧吐，安裝后自動(dòng)運(yùn)行√√√
08又固、html snippets(0.1.5版本):超級(jí)實(shí)用且初級(jí)的 H5代碼片段以及提示，安裝后自動(dòng)運(yùn)行√√√
09会通、IntelliSense for css class names：css class輸入提示口予，安裝后自動(dòng)運(yùn)行√√√
10娄周、css peek:在當(dāng)前頁(yè)面自動(dòng)查找CSS文件并顯示內(nèi)容涕侈，安裝后自動(dòng)運(yùn)行√√√
11、Document this：Js的注釋模板煤辨，重復(fù)按兩次ctrl+alt+d裳涛，即可添加函數(shù)的注釋√√√
12、eslint:檢測(cè)js必備众辨，安裝后自動(dòng)運(yùn)行端三，測(cè)試安裝后自動(dòng)運(yùn)行√√√
13、Can I Use：HTML5鹃彻、CSS3郊闯、SVG的瀏覽器兼容性檢查安裝后自動(dòng)運(yùn)行√√√
14、GBKTOUTF-8:將文件GBK轉(zhuǎn)換為utf-8編碼安裝后自動(dòng)運(yùn)行√√√
15、code spell check：代碼單詞檢測(cè)安裝后自動(dòng)運(yùn)行√√√
15团赁、Debugger for Chrome：方便調(diào)試育拨，選安○○○
16、vetur:語(yǔ)法高亮欢摄、智能感知熬丧、Emmet等，選安○○○
17怀挠、Vue 2 Snippets：vue必備析蝴，選安○○○
18、VueHelper：Vue2代碼段（包括Vue2 api绿淋、vue-router2闷畸、vuex2），選安○○○
19躬它、git history:可以查看Git log, file, 和line 歷史記錄腾啥，選安○○○
20、code runner: 代碼編譯運(yùn)行看結(jié)果冯吓，支持眾多后端語(yǔ)言倘待，選安○○○
21、path intellisense:自動(dòng)路徑提示组贺，默認(rèn)不帶這個(gè)功能的凸舵，path intellisense更智能，所以無(wú)需要安裝
22失尖、Guides：代碼對(duì)齊輔助線啊奄，新版vscode已內(nèi)置該功能，無(wú)需安裝掀潮。
23菇夸、auto close tag:自動(dòng)閉合HTML標(biāo)簽，新版vscode已內(nèi)置該功能仪吧，無(wú)需安裝庄新。
24、file peek:鼠標(biāo)移到路徑名按住ctrl可打開(kāi)文件薯鼠，系統(tǒng)已內(nèi)置择诈，，無(wú)需安裝出皇。
25羞芍、background：修改vscode的背景，多余不使用郊艘，使用系統(tǒng)默認(rèn)即可荷科。
26唯咬、vscode-icons:讓vscode資源樹(shù)目錄加上圖標(biāo)，在首選項(xiàng)文件圖標(biāo)主題中選擇畏浆，多余不使用副渴，使用系統(tǒng)默認(rèn)即可
27、eclipse keymap:eclipse快捷鍵全度，安裝后自動(dòng)運(yùn)行煮剧，修改vscode的快捷鍵即可。
28将鸵、Trailing Spaces 檢查多余空格
29勉盅、Turbo Console.log()
沒(méi)有人喜歡輸入非常長(zhǎng)的語(yǔ)句，比如 console.log()顶掉。這真的很煩人草娜，尤其是當(dāng)你只想快速輸出一些東西，查看它的值痒筒，然后繼續(xù)編碼的時(shí)候宰闰。如果我告訴你，你可以像 Lucky Luke一樣快速地控制臺(tái)記錄任何東西呢?
這是通過(guò)名為 Turbo Console Log 的擴(kuò)展來(lái)完成的簿透。它支持對(duì)下面一行中的任何變量進(jìn)行日志記錄移袍，并在代碼結(jié)構(gòu)之后自動(dòng)添加前綴。你還可以 取消注釋/注釋 alt+shift+u / alt+shift+c 為所有由這個(gè)擴(kuò)展添加的 console.log()老充。
快捷鍵：
1葡盗、格式化代碼：ctrl+alt+f
2、建議觸發(fā)：alt+/
以下為vscode的用戶配置：
{
// 是否自動(dòng)保存
"files.autoSave": "off",
// git.path的可執(zhí)行文件路徑
"git.path": "C:/Program Files/Git/bin/git.exe",
"editor.renderControlCharacters": true,
//設(shè)置主題為OneDark++
"workbench.colorTheme": "Solarized Light",
// 顯示空格
"editor.renderWhitespace": "all",
//自動(dòng)補(bǔ)齊文件路徑時(shí)啡浊，帶入擴(kuò)展名
"path-autocomplete.extensionOnImport": true,
//使autocompletion以外的路徑字符串觅够。
// 控制鍵入時(shí)是否應(yīng)自動(dòng)顯示建議
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
// 啟用后，將在保存文件時(shí)剪裁尾隨空格巷嚣。
"files.trimTrailingWhitespace": true,
// 啟用后喘先，將使用的參數(shù)和方法名稱的類型進(jìn)行提示。
"docthis.inferTypesFromNames": true,
// 當(dāng) editor.cursorStyle 設(shè)置為 "line" 時(shí)控制光標(biāo)的寬度廷粒。
"editor.cursorWidth": 0,
// 總是顯示ESLint狀態(tài)欄
"eslint.alwaysShowStatus": true,
// 打開(kāi)自動(dòng)修復(fù)保存或關(guān)閉
"eslint.autoFixOnSave": true,
// 每次保存文件（ctrl+s）時(shí)窘拯，eslint插件會(huì)自動(dòng)對(duì)當(dāng)前文件進(jìn)行eslint語(yǔ)法修正！
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.options": {
"plugins": [
"html"
]
},
//為了符合eslint的兩個(gè)空格間隔原則
"editor.tabSize": 4,
// 控制編輯器是否應(yīng)在鍵入后自動(dòng)設(shè)置行的格式
"editor.formatOnType": true,
// 啟用/禁用 HTML 標(biāo)記的自動(dòng)關(guān)閉评雌。
"html.autoClosingTags": true,
// 啟用后树枫，按下 TAB 鍵直焙，將展開(kāi) Emmet 縮寫(xiě)景东。
"emmet.triggerExpansionOnTab": true,
// 以像素為單位控制字號(hào)。
"editor.fontSize": 13,
}
