如何使用 VS Code

VS Code（VSCode）是一個功能強大，越來越受歡迎的編輯器。了解VS Code為什麼受歡迎，以及開發人員的主要功能。

• 介紹
• 應該轉用VS Code嗎？為什麼？
• 入門
• 資源管理器
• 搜尋
• 原始碼控制
• 調試器
• 擴充功能
• 終端
• 命令面板
• 主題
• 自定義
• 其他配置選項
• 最適合編碼的字體
• 工作區
• 編輯
  • IntelliSense
  • 代碼格式化
  • 錯誤和警告
  • 鍵盤快捷鍵
  • 鍵盤映射
• 代碼段
• 擴充功能展示
• VS Code命令行界面
• 解決高CPU使用問題

介紹

從一開始，編輯器就是一個奇特的存在。一些人會竭力捍衛他們選擇的編輯器。在Unix世界中，你會遇到諸如“Emacs vs vi”之類的爭論，而我對於為什麼要花這麼多時間討論一個編輯器的優點和缺點感到好奇。

在過去的幾年中，我使用過很多編輯器和集成開發環境（IDE）。我還記得TextMate，TextWrangler，Espresso，BBEdit，XCode，Coda，Brackets，Sublime Text，Atom，vim和PHPStorm。IDE和編輯器之間的區別主要在於功能集和複雜性。

相對於IDE，我更喜歡使用編輯器，因為它更快速且不會妨礙工作。在過去的12個月中，我一直在使用VS Code，這是微軟開源的編輯器，它迅速成為我最喜歡的編輯器。

應該轉用VS Code嗎？為什麼？

如果你想知道是否應該使用VS Code，讓我說，是的，你應該從你目前使用的其他編輯器中切換到VS Code。

這個編輯器基於微軟幾十年的編輯器經驗而建立。

該編輯器的代碼完全是開源的，並且使用它無需支付費用。

它使用Electron作為基礎，使其能夠跨平台運行在Mac、Windows和Linux上。它使用Node.js構建，並且可以使用JavaScript進行擴展（這對於開發者而言是一個優勝）。

它非常快速，在使用Sublime Text之後，它是我使用過的最快速的編輯器。

它贏得了社區的熱情追捧：有數千個擴展，一些是官方的，一些是由社區製作的，而且它在調查中也名列前茅。

微軟每個月都會發布新版本。頻繁的更新促進創新，微軟正在聆聽用戶的需求，同時保持平台盡可能穩定（在我使用VS Code的一年中，幾乎每天使用它，我從未遇到過任何問題）。

入門

VS Code的主頁是https://code.visualstudio.com/。

訪問該網站下載該編輯器的最新穩定版本。

安裝過程取決於該平台，你應該已經熟悉了。

當你第一次啟動編輯器時，你將看到歡迎畫面：

左側的工具欄上有5個圖標，它們提供：

• 文件總管
• 搜索
• 原始碼控制
• 調試器
• 擴充功能

資源管理器

讓我們從資源管理器（播音註）開始探索。

按下側邊欄的“打開文件夾”按鈕，或者在歡迎頁面上點擊“打開文件夾…”鏈接。這兩者都會打開文件選擇器視圖。

選擇一個包含源代碼（甚至只是文本文件）的文件夾，然後打開它。

VS Code將在視圖中顯示該文件夾的內容：

右邊的空視圖顯示了一些快速操作和它們的鍵盤快捷鍵。

如果在左側選擇了一個文件，該文件將在主面板中打開：

如果你開始編輯它，注意到在標籤中的文件名旁邊以及側邊欄中都會出現一個小圓點：

按下“CMD+P”將顯示一個快速文件選擇器，用於在大型項目中輕鬆移動文件：

你可以使用快捷鍵CMD+B隱藏包含文件的側邊欄。

注意：我使用的是Mac鍵盤快捷鍵。在Windows和Linux上，通常只需將CMT更改為CTRL即可生效，但並非總是如此。打印鍵盤快捷鍵參考。

搜尋

工具欄中的第二個圖標是“搜索”。點擊它會顯示搜索界面：

您可以點擊圖標使搜索區分大小寫，只匹配完整單詞（而不是子串），以及使用正則表達式進行搜索。

要進行搜索，按enter。

點擊左邊的▷符號，啟用搜尋和替換工具。

點擊3個點，顯示一個面板，可以僅包含某些特定類型的檔，排除某些檔：

原始碼控制

在工具欄中點擊第三個圖標，可以打開原始碼控制（Source Control）選項：

VS Code內置了Git支持。在這種情況下，我們打開的文件夾尚未初始化原始碼控制。

點擊頂部的第一個帶有Git標誌的圖標，可以初始化Git存儲庫：

每個文件旁邊的“U”表示自從上次提交以來它都已經更新（因為我們從來沒有提交過，所以所有文件都更新了）。

通過輸入文本消息並按Cmd-Enter或點擊頂部的✔︎圖標來創建第一個提交：

在提交時，我通常會將其設置為在提交時自動暫存更改。

點擊三個點圖標會顯示與Git交互的許多選項：

