![image.png](https://i.iter01.com/images/409fca673bbd623c0bf8d7a83123383219798be5a9d1adc39e4f6c233c0d0d33.png)
之前一直都是用 sublime text 作為開發工具,用久了自然而然會覺得生活無趣,而且當時用sublime text 裝了很多外掛,有些外掛不能用,於是決定試試微軟的新產品 Visual Studio Code 。
1. 開始
在這裡介面裡你就可以看到一個非常有情懷的快速連結:安裝鍵盤快捷方式(你可以安裝包括但不限於 Vim、Sublime、Atom 的鍵盤快捷方式),所有這個 coding 工具還是非常容易上手的。
從體積來說比 Sublime text 大了不少,30多兆,啟動速度也肯定會慢一些,但還是在可接受的範圍內,這個還跟機器有關係。
Visual Studio Code 的快捷鍵設定是統一管理的,所以你只需要修改一個檔案就可以了。我們先來看看 Visual Studio Code 的常用快捷鍵。
Visual Studio Code 有兩個比較重要的檔案,一個是 setting.json (基本設定),另一個是 keybindings.json(配置快捷鍵檔案)。它們 分別在【檔案】-【首選項】-【設定】和【檔案】-【首選項】-【鍵盤快捷方式】。
2. 快捷鍵
極常用的快捷鍵:
ctrl + E 查詢最近開啟過的檔案 ctrl + tab 在檔案之間切換 ctrl + G 跳到指定行 Ctrl + Shift + F 在專案下所有檔案內查詢內容(並且可全域性替換) Ctrl + \ 或者 按住 Ctrl 雙擊檔案。 Ctrl + p 全域性搜尋檔案 Ctrl + Home / End 跳到檔案頭部或者尾部
更多可以看官網的code.visualstudio.com/shortcuts/k…
3. 外掛
![image.png](https://i.iter01.com/images/7557145eb37ef29191646922ac6e63f3bbdf1d619f78d1857f4dd3764566eab6.png)
這裡介紹幾個我必裝的幾個外掛
3.1 vscode-icons
這是一個檔案圖示顯示外掛,可以根據你的檔案型別開決定將顯示何種圖示。這樣也不只是為了美觀,還可以讓自己一目瞭然。更好的定位到要檢視的檔案。
![Visual Studio Code 外掛 vscode-icons](https://i.iter01.com/images/43aeecb1c07e47572883e02d849ec7957d3d14194702974b1590a99b94cbaad8.png)
3.2 vscode-fileheader
這個外掛可以為你在檔案開頭外掛頭資訊,比如檔案的作者,修改時間,有了這個外掛你就不需要每次都碼一次所謂的無用資訊了。
![image](https://i.iter01.com/images/ef08eb25e37ada829df670dfcc5940b28d6cba37d1bba5f76fd029e1bded5940.png)
這個外掛的用法也好簡單:快捷鍵為:ctrl+alt+i,的依次點開【開始】-【首選項】-【設定】,在使用者配置檔案中新增如下程式碼:
"fileheader.Author": "https://www.geekjc.com",
"fileheader.LastModifiedBy": "https://www.geekjc.com"
複製程式碼
想檢視更多有用的外掛 可以看VSCode擴充外掛推薦(HTML、Node、Vue、React開發均適用
3.3 HTML CSS Support
列出專案裡所有能用的類名,這個外掛也挺有用的。有時候當你只記得一個類的首字母或者前幾個字母時,這個外掛就非常地有用了,當你敲出第一個字母后這個外掛就會自動把專案裡(當前HTML 檔案引用到的.css 檔案)與此匹配的類全都列出來,還帶有來自哪個 .css 檔案的提示。
![Visual Studio Code 外掛 HTML CSS Support](https://i.iter01.com/images/166729a05477b82282715fedb4054aab4afb550fc1f577cc857bea5af1c63b05.png)
4. 補充如何設定外掛的快捷鍵
我們可以給外掛來配置快捷鍵。不管是什麼外掛,你都可以像下面這樣配置快捷鍵。我們以 vscode-fileheader 外掛為例子:
依次點開【檔案】-【首選項】-【鍵盤快捷方式】,出現如下圖
![vscode.gif](https://i.iter01.com/images/214e0a6bcc7d12c1b9cbb2d8e614f0301ab3919ffd219cd4143c6321f7dcdc5c.gif)
5. 配置選項
有時候我們安裝了很多外掛,我們需要管理,需要開啟或者關閉某些外掛的功能,就可以用這個配置選項了 依次點開【檔案】-【首選項】-【設定】
![image.png](https://i.iter01.com/images/c660a3473c4f9b7c040919ac5cf807ccc1277d25a33095e32d8286b4c4327ce9.png)
6. 終端命令列工具 Terminal
在VS Code中提供了一個功能齊全的整合終端,這非常方便,因為您不必切換視窗或更改現有終端的狀態就可以快速執行命令
![intergrated-terminal](https://i.iter01.com/images/99e62d8d3f65c5e892eb74389d4e7e90098ea1b389eac3218d9bcf32baff71dc.png)
7. 最後
當然vscode還有很多提高效率和很酷的操作,慢慢挖掘,不斷更新,關注極客教程