01.25 工具利器之 Visual Studio Code（一）

前面的文章 中提到要從工具、編碼、設計上去提升我們的開發水平。今天我們就先從 Visual Studio Code 這款編程開發軟件來看看工具方面的實踐。

Visual Studio Code 是微軟推出的一款開源、輕量、跨平臺、主要面向 Web 開發的 IDE（集成開發環境）。它是基於 Chrome + NodeJS 這種 Web Hybrid 方案實現的，有別於傳統的那些基於本地 Native 開發的 IDE，如 Visual Studio、Eclipse、XCode 等。說得更通俗一點，它其實就是瀏覽器裡的網頁。通過這種方式，可以充分利用現有的網頁前端開發資源，更加方便進行插件開發與擴展。在這樣一款現代、高效的工具面前，有許多值得我們去學習、打磨的地方，以便更加充分地利用它來提高我們的開發工作、甚至是日常工作的效率。

下面，我將從 Markdown、快捷鍵與命令、搜索與替換、正則表達式幾個比較重要、提效迅速的方面來說一下。

Markdown

VSCode 默認將 .md 後綴的文件識別為 Markdown 語言，支持 Markdown 預覽。而且它還支持 Markdown inline 渲染，邊編輯邊渲染，實時檢查、展示語法效果。代碼工程裡經常有各類文檔文件，如 README.md、CHANGELOG.md，這樣也可以直接在 VSCode 裡進行編輯了。

同時由於它的輕量、跨平臺性，還可以用來做筆記或個人數據管理。推薦大家在 Gitlab.com 上創建一個私有倉庫（免費），專用存儲自己的工作筆記、個人數據，並使用 VSCode 來管理、編輯，這樣既可很方便地做數據同步、又能解決筆記編輯器的問題，不比那些免費或收費的專業筆記軟件差。

為了保證 Markdown 語法的兼容性，最好確保在編輯 Markdown 文件時，製表符長度為 4 個空格。可以在 User Settings 裡按如下配置：

Copy

1
2
3
"[markdown]": {
 "editor.tabSize": 4
}

快捷鍵與命令

VSCode 借鑑了很多其他編輯器的優秀快捷鍵，比如 Sublime Text。利用好快捷鍵能讓我們儘量減少鼠標、觸摸板的使用，可以讓代碼、文檔編寫工作事半功倍。好用的快捷鍵很多，但一開始不宜接觸太多。我選擇了幾個效果特別好的給大家介紹下。以下快捷鍵主要以 MacOS 為例，Windows、Linux 大體相同，但是在 Control、Command 之間存在一些不同，請自行搜索、嘗試。

選中文本的操作：

• Command + D：選中下一個跟已選中文本相同的文本。比如要選中本文內的所有 Code，則可以先雙擊選中其中一個，接著一直按 Command + D。每按一次就能選中下一個 Code。此時對某個選中的 Code，可以進行編輯，比如改成 Code It。這樣所有已選中的 Code 都會被替換成 Code It。這個命令在我們寫代碼做重構時特別好用，不用再去用文件內搜索、定位，然後一個一個替換了。
• Shift + Command + L：選中所有跟已選中文本相同的文本。跟 Command + D 類似。它特別適合搭配文件內搜索、全局搜索一起使用。當我們想要用正則表達式替換文件內的某些文本，正則匹配好寫、正則替換困難或不想寫的情況下，可以直接選中所有匹配的文本，直接進行文字編輯。

行的操作：

• Control + J：將下一行合併到當前行，即取消當前行的換行符。連續使用，效果更棒，尤其是想把多行代碼合併為一行的時候。
• Shift + Command + ↓：“複製”當前行為下一行。它的好處是不會佔用系統剪貼板，這樣剪貼板裡的內容還是可以繼續粘貼。
• Shift + Command + K：刪除當前行。它跟 Command + X 的區別是，後者會將當前行復制到剪貼板再刪除。
• Command + ↑/↓：移動當前行到上一行前面或下一行後面。

光標定位：

• Control + A 或 Command + ←：定位到行首
• Control + E 或 Command + →：定位到行末
• Alt + ←/→：定位到前一個詞組或後一個詞組

搜索與替換

VSCode 的文件內搜索與替換很好用，直接 Command + F 就可以喚起搜索。這裡我要介紹的是全局搜索。當我們要對多個文件、目錄、工程進行文字搜索、替換時，尤其好用。譬如我們要替換多個工程同一個依賴的版本號，可以使用如下方法：

1. 如果這些工程在同一個目錄下，那麼使用 VSCode 打開該父目錄即可。如果不在，可以開一個新的 VSCode 實例，使用 File->Add Folder to Workspace 將這些工程加到同一個 Workspace 裡
2. Shift + Command + F 打開全局搜索側邊欄，輸入你要檢索的文本。
3. 還可以限定文件。比如只對多個工程裡的 package.json 進行查找。此時展開搜索框，在 files to include 裡寫入 package.json 即可。
4. 回車開始搜索。VSCode 會在下方展示出所有的匹配內容，以文件為組分隔。
5. 點擊匹配到的內容，則會打開該文件，此時可以進行手動替換。當然，也可以使用全局替換。

VSCode 最近的更新（1.30.1）也支持多行文本的全局替換了！搜索框內支持回車（但是要按 Shift + Enter），這樣多行文本的搜索也很好用了，不能更贊！（想當初我還不得不用 Python 命令行腳本去解決這個需求）

關於正則表達式

最後，我想額外提一下正則表達式。正則表達式不僅是編程時可能需要用到，我們正常的文本編輯其實用到的機會會更多，尤其是在進行搜索、替換時。很多人調侃：“正則我每次只要半個小時就會”。的確，簡單的正則，如 .*、\\d、\\w，網上有很多文章介紹使用。甚至一些較為複雜的也能通過谷歌搜索得到。但是之所以能忍受 每次 都花“半個小時”去搜索，就是沒有經常使用的緣故。反過來說，如果經常使用，也就不需要花那“半個小時”去搜索了。

所以，在進行代碼編輯、文檔處理或者其他任務時，多使用編輯器提供給我們的正則表達式搜索與替換的能力，會讓我們對它自然熟悉。

結語

VSCode 還有很多地方值得我們深入探索，包括常用插件、工程配置等。它是我們的開發工作、日常工作的效率倍增器，一定要多加思考、多加練習、多加利用。磨刀不誤砍柴工。很多時候我們不知道自己的刀快不快，看到別人砍柴快了，也許我們就知道該怎麼做了。希望這些技巧能能帶動大家“磨刀”的興趣。