先說說，最近忽然對WEB前端開發有了點興趣，然後跟着B站的教程練習敲代碼。
原來想偷懶用記事本敲，但是始終感覺有點不方便，所以後來用了notepad++（之前爲了看JS代碼裝的）。
然而，在學習中發現很多人用的是VSCODE，就有點納悶。
回想自己20年前也就用front page ，dream waver 之類的工具寫網頁。
因爲自己之前也裝了VSCODE，用了一下感覺沒啥特別的，還不如VS好用，也就沒再關注。
直到發現了一篇文章，原來VSCODE是可以加插件的。
於是按照文章折騰了一下，的確好用。
所以做個記錄（以下是轉載內容）：
一、常用插件安裝
a. 進入擴展視圖界面安裝/卸載
a1.快捷鍵：Ctrl+shift+x；
a2.查看——>擴展；
a3.點左側邊框的擴展圖標按鈕進入。（最下面的正方形圖標）
在頂部搜索框輸入你需要的擴展插件，找到之後在擴展插件後面的選項中點擊【安裝】即可，需要卸載擴展只需要點【卸載】即可。
擴展下載安裝完畢之後需要點擊【啓用】才生效，有些擴展需要重啓編輯器才生效。
b. 如何選擇擴展（插件）呢？
其實也不難，擴展的名稱一般都暴露了它的功能，基本如下：
1.帶snippets 一般是代碼提示類擴展；
2.帶viewer 一般是代碼運行預覽類擴展；
3.帶support 一般是代碼語言支持；
4.帶document 一般是參考文檔類擴展；
5.帶Formatt 一般是代碼格式化整理擴展；
當然有的snippets 也自帶support功能，並不是以上面的關鍵詞作爲唯一標準。
二、需要安裝的插件
2.1 HTML Snippets
爲HTML文檔提供代碼提示功能，包含HTML5。
2.2 HTML CSS support
css自動補齊
2.3 VS color Picker
爲css文檔和HTML文檔提供顏色選擇，當輸入“#”後會出現顏色選擇器浮窗，點擊相應顏色之後會插入文檔中，默認用16進製表示。若想用其他格式的顏色，
如RGB等則推薦擴展：Color Picker (Color Picker缺點是需要配置，安裝nodejs，並且添加node到全局環境變量中。而且在插入時需要使用命令調出提色板，有點麻煩）
2.4 live HTML Previewer
爲html文檔提供預覽功能，需要用命令或者快捷鍵調出，會在編輯器中新增一列，用於運行html文件。
a. 按F1在命令框中輸入：Show side preview 新增一列顯示html，能邊寫邊看到效果，實時預覽。
b. 可以在html文檔中右鍵選擇：Open in browser 在系統默認瀏覽器中打開，該模式下不能提供實時預覽,保存時不自動刷新瀏覽器。
2.5 View In Browser
- 預覽頁面（ctrl+F1）
2.6 vscode-icons
側欄的圖標
2.7 JS-CSS-HTML Formatter
格式化
2.8 jQuery Code Snippets
jquery 自動提示
2.9 Path Autocomplete
- 路徑自動補齊
2.10 Npm Intellisense
- npm包代碼提示
2.11 ESLint
- 檢測JS必備
2.12 Debugger for Chrome
- 方便調試
2.13 Auto Rename Tag
- 自動同步修改標籤
2.14 Bootstrap 3 Snippets
- bootstrap必備
2.15 Vue VSCode Snippets
- vue必備
2.16 background
- 一個萌萌的插件，可以自己設置vsc的背景圖
2.17 easyless （暫時還沒安裝這個）
爲less文檔提供提示，錯誤警告，以及把less文檔編譯爲css文件。可自定義設置。開發者給出的配置例子：
"less.compile": {
"compress": true,
"sourceMap": true,
"out":false
}
可以粘貼到用戶設置的【默認設置】裏，也可以粘貼到用戶設置settings.json裏。後面的懂json的同學自動忽略：如果settings.json是空的，應該寫成：
{
"less.compile": {
"compress": true,
"sourceMap": true,
"out":false
}
}
如果之前已有寫入json代碼，你應該在前面的名稱/值對塊後面加上“,”（新手容易多加或者少加","符號，個人覺得是這樣的）
****提示：****
在寫的時候，代碼內最好不要加註釋。"sourceMap": true, 這個地方最好設置成false ，因爲當你實際使用的時候瀏覽器找不到sourceMap 可能會報錯或者瀏覽器一直去找，還沒遇到過（我碰到jQuery.js因爲這個報錯的），入門的同學還是設置成false 比較好。
三、常用快捷鍵
文件 – 首選項 – 鍵盤快捷方式 ：就可以看到所有快捷鍵；
修改快捷鍵
文件 – 首選項 – 鍵盤快捷方式，找到你要修改的快捷鍵名字，右邊覆蓋就可以了，很方便！也可以高級自定義，選項在文件 – 首選項 – 鍵盤快捷方式打開之後的最上邊，和sublime 自定義快捷鍵的方式相同。
將保存，和打開瀏覽器的快捷鍵改成了自己習慣的方式，如下圖；
註釋：ctrl + /
向上(下)複製行 shift + alt + top(down)
向上(下)移動行* alt + top(down)*
新建一個窗口 ctrl + shift + N
行增加縮進： ctrl + [
行減少縮進 * ctrl + ]**
裁剪尾隨空格(去掉一行的末尾那些沒用的空格): ctrl + x ctrl +k
強烈建議把這個啓用，這樣保存的時候就會自動刪掉那些沒用的空格，在很多公司的代碼規範裏都是不允許存在這些空格的。
顯示隱藏側邊欄:ctrl + B
拆分編輯器(最多拆分成三塊):ctrl + /按ctrl + 1(2,3)就可以在拆分後的編輯器裏切換
方法縮小ctrl +(-)
關閉編輯器 ctrl + W(F4)
切換編輯器 ctrl + shift + left(right)
也可以用 ctrl+1(2,3)
切換全屏 F11
切換自動換行 alt + Z
顯示Git ctrl + shift + G
前提是你的項目必須是一個git項目