VsCode使用技巧

vscode介紹文章請移步：前端啊！你是時候換一款輕量的強大的漂亮的體驗一致的代碼編輯器了——Visual Studio Code

前言

vscode是一款跨平臺的代碼編輯器，她輕量、美觀、一致、功能完整，自帶完美git支持，很是適合前端同窗使用。
下面總結下我對於這個軟件的使用技巧，但願對你們有幫助。

快捷鍵

注意：當下列快捷鍵不起做用時，請考慮是不是其餘軟件已經佔用了快捷鍵，如輸入法、聊天軟件等

vscode內置了emmet，使用tab鍵可快速編寫html/css等，具體請查詢emmet語法說明

快捷鍵	備註
Ctrl + N	新建文件
Ctrl + S	保存文件
Ctrl + F	在當前文件內查找
Ctrl + H	在當前文件內替換
Ctrl + Shift + F	在文件內查找
Ctrl + Shift + H	在文件內替換
Ctrl + Tab	切換文檔
Ctrl + PgUp/PgDn	向前/向後切換文檔
Ctrl + 1/2/3	切換分欄
Ctrl + P	轉到文件
Ctrl + P	轉到文件
Ctrl + G	轉到行，輸入行號，轉到該行號處
Ctrl + =/- Ctrl + 鼠標滾輪	縮放編輯器顯示比例
Ctrl + F1	在瀏覽器中打開當前正在編輯的html文件，這個功能須要插件支持，安裝插件：View In Browser
F12	轉到定義，可跳轉到變量定義處，定義較爲複雜時，會找不到
F1	打開命令輸入框
Shift + Alt + F	格式化代碼
Ctrl + Alt + Up/Down/Left/Right	按區域選中代碼，並編輯
Alt + Up/Down	移動光標所在行或者光標選中代碼的位置
Alt + Left/Right	前進或後退操做歷史，這個歷史不是編輯歷史（Ctrl + Z/Y操做的是編輯歷史），它包含如：第一步，光標在12行6列處；第二步，光標在20行10列處；第三步，打開另一個文件。
Shift + Alt + Up/Down	複製光標所在行至上一行或下一行
Alt + 光標選中	光標多選，同時編輯

擴展/插件

vscode支持擴展，官方商店裏有不少擴展，網址：https://marketplace.visualstu...
安裝方式：點擊編輯器左側的【擴展】按鈕，在搜索框中輸入你想要安裝的插件，點擊安裝便可。

推薦插件

連接	名稱	備註
查看	Path Intellisense	在編輯器中輸入路徑時，自動補全
查看	Auto Close Tag	自動補全html標籤，如輸入<a>將自動補全</a>
查看	Auto Rename Tag	自動重命名html標籤，如修改<a>爲<b>，將自動修改結尾標籤</a>爲</b>
查看	REST Client	在編輯器中發送http請求，可直接獲得結果，測試接口時頗有用處，用法請看插件詳情
查看	Easy LESS	自動編譯less文件（文件保存後自動變爲爲同名.css文件），若是你只是想用less，而又不想配置grunt等工具來使用它時，請使用這個插件，他絕對是更效率的
查看	View In Browser	按Ctrl + F1在瀏覽器中打開正在編輯的html文件
查看	vscode-icons	爲文件添加炫酷的圖標，圖標種類很全，包括各類配置文件、常見語言、常見js框架等，你值得擁有；安裝後，須要使用管理員權限啓動vscode，並打開命令輸入框(F1或者Ctrl+Shift+P)執行Icons Enable
查看	JS-CSS-HTML-formatter	格式化代碼
查看	vscode-caniuse	caniuse 檢查HTML特性支持狀況
查看	vscode-todo	檢查列舉代碼中的//TODO:標識

今天就整理這麼多吧，後續有新的使用心得還會更新。