如何使用Visual Studio Code

Visual Studio Code是朋友們的VSCode,它是一種功能非常強大的編輯器,正在迅速普及。找出原因及其對開發人員的主要功能

介紹

從一開始,編輯就是一頭奇怪的野獸。有些人竭力捍衛他們的編輯選擇。在Unix世界中,您擁有那些Emacsvi“戰爭”,我有點想像為什麼花費大量時間討論一個人與另一個人的優勢。

在過去的幾年中,我使用了大量的編輯器和IDE。我可以記得TextMate,TextWrangler,Espresso,BBEdit,XCode,Coda,括號,Sublime Text,Atom,vim,PHPStorm。 IDE和編輯器之間的差異主要在於功能集和復雜性。

與IDE相比,我在很大程度上更喜歡編輯器,因為它速度更快,而且方式更少。

在過去的12個月中,我一直在使用VS Code(Microsoft的開源編輯器),並且它很快成為我最喜歡的編輯器。

我應該切換到VS Code嗎?又為什麼呢?

如果您正在尋找是否使用的建議,請說是的,您應該從現在使用的任何其他編輯器切換到它。

該編輯器以Microsoft數十年的編輯經驗為基礎。

編輯器的代碼完全是開源的,使用它不需要付費。

它用電子作為其基礎,這使其可以跨平台並在Mac,Windows和Linux上運行。它是使用Node.js構建的,您可以使用JavaScript對其進行擴展(這對我們所有JavaScript開發人員來說都是一個勝利)。

它是快速地,輕鬆成為繼Sublime Text之後我使用過的最快的編輯器。

它贏得了社區的熱情:成千上萬的擴展名,一些官員和一些由社區製作的,獲獎調查

Microsoft每月發布一個更新。頻繁的更新促進了創新,並且Microsoft在傾聽用戶的意見,同時保持平台盡可能穩定(我應該說,幾乎每天都在使用VS Code的一年內,我從未遇到過問題)。

入門

Internet上的Visual Studio Code主頁是https://code.visualstudio.com/

轉到該站點以下載編輯器的最新穩定版本。

VS Code site

安裝過程取決於平台,因此您應該習慣該平台。

首次啟動編輯器時,您將看到歡迎屏幕:

Welcome screen for VS Code

左側有一個帶有5個圖標的工具欄。這樣可以訪問:

  • 文件瀏覽器
  • 搜索
  • 源代碼控制
  • 調試器
  • 擴展名

探險者

讓我們從資源管理器(雙關語)開始探索。

VS Code Explorer

按側欄中的“打開文件夾”按鈕,或Open folder...歡迎頁面中的鏈接。兩者都將觸發文件選擇器視圖。

選擇一個包含源代碼甚至是文本文件的文件夾,然後將其打開。

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

Opened folder

右側的空白視圖顯示了一些命令以執行一些快速操作,以及它們的鍵盤快捷鍵。

如果您選擇左側的文件,則該文件將在主面板上打開:

Files list

並且,如果您開始對其進行編輯,則會注意到在選項卡中以及邊欄中的文件名旁邊會出現一個點:

Editing file

緊迫CMD+P將為您顯示一個快速的文件選擇器,可以輕鬆地在大型項目中移動文件:

Quick file picker

您可以使用快捷方式隱藏託管文件的側邊欄CMD+B

注意:我使用的是Mac鍵盤快捷鍵。在大多數情況下,在Windows和Linux上,您只需將CMT更改為CTRL即可,但並非總是如此。打印你的鍵盤快捷鍵參考

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

Search

您可以單擊圖標以使搜索區分大小寫,以匹配整個單詞(而不是子字符串),並為搜索字符串使用正則表達式。

要執行搜索,請按enter

單擊左側的▷符號可啟用搜索和替換工具。

單擊三個點將顯示一個面板,該面板可讓您僅包含某些特定類型的文件,而排除其他文件:

Search and replace

源代碼控制

通過單擊工具欄中的第三個圖標,可以啟用“源代碼管理”選項卡。

Source control

VS Code提供了開箱即用的Git支持。在這種情況下,我們打開的文件夾沒有初始化源代碼控制。

單擊頂部帶有Git徽標的第一個圖標,可以初始化Git存儲庫:

Git repo is initialized

U每個文件旁邊的文件表示該文件自上次提交以來已進行了更新(因為我們從來沒有做過一次提交,因此所有文件均已更新)。

通過編寫短信並按來創建第一個提交Cmd-Enter,或單擊頂部的✔︎圖標。

First commit

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

