?

　　VSCode 使用入門

　　安裝

　　VSCode是微軟推出的一款輕量編輯器，采取了和VS相同的UI界面，搭配合適的插件可以優化前端開發的體驗。

　　HTML Snippets：增強了zen-coding，增加了H5的自動補全，安裝后每次打開自動啟用（可能與其他插件沖突）。

　　下載：點我去下載

　　安裝：雙擊即可安裝，根據需要選擇即可。

　　配置

　　Ctrl + Shift + P 或 F1 打開命令面板（也可以使用 查看-》命令面板打開）；

　　輸入 user set 后按回車打開用戶配置；

　　使用 “editor.fontFamily”：“Consolas， ‘Courier New’， monospace” 選擇字體樣式，默認為“Consolas， ‘Courier New’， monospace”；使用 editor.fontSize“：14 控制字體大小，默認為14；使用 ”editor.wrappingColumn“：0使文本自動換行，默認為300；在左側的默認配置中會有詳細的中文描述，配置文件是json格式的文本文檔。

　　插件

　　Ctrl + Shift + P 或 F1 打開擴展面板，輸入 install 后按回車打開擴展安裝面板；或點擊側邊欄的最后一個按鈕；或使用ctrl + shift + x命令打開；或使用 查看-》擴展打開擴展面板。

　　在對話框中輸入［string ］@sort:installs可以根據下載量排序查看，選擇所需插件，單擊安裝即可。

　　@sort:installs：根據下載量排序查看所有插件，asc 升序排列，desc 降序排列。

　　@sort:rating ：分級查看，asc 升序排列，desc 降序排列。

　　string可以為空

　　推薦插件：

　　C/C++：添加C/C++支持，包括但不限于自動補全

　　Python：自動縮進，補全，查錯，debug，代碼格式化等等

　　beautify：格式化html，css，js

　　vscode-icons：一款很火的圖標主題

　　HTML Snippets：可以在不輸入 《 的情況下提示

　　View In Browser：在瀏覽器中打開 HTML 文件

　　Crane - PHP Intellisense：PHP代碼的自動補全插件

　　jQuery Code Snippets：一款jQuery重度患者的插件

　　Debugger for Chrome ：調試JavaScript

　　Git History：顯示git log和line history

　　Git 的使用

　　需要本機已經安裝 Git

　　無需安裝插件，單機側邊欄的第三個圖標即可進行 add、commit、push、pull。（或者使用ctrl+shift+g打開，或使用 查看-》Git 打開Git）

　　主題更換

　　圖標主題：Ctrl+shift +p 打開命令面板，輸入 icon theme 后回車，選擇一個即可。

　　顏色主題：Ctrl+shift +p 打開命令面板，輸入 color theme 后回車，選擇一個即可。

　　跳轉

　　跳轉到文件：Ctrl+P。

　　跳轉到符號：Ctrl+shift+o，可以跳轉到文件中的方括號、大括號等等。

　　跳轉到行：Ctrl+G，可以跳轉到指定行。

　　Debug

　　使用ctrl+d 打開debug面板。

　　可以根據需要配置launch.json

　　常用功能

　　Emmet：使用 Tab 自動補全HTML標簽

　　Markdown Preview：使用 Ctrl + shift + v預覽markdown文件

　　使用shift + alt + up/down可以向上/下復制選中內容或者當前行

　　vscode的使用教程

　　2.常用插件：

　　View In Browser

　　- 預覽頁面（ctrl+F1）

　　vscode-icons

　　- 側欄的圖標，對于一個有視覺強迫癥的人是必須要的

　　HTML Snippets

　　- 支持HTML5的標簽提示

　　HTML CSS support

　　- css自動補齊

　　JS-CSS-HTML Formatter

　　格式化

　　jQuery Code Snippets

　　jquery 自動提示

　　Path Autocomplete

　　- 路徑自動補齊

　　Npm Intellisense

　　- npm包代碼提示

　　ESLint

　　- 檢測JS必備

　　Debugger for Chrome

　　- 方便調試

　　Auto Rename Tag

　　- 自動同步修改標簽

　　Bootstrap 3 Snippets

　　- bootstrap必備

　　Vue 2 Snippets

　　- vue必備

　　background

　　- 一個萌萌的插件，可以自己設置vsc的背景圖

　　3.常用快捷鍵

　　（在快捷鍵部分， ? 指 Command 鍵，? 指 Shift 鍵，? 指 Control 鍵，? 指 Option/Alt 鍵。）

　　這里主要就是實驗F1上的快捷鍵，一些我認為沒用的我就不列出來了。

　　向上（下）復制行 shift + alt + top（down）

　　向上（下）移動行* alt + top（down）*

　　新建一個窗口 ctrl + shift + N

　　行增加縮進： ctrl + ［

　　行減少縮進 * ctrl + ］**

　　裁剪尾隨空格（去掉一行的末尾那些沒用的空格）： ctrl + shift + x

　　強烈建議把這個啟用，這樣保存的時候就會自動刪掉那些沒用的空格，在很多公司的代碼規范里都是不允許存在這些空格的。

　　顯示隱藏側邊欄：ctrl + B

　　拆分編輯器（最多拆分成三塊）：ctrl + /按ctrl + 1（2，3）就可以在拆分后的編輯器里切換

　　方法縮小ctrl +（-）

　　關閉編輯器 ctrl + W（F4）

　　切換編輯器 ctrl + shift + left（right）

　　也可以用 ctrl+1（2，3）

　　顯示和隱藏側邊欄 ctrl + B

　　切換全屏 F11

　　切換自動換行 alt + Z

　　顯示Git ctrl + shift + G

　　前提是你的項目必須是一個git項目

　　這個還是很有用的，有時候我們的屏幕不夠大，可是代碼沒有自動換行，所以被遮住的代碼就會看不到，但是你用這個快捷鍵就可以換行看到了。這個我是在用戶設置里面設置成自動換行的。

　　修改用戶設置

　　把默認的用戶設置成適合我們自己的還是很重要的。

　　也很簡單，文件 – 首選項 – 用戶設置，然后出來左邊的默認設置是不能改的，需要在右邊settings.json中覆蓋。

　　修改快捷鍵

　　文件 – 首選項 – 鍵盤快捷方式，和修改用戶設置的時候一樣，找到你要修改的快捷鍵名字，右邊覆蓋就可以了，一些還沒有綁定快捷鍵的功能可以在左邊的最下面看到，然后快捷鍵的名字就是這個。