調試器

工具欄中的第四個圖標打開JavaScript調試器。這個功能值得一篇獨立的文章來講解。在此間暫時參考官方文檔。

擴充功能

第五個圖標將打開擴充功能：

擴展是VS Code的一個卓越特點。

它們可以為您提供豐富的功能，你肯定會使用大量的擴展。

我安裝了很多擴展。

但請記住，您安裝的每個擴展都會（或多或少地）影響編輯器的性能。

您可以禁用您安裝的擴展，並且只有在您需要時才啟用它。

您還可以為特定工作空間禁用擴展（稍後我們將談論工作區）。例如，您不希望為Go項目啟用JavaScript擴展。

有一個推薦的擴展列表，其中包括所有最受歡迎的工具。

由於我經常編輯博客的Markdown文件，VS Code建議我安裝markdownlint擴展，它為Markdown文件提供了linting和語法檢查。

作為一個例子，讓我們安裝它。

首先，檢查檢視次數，這是1.2M，非常多！評論也很好（4.5/5）。單擊擴展名將在右側打開詳細信息。

按下綠色的安裝按鈕開始安裝過程，該過程很簡單。它會為您完成所有操作，您只需要點擊“重新加載”按鈕即可激活它，這基本上等於重啟編輯器窗口。

完成！讓我們創建一個包含錯誤的Markdown文件來測試它，例如圖像上缺少alt屬性，它成功地告訴我們：

在下面，我將介紹一些您不容錯過的流行擴展以及我最常使用的擴展。

終端

VS Code具有集成的終端。

您可以從菜單視圖 ➤ 集成終端，或使用CMD+“來激活它，它將使用預設的shell來打開。

這非常方便，因為在現代網絡開發中，您幾乎總是有一些在後台運行的npm或yarn進程。

您可以創建多個終端標簽，並將它們顯示在一起，也可以將它們堆疊在窗口的右側而不是底部：

命令面板

命令面板是一個非常強大的工具。您可以通過點擊視圖 ➤ 命令面板，或使用CMD+SHIFT+P來激活它。

一個模式窗口會出現在頂部，提供不同的選項，具體取決於您安裝的插件以及您最近使用的命令。

我經常執行的一些常見操作是：

• Extensions: Install Extensions - 安裝擴展
• Preferences: Color Theme - 更改顏色主題（我有時由夜間切換到白天）
• Format Document - 自動格式化代碼
• Run Code - Code Runner提供的功能，執行選中的JavaScript代碼行
• 您可以通過輸入開始搜索上述選項，自動補全功能將顯示您想要的選項。

還記得之前我提到過當您鍵入CMD+P時顯示的文件列表嗎？這是命令面板特定功能的其中一個快捷方式。還有其他更多：

• Ctrl-Shift-Tab - 顯示活動文件
• Ctrl-G - 打開命令面板，讓您輸入要跳轉到的行號
• CMD+SHIFT+O - 顯示當前文件中找到的符號列表

這裡提到的符號類型取決於文件類型。在JavaScript中，它可能是類或函數。在Markdown中，這可能是章節標題。

主題

您可以通過點擊CMD-k+CMD-t來切換使用的顏色主題，或者調用Preferences: Color Theme命令。

這將顯示已安裝的主題列表：

您可以點擊主題，或使用鍵盤移動，VS Code會顯示預覽。點擊enter應用該主題：

主題只是擴展。您可以通過打開擴展管理器來安裝新的主題。

可能最好的發現方法是使用市場網站。

我最喜歡的主題是Ayu，它對於任何時間（夜晚、早上/下午）都提供了一種很棒的樣式。

自定義

主題只是您可以進行的自定義之一。

為文件分配的側邊欄圖標也是良好用戶體驗的重要組成部分。

您可以通過前往Preferences ➤ File Icon Theme來更改它們。Ayu自帶了自己的圖標主題，與主題顏色完全匹配：

到目前為止我們所做的所有這些自定義，主題和圖標主題的設置，都保存在用戶偏好中。

前往Preferences ➤ Settings查看它們：

左側顯示了默認設置，方便參考，右側顯示了覆蓋的設置。你可以在workbench.colorTheme和workbench.iconTheme中看到主題和圖標主題的名稱。

我使用CMD-+進行了放大，這個設置也保存在window.zoomLevel中，所以下一次VS Code啟動時，它會記住我的放大選擇。

您可以決定在用戶設置中全局應用某些設置，或在工作區設置中根據工作區應用某些設置。

大多數情況下，這些設置都是由擴展或VS Code自身自動添加的，但在某些情況下，您可能需要在此處直接編輯它們。

其他配置選項

VS Code有很多選項。一切都可以高度配置，有時很難理解其中所有內容。

您可以使用命令面板打開配置JSON文件，並選擇“打開設置（JSON）”。

我在代碼中設置的一些不錯的配置選項：

最適合編碼的字體

我喜歡使用Fira Code，它是一個免費的字體，具有一些非常好的編程連字符，可以將常見的構造，如!==和=>轉換為更好的符號：

