vscode好用的插件

一直以來，你們對開發的代碼編輯器都沒有一個最好的選擇，而vscode是我發現速度相對快，對於新版的html css js元素及屬性過濾、提示最準確的代碼編輯器，由於插件太多，有的人不知道選擇哪些插件最好，本文檔教你安裝哪些，那些可選,安裝以下：

vscode推薦插件的安裝

0一、open in browser:在瀏覽器運行預覽（alt+b），安裝後自動運行√√√
0二、OneDark：來自Atom的主題，顏色更爲柔和舒服，不傷眼睛的主題，ctrl+k加ctrl+t安裝後選擇主題√√√
0三、auto rename tag:修改HTML標籤時，自動修改匹配的標籤，安裝後自動運行√√√
0四、beautify: 能夠格式化JSON|JS|HTML|CSS|SCSS,比內置格式化好用，安裝後自動運行√√√
0五、path autocomplete:路徑智能補全，比path intellisense強，能夠連續提示，不用按「/」，安裝後自動運行√√√
0六、filesize:在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間，安裝後自動運行√√√
0七、html css support:讓 html 標籤上寫class智能提示當前項目所支持的樣式（支持vue,內置不支持），安裝後自動運行√√√
0八、html snippets(0.1.5版本):超級實用且初級的 H5代碼片斷以及提示，安裝後自動運行√√√
0九、IntelliSense for css class names：css class輸入提示，安裝後自動運行√√√
十、css peek:在當前頁面自動查找CSS文件並顯示內容，安裝後自動運行√√√
十一、Document this：Js的註釋模板，重複按兩次ctrl+alt+d，便可添加函數的註釋√√√
十二、eslint:檢測js必備，安裝後自動運行，測試安裝後自動運行√√√
1三、Can I Use：HTML五、CSS三、SVG的瀏覽器兼容性檢查安裝後自動運行√√√
1四、GBKTOUTF-8:將文件GBK轉換爲utf-8編碼安裝後自動運行√√√
1五、code spell check：代碼單詞檢測安裝後自動運行√√√

1五、Debugger for Chrome：方便調試，選安○○○
1六、vetur:語法高亮、智能感知、Emmet等，選安○○○
1七、Vue 2 Snippets：vue必備，選安○○○
1八、VueHelper：Vue2代碼段（包括Vue2 api、vue-router二、vuex2），選安○○○
1九、git history:能夠查看Git log, file, 和line 歷史記錄，選安○○○
20、code runner: 代碼編譯運行看結果，支持衆多後端語言，選安○○○

2一、path intellisense:自動路徑提示，默認不帶這個功能的，path intellisense更智能，因此無須要安裝
2二、Guides：代碼對齊輔助線，新版vscode已內置該功能，無需安裝。
2三、auto close tag:自動閉合HTML標籤，新版vscode已內置該功能，無需安裝。
2四、file peek:鼠標移到路徑名按住ctrl可打開文件，系統已內置，，無需安裝。
2五、background：修改vscode的背景，多餘不使用，使用系統默認便可。
2六、vscode-icons:讓vscode資源樹目錄加上圖標，在首選項文件圖標主題中選擇，多餘不使用，使用系統默認便可
2七、eclipse keymap:eclipse快捷鍵，安裝後自動運行，修改vscode的快捷鍵便可。

快捷鍵：
一、格式化代碼：ctrl+alt+f
二、建議觸發：alt+/

如下爲vscode的用戶配置：

{

// 是否自動保存
"files.autoSave": "off",
// git.path的可執行文件路徑
"git.path": "C:/Program Files/Git/bin/git.exe",
"editor.renderControlCharacters": true,
//設置主題爲OneDark++
"workbench.colorTheme": "Solarized Light",
// 顯示空格
"editor.renderWhitespace": "all",
//自動補齊文件路徑時，帶入擴展名
"path-autocomplete.extensionOnImport": true,
//使autocompletion之外的路徑字符串。
// 控制鍵入時是否應自動顯示建議
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
},
// 啓用後，將在保存文件時剪裁尾隨空格。
"files.trimTrailingWhitespace": true,
// 啓用後，將使用的參數和方法名稱的類型進行提示。
"docthis.inferTypesFromNames": true,
// 當 editor.cursorStyle 設置爲 "line" 時控制光標的寬度。
"editor.cursorWidth": 0,
// 老是顯示ESLint狀態欄
"eslint.alwaysShowStatus": true,
// 打開自動修復保存或關閉
"eslint.autoFixOnSave": true,
// 每次保存文件（ctrl+s）時，eslint插件會自動對當前文件進行eslint語法修正！
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.options": {
    "plugins": [
        "html"
    ]
},
//爲了符合eslint的兩個空格間隔原則
"editor.tabSize": 4,
// 控制編輯器是否應在鍵入後自動設置行的格式
"editor.formatOnType": true,
// 啓用/禁用 HTML 標記的自動關閉。
"html.autoClosingTags": true,
// 啓用後，按下 TAB 鍵，將展開 Emmet 縮寫。
"emmet.triggerExpansionOnTab": true,
// 以像素爲單位控制字號。
"editor.fontSize": 13,

}