單擊3點圖標時,它提供了許多與Git交互的選項:

Git options

調試器

工具欄中的第四個圖標將打開JavaScript調試器。這值得單獨發表一篇文章。同時退房官方文檔

擴展名

第五個圖標將我們引向擴展程序。

Extensions

擴展是VS Code的殺手級功能。

它們可以提供那麼多的價值,您肯定會最終使用大量的它們。

我安裝了許多擴展程序。

要記住的一件事是,您安裝的每個擴展都會(或多或少)影響編輯器的性能。

您可以禁用安裝的擴展,並僅在需要時啟用。

您還可以禁用特定工作區的擴展名(我們將在以後討論工作區)。例如,您不想在Go項目中啟用JavaScript擴展。

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

Recommended extensions

由於我為博客編輯了許多markdown文件,因此VS Code建議我markdownlint擴展名,它提供Markdown文件的整理和語法檢查。

作為示例,讓我們安裝它。

首先,我檢查視圖的數量。是120萬,太多了!好評(4。55)。單擊擴展名,將在右側打開詳細信息。

Extension details

按下綠色的“安裝”按鈕將啟動安裝過程,這很簡單。它為您完成了所有工作,您只需要單擊“重新加載”按鈕將其激活,這實際上會重新啟動編輯器窗口。

完畢!讓我們通過創建帶有錯誤(例如缺失)的markdown文件進行測試alt圖片上的屬性。它成功地告訴我們:

markdownlint extension

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

終點站

VS Code具有集成的終端。

