布局：左側(cè)是用于展示所要編輯的所有文件和文件夾的文件管理器，依次是`資源管理器`，`搜索`，`GIT`，`調(diào)試`，`插件`，右側(cè)是打開文件的編輯區(qū)域，最多可同時打開三個編輯區(qū)域到側(cè)邊。

底欄：依次是`Git Branch`，`error&warning`，`編碼格式`等

html文檔中

　　1、按tab鍵快速生成文檔頭以及閉合標(biāo)簽，類似sublime text 所安裝的插件，快速編輯，提高效率

　　2、js代碼也有自動補(bǔ)全功能

　　快捷鍵命令

　　　　　　　　 ctrl+shift+p 控制面板

　　　　　　　　 ctrl+k、ctrl+o 打開資源管理器選擇文件夾或文件

光標(biāo)選擇指定的文件夾，然后ctrl+shift+b 打開瀏覽器

安裝

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

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

　　下載地址：https://code.visualstudio.com/Download 或者 http://chabaoo.cn/softs/606746.html

配置

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

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

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

插件

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

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

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

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

　　string可以為空

推薦插件

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

　　Python：自動縮進(jìn)，補(bǔ)全，查錯，debug，代碼格式化等等

　　beauTIfy：格式化html，css，js

　　vscode-icons：一款很火的圖標(biāo)主題

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

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

　　Crane - PHP Intellisense：PHP代碼的自動補(bǔ)全插件

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

　　Debugger for Chrome ：調(diào)試JavaScript

　　Git History：顯示git log和line history

Git 的使用

　　需要本機(jī)已經(jīng)安裝 Git

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

主題更換

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

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

跳轉(zhuǎn)

　　跳轉(zhuǎn)到文件：Ctrl+P。

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

　　跳轉(zhuǎn)到行：Ctrl+G，可以跳轉(zhuǎn)到指定行。

Debug

　　使用ctrl+d 打開debug面板。

　　可以根據(jù)需要配置launch.json

常用功能

　　Emmet：使用 Tab 自動補(bǔ)全HTML標(biāo)簽

　　Markdown Preview：使用 Ctrl + shift + v預(yù)覽markdown文件

　　使用shift + alt + up/down可以向上/下復(fù)制選中內(nèi)容或者當(dāng)前行

常用插件

　　View In Browser

　　- 預(yù)覽頁面（ctrl+F1）

　　vscode-icons

　　- 側(cè)欄的圖標(biāo)，對于一個有視覺強(qiáng)迫癥的人是必須要的

　　HTML Snippets

　　- 支持HTML5的標(biāo)簽提示

　　HTML CSS support

　　- css自動補(bǔ)齊

　　JS-CSS-HTML Formatter

格式化

　　jQuery Code Snippets

　　jquery 自動提示

　　Path Autocomplete

　　- 路徑自動補(bǔ)齊

　　Npm Intellisense

　　- npm包代碼提示

　　ESLint

　　- 檢測JS必備

　　Debugger for Chrome

　　- 方便調(diào)試

　　Auto Rename Tag

　　- 自動同步修改標(biāo)簽

　　Bootstrap 3 Snippets

　　- bootstrap必備

　　Vue 2 Snippets

　　- vue必備

　　background

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

常用快捷鍵

　　（在快捷鍵部分， ⌘ 指 Command 鍵，⇧ 指 Shift 鍵，⌃ 指 Control 鍵，⌥ 指 OpTIon/Alt 鍵。）

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

　　向上（下）復(fù)制行 shift + alt + top（down）

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

　　新建一個窗口 ctrl + shift + N

　　行增加縮進(jìn)： ctrl + ［

　　行減少縮進(jìn) * ctrl + ］**

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

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

　　顯示隱藏側(cè)邊欄：ctrl + B

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

　　方法縮小ctrl +（-）

　　關(guān)閉編輯器 ctrl + W（F4）

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

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

　　顯示和隱藏側(cè)邊欄 ctrl + B

　　切換全屏 F11

　　切換自動換行 alt + Z

　　顯示Git ctrl + shift + G

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

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

修改用戶設(shè)置

　　把默認(rèn)的用戶設(shè)置成適合我們自己的還是很重要的。

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

修改快捷鍵

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

新建文件

　　右鍵 – 新建文件，文件后綴名自己加上，自動識別。

       新建.html文件后，空白頁，沒有頁面默認(rèn)代碼結(jié)構(gòu)，此時在編輯區(qū)輸入html，回車第二個或者第三個即可。 

最新評論