安裝該字體，並在您的配置中添加以下代碼以啟用它：

1
2

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

工作區

所有用戶設置都可以在工作區設置中覆蓋。工作區設置優先。它們對於當您使用具有與您所有其他項目不同的Lint規則的項目時非常有用，您不想為此更改您喜愛的設置。

可以通過單擊“文件 ➤ 保存工作區為…”菜單，從現有項目創建工作區。

當您下一次打開VS Code，或者切換項目時，而不是打開文件夾，您將打開工作區，它將自動打開包含代碼的文件夾，並且它會記住您特定於該工作區的所有設置。

除了工作區級別的設置外，您還可以禁用特定工作區的擴展。

您可以僅使用文件夾工作，直到您有一個特定的原因需要工作區。

一個很好的理由是即使你擁有一個具有多個單獨的根文件夾的項目，你可以使用’文件 ➤ 添加文件夾到工作區’來添加一個新的根文件夾，它可以位於文件系統的任何位置，但會顯示在已有的其他根文件夾旁邊。

編輯

IntelliSense

當您編輯一個支持的語言（JavaScript，JSON，HTML，CSS，Less，Sass，C#和TypeScript）時，VS Code會提供智能感知（IntelliSense）功能，根據您輸入的內容進行自動完成。

代碼格式化

Commands Palette提供兩個便捷命令（”Format Document”和”Format Selection”）以自動格式化代碼。VS Code默認支持HTML，JavaScript，TypeScript和JSON的自動格式化。

錯誤和警告

當您打開一個文件時，您會在右側看到一個顏色條。這些顏色指示代碼中的一些問題。例如，目前我們看到：

這些都是警告或錯誤。您可以嘗試在代碼中找到它們，它們在其中找到的用紅色下劃線標記的片段中，或者也可以按下CMD-Shift-M（或選擇視圖 ➤ 問題）。

鍵盤快捷鍵

到目前為止，我向您展示了很多鍵盤快捷鍵。

記住它們都是一個很好的提高生產力的工具。我建議打印出官方的快捷鍵小抄，供Mac、Linux和Windows使用。

鍵盤映射

如果您習慣於其他編輯器的鍵盤快捷鍵，或者因為長時間使用一個編輯器，您應該使用鍵盤映射。

VS Code團隊提供了最受歡迎的編輯器的快捷鍵，預設安裝在其中：vim，Sublime Text，Atom，IntelliJ，Eclipse等。它們作為插件提供。通過打開Preferences ➤ Keymaps Extensions菜單來查看。

代碼段

代碼段非常酷。

對於您可能開發的每一種語言，都有提供現成的代碼段的擴展。

對於JavaScript/React，一個受歡迎的擴展是VS Code ES7 React/Redux/React-Native/JS snippets

您只需要輸入rfe，然後按下TAB，編輯器中會出現以下内容：

1
2
3
4
5
6
7

import React from 'react'

const $1 = props => {
 return <div>$0</div>
}

export default $1

代碼段非常的多，它們不僅節省了鍵入代碼的時間，還節省了查找正確語法的時間。

您也可以定義自己的代碼段。點擊Preferences ➤ User Snippets，並按照說明來創建自己的代碼段文件。

擴充功能展示

• GitLens：可視化最後一次更改代碼的人和時間
• Git History：可視化和搜索Git歷史記錄
• CSS Peek：通過檢查HTML元素的類別，可見並編輯CSS定義，非常方便
• Code Runner：運行選中的代碼並提供其他功能。支持很多語言。
• Debugger for Chrome：使用VS Code調試器調試在瀏覽器中運行的JavaScript代碼。
• Bracket Pair Colorizer：用於在代碼中顯示括號結束的便捷工具。
• Indent-Rainbow：為代碼的縮進級別上顏色。
• Prettier：參考Prettier指南
• ESLint：參考ESLint指南
• IntelliSense for CSS：基於工作區定義的CSS的改進自動完成
• npm：從命令面板啟用npm實用功能
• Auto Close Tag：自動關閉HTML/JSX/*標籤
• Auto Rename Tag：在更改開始標籤時自動重命名結束標籤，反之亦然

VS Code命令行界面

打開命令面板並搜索“install ‘code’ command in PATH”命令。

按下Enter，code命令將在全局命令行中可用。

這對於打開一個新窗口並打開當前文件夾中的內容非常有用，使用code .命令。

code -n將創建一個新窗口。

一個非常有用的功能是，VS Code可以快速顯示兩個文件之間的差異，使用code --diff file1.js file2.js命令。

解決高CPU使用問題

在具有許多內容在node_modules文件中的項目中，我遇到了高CPU使用和風扇迴轉的問題。我添加了以下配置後，問題得到解決：

1
2
3
4
5
6
7
8
9
10
11
12

"files.exclude": {
  "/.git": true,
  "/.DS_Store": true,
  "/node_modules": true,
  "/node_modules/": true
},
"search.exclude": {
  "/node_modules": true
},
"files.watcherExclude": {
  "/node_modules/": true
},

tags: [“VS Code”, “editor”, “development”, “programming”]