您可以從菜單中激活它View ➤ Integrated Terminal,或使用CMD+\`,它將使用您的默認外殼程序打開。

The terminal

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

您可以創建多個終端標籤,並在另一個標籤旁邊顯示它們,也可以將它們堆疊在右側而不是在窗口底部:

Multiple terminals

命令面板

命令面板是一個非常強大的工具。您可以通過單擊啟用它View ➤ Command Palette,或使用CMD+SHIFT+P

模態窗口將顯示在頂部,為您提供各種選項,具體取決於您已安裝的插件以及上次使用的命令。

我執行的常見操作是:

  • 擴展:安裝擴展
  • 首選項:顏色主題更改顏色主題(有時我從黑夜改變為白天)
  • 格式化文件,它會自動格式化代碼
  • 運行代碼,由Code Runner提供,並執行JavaScript突出顯示的行

您可以通過開始鍵入來激活其中任何一個,然後自動完成功能會向您顯示您想要的一個。

記住當您鍵入CMD+P之前看到文件列表?這是命令面板特定功能的快捷方式。還有其他:

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

什麼符號取決於文件類型。在JavaScript中,這些可能是類或函數。在Markdown中,章節標題。

主題

您可以通過以下方式切換使用的顏色主題:CMD-k+CMD-t,或通過調用首選項:顏色主題命令。

這將向您顯示已安裝的主題列表:

Themes

您可以單擊一個,或使用鍵盤移動,而VS Code將為您顯示預覽。單擊輸入以應用主題:

Light Theme

主題只是擴展。您可以轉到擴展程序管理器來安裝新主題。

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

我最喜歡的主題是阿玉,在白天,晚上,早晨/晚上和下午的任何時間都提供了很棒的風格。

客制化

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

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

您可以通過以下方式更改它們Preferences ➤ File Icon Theme。 Ayu帶有自己的圖標主題,與主題顏色完全匹配:

Ayu Light

到目前為止,我們進行的所有這些自定義(主題和圖標主題)均保存到用戶首選項中。

Preferences ➤ Settings(也可以通過CMD-,) 去看他們:

Settings

該視圖在左側顯示默認設置(供參考),在右側顯示被覆蓋的設置。您可以在以下位置看到主題名稱和我們設置的圖標主題workbench.colorThemeworkbench.iconTheme

我放大使用CMD-+,並且此設置也已保存到window.zoomLevel,因此下次VS Code啟動時,它會記住我的縮放選擇。

您可以決定在以下位置全局應用某些設置:用戶設置,或相對於工作空間工作區設置

大多數情況下,這些設置是通過擴展名或VS Code本身自動添加的,但是在某些情況下,您可以在此位置直接對其進行編輯。

不錯的配置選項

VS Code有很多選擇。一切都是高度可配置的,有時很難一一理解。

您可以使用命令面板打開配置JSON文件,然後選擇Open Settings (JSON)

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

選項 描述
"editor.minimap.enabled": false 刪除小地圖,該小地圖顯示在編輯器的右側
"explorer.confirmDelete": false 當我想刪除文件時,不再要求我確認(我有源代碼控制!)
"explorer.confirmDragAndDrop": false 禁用拖放確認
"editor.formatOnSave": true 保存時自動格式化代碼
"editor.formatOnPaste": true 當我將代碼粘貼到代碼中時會自動設置代碼格式
"javascript.format.enable": true 啟用JavaScript代碼格式
"files.trimTrailingWhitespace": true 修剪文件中的空格
"editor.multiCursorModifier": "alt" 單擊Alt鍵並用鼠標單擊時,我可以選擇多行
"editor.detectIndentation": true 適應文件縮進,在編輯其他人的代碼時很有用
"editor.quickSuggestionsDelay": 0 立即顯示代碼建議,而不是幾秒鐘後顯示

最好的編碼字體

我喜歡費拉密碼。它是免費的,並且具有一些非常不錯的編程連字,可以轉換常見的結構,例如!===>更好的符號:

Fira code

通過安裝字體並將其添加到您的配置中來啟用它:

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

工作空間

可以在工作區設置中覆蓋所有用戶設置。他們優先。例如,當您使用的棉絨規則不同於您使用的所有其他項目的項目時,它們非常有用,並且您不想僅為此編輯自己喜歡的設置。

您可以通過以下方式從現有項目創建工作區:File ➤ Save Workspace as...菜單。

當前打開的文件夾將被啟用為工作區主文件夾。

下次打開VS代碼或切換項目時,無需打開文件夾,而是打開工作區,這將自動打開包含代碼的文件夾,並且它將記住您為該工作區設置的所有設置。

除了具有工作空間級別的設置之外,您還可以禁用特定工作空間的擴展。

您可以只使用文件夾,直到有特定的原因想要使用工作空間為止。

一個很好的理由是能夠具有多個單獨的根文件夾。您可以使用File ➤ Add Folder to Workspace添加新的根文件夾,該根文件夾可以位於文件系統中的任何位置,但將與您擁有的其他現有文件夾一起顯示。

編輯中

智能感知

當您使用一種支持的語言(JavaScript,JSON,HTML,CSS,Less,Sass,C#和打字稿)VS Code具有IntelliSense,該技術可在您鍵入功能和參數時提示它們自動完成。

代碼格式化

兩個方便的命令(Format DocumentFormat Selection)可在“命令”面板上使用,以自動設置代碼格式。默認情況下,VS Code支持自動格式化HTML,JavaScript,TypeScript和JSON。

錯誤和警告

打開文件時,您會在右側看到帶有一些顏色的條形圖。這些顏色表明您的代碼中存在一些問題。例如,這是我現在看到的內容:

Warnings

這些都是警告或錯誤。您可以嘗試在代碼中找到它們,在其中看到帶紅色下劃線的部分,或者也可以按CMD-Shift-M(或選擇View ➤ Problems

View problems

鍵盤快捷鍵

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

記住它們變得越來越複雜,但是它們是一個很好的生產力輔助工具。我建議打印官方快捷方式備忘單,蘋果電腦的Linux視窗

按鍵圖

如果您習慣於使用其他編輯器的鍵盤快捷鍵,則可能是因為您使用一個編輯器已經很長時間了,因此可以使用鍵盤映射。

VS Code團隊為開箱即用的最受歡迎的編輯器提供了鍵盤映射:vim,Sublime Text,Atom,IntelliJ,Eclipse等。它們可作為插件使用。通過打開Preferences ➤ Keymaps Extensions菜單。

代碼段

片段非常酷。

對於您可能要使用的每種語言,都有一些擴展提供了現成的代碼片段供您使用。

對於JavaScript / React,一種流行的方法是VS Code ES7 React / Redux / React-Native / JS片段

你只要輸入rfe,按TAB鍵,它就會出現在您的編輯器中:

import React from 'react'

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

export default $1

這些快捷方式很多,它們可以節省大量時間。不僅來自鍵入,而且還來自查找正確的語法。

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

擴展展示

VS Code CLI命令

打開命令面板,然後搜索install 'code' command in PATH命令。

按Enter鍵,然後按code命令將在您的命令行中全局可用。

這對於啟動編輯器並使用當前文件夾的內容打開新窗口非常有用,code .

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

並非總是有用的一件事是,VS Code可以快速顯示兩個文件之間的差異,code --diff file1.js file2.js

解決高使用率CPU問題

我遇到一個高CPU使用率和風扇旋轉的問題,該項目下有很多文件node_modules。我添加了此配置,一切看起來又正常了:

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

更多devtools教程: