Visual Studio Code 編輯器使用

之前一直都是用 sublime text 作為開發工具，用久了自然而然會覺得生活無趣，而且當時用sublime text 裝了很多外掛程式，有些外掛程式不能用，於是決定試試微軟的新產品 visual studio code 。

從體積來說比 sublime text 大了不少，30多兆，啟動速度也肯定會慢一些，但還是在可接受的範圍內，這個還跟機器有關係。

visual studio code 的快捷鍵設定是統一管理的，所以你只需要修改乙個檔案就可以了。我們先來看看 visual studio code 的常用快捷鍵。

visual studio code 有兩個比較重要的檔案，乙個是 setting.json （基本設定），另乙個是 keybindings.json（配置快捷鍵檔案）。它們分別在【檔案】-【首選項】-【設定】和【檔案】-【首選項】-【鍵盤快捷方式】。

極常用的快捷鍵：

ctrl + e 查詢最近開啟過的檔案

ctrl + tab 在檔案之間切換

ctrl + g 跳到指定行

ctrl + shift + f 在專案下所有檔案內查詢內容（並且可全域性替換）

ctrl + \ 或者按住 ctrl 雙擊檔案。

ctrl + p 全域性搜尋檔案

ctrl + home / end 跳到檔案頭部或者尾部

更多可以看官網的

在搜尋框輸入你要安裝的外掛程式便可以安裝了。

這裡介紹幾個我必裝的幾個外掛程式

3.1 vscode-icons

這是乙個檔案圖示顯示外掛程式，可以根據你的檔案型別開決定將顯示何種圖示。這樣也不只是為了美觀，還可以讓自己一目了然。更好的定位到要檢視的檔案。

visual studio code 外掛程式 vscode-icons

3.2 vscode-fileheader

這個外掛程式可以為你在檔案開頭外掛程式頭資訊，比如檔案的作者，修改時間，有了這個外掛程式你就不需要每次都碼一次所謂的無用資訊了。

這個外掛程式的用法也好簡單：快捷鍵為：ctrl+alt+i，的依次點開【開始】-【首選項】-【設定】，在使用者配置檔案中新增如下**：

"fileheader.author": "", "fileheader.lastmodifiedby": ""

3.3 html css support

列出專案裡所有能用的類名，這個外掛程式也挺有用的。有時候當你只記得乙個類的首字母或者前幾個字母時，這個外掛程式就非常地有用了，當你敲出第乙個字母後這個外掛程式就會自動把專案裡（當前html 檔案引用到的.css 檔案）與此匹配的類全都列出來，還帶有來自哪個 .css 檔案的提示。

visual studio code 外掛程式 html css support

我們可以給外掛程式來配置快捷鍵。不管是什麼外掛程式，你都可以像下面這樣配置快捷鍵。我們以 vscode-fileheader 外掛程式為例子：

依次點開【檔案】-【首選項】-【鍵盤快捷方式】，出現如下圖

vscode.gif

按上圖操作所示就可以設定快捷鍵了

有時候我們安裝了很多外掛程式，我們需要管理，需要開啟或者關閉某些外掛程式的功能，就可以用這個配置選項了

依次點開【檔案】-【首選項】-【設定】

image.png

如上圖左邊的是預設的，右邊的是使用者自定義的，都可以編輯

在vs code中提供了乙個功能齊全的整合終端，這非常方便，因為您不必切換視窗或更改現有終端的狀態就可以快速執行命令

當然vscode還有很多提高效率和很酷的操作，慢慢挖掘，不斷更新，關注極客教程