Visual Studio Code 使用指南

　   安裝

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

　　HTML Snippets：加強了zen-coding，增長了H5的自動補全，安裝後每次打開自動啓用（可能與其餘插件衝突）。

　　下載地址：https://code.visualstudio.com/Download

 

　　配置

　　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能夠向上/下複製選中內容或者當前行

　

　　經常使用插件

　　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的背景圖

　　

　　經常使用快捷鍵

　　（在快捷鍵部分， ⌘ 指 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中覆蓋。

　　

　　修改快捷鍵

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

 

 　　新建文件

　　右鍵 – 新建文件，文件後綴名本身加上，自動識別。

       新建.html文件後，空白頁，沒有頁面默認代碼結構，此時在編輯區輸入html，回車第二個或者第三個便可。

 

技術羣 : 192713488