Visual Studio Code 2022

Visual Studio Code 2022

 |Web 開發設置 |熱門擴展、主題、設置、提示和技巧 

- YouTube

https://www.youtube.com/watch?v=fJEbVCrEMSE 

抄本：

（00：00） 你想學習如何成為一名 Web 開發人員嗎 第一步是選擇一個代碼編輯器 讓我告訴你如何設置，這樣你今天就可以開始學習了 我還將向你展示一系列提示和技巧，以充分利用你的代碼編輯器 [音樂] 有很多代碼編輯器可供選擇，但最受歡迎也是我最喜歡的是 Visual Studio Code，不要將 Visual Studio Code 與 Visual Studio VS Code 混淆，它是一個免費的開源跨平臺應用程式，它得到了社區和大量

（00：35） 擴展 它還可以完全自定義以適應任何開發人員的偏好和專案需求 它輕量級且快速，這就是為什麼它非常適合 Web 開發 在整個視頻中，我將引用其他資源的連結，所有這些連結都將在下面的視頻描述中 包括一個免費的 VS Code 備忘單，其中包括常見的鍵盤快捷鍵、我最喜歡的擴展、主題、字體和圖示包，如果您真的想成為VS Code Pro 去查看我在 VSCodeHero 的 VS Code 課程。

（01：06） COM 第一步是安裝 VS Code，所以去 code.visualstudio.com 下載這是一個跨平臺的應用程式，可以在 Windows、Linux 和 Mac OS 上運行，然後下載適當的版本並開始安裝，當你到達本節時，選擇其他任務，我建議檢查所有內容，這隻是將 VS Code 完全集成到你的作系統中，如果你是，你可能會也可能不會看到這些確切的設置。在 Linux 或 Mac OS 上，或者安裝完成後，這就是您將看到的 VS

（01：36） 代碼可以用於許多不同的程式設計語言，現在我們只關注基本的Web開發語言，包括HTML、CSS和JavaScript，因此我們將為此進行設置，但首先讓我們快速流覽一下左側：我們在頂部看到側邊欄，我們有資源管理器，在這裡您可以找到一次所有專案檔和目錄您打開了一個專案資料夾，接下來是搜索，這是不言自明的，這將允許您在專案檔中搜索，那裡有

（02：04） 還有一個查找和替換功能，接下來是原始程式碼控制，它使用 git 集成，如果你不知道 git 是什麼，別擔心，我有一個完整的視頻來解釋它，我將包含一個連結，接下來是運行和調試，我們不會在這個視頻中進行調試，但當然我也有一個視頻，接下來我們有擴展，我們將回來擴展選項卡，在底部，我們有我們的 管理齒輪 在此功能表中，您會找到諸如設置 鍵盤快捷鍵 主題 和

（02：33） 設置同步：在這個功能表的頂部，我們可以看到命令面板或快捷鍵是 Ctrl Shift P，如果你的鍵盤有 F1 鍵，你也可以只按 F1，所以這是一個非常酷的功能，在這裡你可以搜索幾乎任何你可以打開的檔、更改主題、視圖、鍵盤快捷鍵的內容，基本上每個可用的命令都在命令面板中而且你不必完成一個單詞，只需開始輸入，它就會弄清楚你在找什麼，如果唯一的鍵盤，這非常有用，可以節省大量時間

（03：02） 你記得的快速鍵是 Ctrl、Shift P 或 F1，然後你也會被設置在使用者介面的底部是狀態欄，它有很多有用的資訊，如果你正在使用原始程式碼控制，你會看到你所在的分支，你還將看到當前行號和當前文檔的語言，以及許多其他有用的資訊，讓我們開始吧繼續查看鍵盤快捷鍵，我們可以轉到 Manage Cog，然後轉到 Keyboard Shortcuts 或者我們可以按 Control K Control S

（03：31） 你可以在這裡看到有大量的鍵盤快捷鍵，你甚至可以自定義它們，現在你永遠不會記住它們，但當你發現自己需要用滑鼠做某事時，盡量記住你需要的鍵盤快捷鍵，尋找該作的鍵盤快捷鍵，然後試著記住它，下次你會節省很多時間使用鍵盤快捷鍵而不是使用滑鼠 現在讓我們看看一些設置，以進入我們可以轉到“管理齒輪”的設置，然後我們可以轉到“設置”或

（03：58） 您可以按 Ctrl 逗號，我建議您立即更改一些設置，這些只是我個人的喜好，因此您可以隨心所欲地設置這些設置：首先，我想稍微增加字體大小，我將我的字體更改為 18。我有一個更大的螢幕，我只是想確保我不會使眼睛疲勞，並確保字體美觀且可讀性強，接下來是選項卡大小，所以默認情況下是四個，我更喜歡兩個，但又是個人喜好，接下來讓我們搜索一下，我們上到這裡

（04：27） 搜索設置，讓我們在編輯器中鍵入 Bracket pair（括弧對），然後啟用括號對著色，以前有一個擴展，但現在它內置在 VS Code 中，所以我要啟用它，我將把括弧對（Bracket pairs）調到 true，將水平調到 Horizontal（水準），我也要將其改為 True，最後，我們來這裡搜索 word wrap（換行）和所以編輯器自動換行，我要打開它，這將防止長行代碼離開頁面右側，一切都會自動保存，所以我們可以

（05：00） 只需關閉它，接下來我們將查看主題，現在我們再次轉到我們的管理齒輪，然後轉到主題或顏色主題，或者快捷方式是 Ctrl K Ctrl T，在這裡我們可以使用向上和向下箭頭來迴圈瀏覽主題，所以我會給你一個內置主題的快速預覽，所以我們有 Abyss Dark Dark 加上印地語 Monica Monica Dimmed紅色 明天晚上變暗 藍色 高對比度 然後快速警告 我們即將進入淺色主題，所以戴上你的太陽鏡，所以我們在這裡 淺色 淺色 加 安靜

（05：38） 淺色和日光色：好吧，讓我們開始吧，我根本不在乎淺色主題，我更喜歡深色主題，所以我要向你展示我最喜歡的五個主題，我們可以在這裡搜索它們，流覽其他顏色主題，所以這裡有很多其他主題，首先我要搜索夜貓子，所以 Sarah Drazner 的夜貓子，這太棒了主題 我喜歡的另一個是 Cobalt 2 是 West Boss 的，然後是 Shades of Purple 這個是 amadowas 的 另一個很棒的是 Coder Coder

（06：11） 深色主題，這是我在 Codercoder 的朋友 Jessica 寫的，然後我最喜歡的主題當然是我的 Code Stacker 主題，所以要安裝它，我只需要按 Enter，它就會安裝並應用這個主題，我們只想繼續說是，安裝，就是這樣，現在我們有一個新主題，並且在描述中有指向所有這些主題的連結或者，您可以直接在此處或從我們接下來將要查看的Extensions面板中搜索它們，因此我們實際上已經在Extensions面板中了

（06：41） 它就在這裡，我們要清除這個搜索，所以在擴展面板中，我們將找到所有已安裝的擴展，然後有一堆流行的擴展，我們可以安裝，或者我們可以在市場上手動搜索一個擴展，所以我們要看的第一個擴展是 Live Server，現在這是一個非常流行的擴展此擴展的下載量超過 1700 萬次，它設置了一個本地 Web 伺服器，以便您可以看到對代碼所做的更改

（07：09） 即時無需重新載入，它是 Web 開發的必備工具，所以讓我們繼續安裝它，我們將要看到的下一個擴展稱為 Prettier，此擴展可説明您在整個過程中保持代碼的格式和統一性，它使您的代碼更漂亮 接下來，我們將尋找 Auto Rename Ag，每當您更改 HTML 標籤時，它都會自動重命名相應的標籤，因此它只會節省您稍後，您可以安裝其他一些東西來自定義 VS Code，其中之一就是

（07：41） 圖示包，所以我們要尋找 VS Code Dash 圖示，我喜歡這些圖示，這樣會向你的文件和資料夾添加一些圖示，使它們易於識別，我們可以尋找的另一件事是產品圖標包，所以我喜歡的那個叫做 Fluent Icon，所以它的作用是改變側邊欄左側的圖示，所以我要安裝它，現在你可以看到左側的圖示看起來有點不同，這是預設的，這是 Fluent 的圖示，還有其他圖示包可以

（08：18） 也從中選擇，接下來，讓我們打開一個專案資料夾，這樣有幾種方法可以從 VS Code 外部執行此作，我使用的是 Windows，因此，根據您使用的作系統，它可能會有所不同，但我可以右鍵按兩下我想在 VS Code 中打開的資料夾，然後使用 VS Code 打開，您會想說，是的，我信任這位作者現在您可以看到我們在 VS Code 中打開了演示資料夾，我們可以關閉這個入門，另一種方法是從 VS Code 內部我們可以轉到檔，然後打開資料夾，然後再打開

（08：53） 只需從作系統文件資源管理器中選擇要在 VS Code 中打開的資料夾，現在我們已經打開了一個專案資料夾，現在我們可以在典型的基本網站中添加資料夾結構和一些檔，您將有一個 index.html 檔、一個包含樣式表的 CSS 資料夾和一個包含 JavaScript 檔的 js 資料夾，因此讓我們繼續添加我們的索引。

（09：15） HTML 檔，我們直接到這裡添加新檔，我們要將其命名為 index.html，當我們創建一個檔時，它會自動為我們打開它，接下來讓我們創建一個新資料夾，所以在這裡添加新資料夾，我們將這個資料夾命名為 CSS，然後在這個資料夾中，我們將創建一個新文件，我們將這個樣式命名為這個。

（09：36） CSS 現在我們已經創建了該檔和資料夾，現在有一個快捷方式，而不是同時創建資料夾和檔，我們只需按兩下 Add file（添加檔），現在我們可以同時創建資料夾和檔，因此我們想要創建一個 js 目錄，然後斜杠，我們將創建一個 app.js 檔，因此現在它為我們創建資料夾和檔，然後再創建它現在打開了檔以在這些文件之間切換，我們可以使用 Control Tab 或 Ctrl Shift Tab 在檔之間前進和後退，如果我們想關閉一個檔，我們可以按 Ctrl W

（10：09） 那麼，讓我們關閉所有這些檔，這是再次打開檔的好方法，而不是使用滑鼠，我們可以按 Ctrl P，然後我們就準備好了檔，我們只需選擇要打開的檔，如果您有很多檔要搜索，請按 Enter，只需開始鍵入檔名，它就會彈出現在，如果我點擊應用程式，會注意到一些東西。

（10：28） JS：它在這裡彈出，它是斜體的，如果我點擊style.js它會在這裡被替換，所以這是一個預覽，如果你想打開並保持檔打開，你必須按兩下檔，現在它將繼續打開，或者編輯檔內的某些內容，現在它也將保持打開狀態，你會注意到如果你願意，這些都不再是斜體了更改此功能，我們可以轉到設置，以便控制逗號，然後讓我們搜索 Enable review so Workbench Editor Enable Preview，讓我們繼續並取消選中它

（11：06） 我們可以關閉設置，讓我們關閉這些文件，然後讓我按兩下 app，你會看到它不是斜體的，我可以點擊 style（樣式），它不是斜體的，它們在我們點擊時保持打開狀態，我更喜歡這種方式，好吧，接下來我想向你展示我最喜歡的 VS Code 內置功能，它叫做 IMIT，現在把 emmitt 看作是它的簡寫，你可以輕鬆快速地編寫大量代碼，它極大地加快了您的 HTML 和 CSS 工作流程在這裡，我將演示如何創建一個 HTML 頁面

（11：38） 只需按感嘆號即可做到這一點，您將看到 emit 彈出視窗，上面寫著 emit 縮寫，所以我現在要按 Enter，我們有一個基本的空白 html 網頁，如果您以前從未見過 HTML，並且您不知道這一切是什麼，請不要擔心，我只是演示了 VS Code 和 IMIT 的功能，您不必確切知道其中的任何內容意味著現在我們可以做的其他事情，我們轉到我們開始鍵入的主體，我們只需鍵入 div enter 即可創建一個 div，這將為我們創建一個 div 標籤

（12：11） 我們可以自動開始在這個 div 標籤中輸入內容，我們可以轉到該標籤的下方，然後讓我們創建一個清單，這樣我們就可以說 ul，我們可以說大於 li 乘以 4，所以我們只創建了一個包含 4 個項目的清單，我還可以通過鍵入 period my class 來創建一個包含我類的類的 div，現在我們有了包含我類的類的 div我可以創建一個輸入，我可以給它一個 boo 的 ID 和一個 bar 的類，只需鍵入這個，我們就可以開始我們的 input 和 idn 類，如果我只鍵入 input，那麼我們可以看到

（12：52） 這個彈出視窗提供了我們可以選擇的所有不同輸入類型，所以如果我需要一個日期輸入，只需按 Enter，現在我有一個日期輸入，在它裡面，你可以用一行創建一個非常複雜的 html 結構，這真的很棒，如果你想瞭解更多，我有一個關於 emmett 的整個視頻，現在有點類似於 emmett 是 Intellisense，這是另一個內置功能VS Code 的 API 和它可以説明您提供上下文感知建議 IntelliSense 功能有時由其他名稱調用，例如代碼完成代碼

（13：22） 説明或代碼提示 VS 代碼 IntelliSense 是為 JavaScript、TypeScript、JSON、HTML、CSS、SCSS 等提供的開箱即用的 VS Code 支援任何編程語言的基於單詞的補全，但它也可以通過安裝語言擴展來配置為具有更豐富的 IntelliSense，因此，如果我們轉到擴展，然後轉到過濾器類別，然後轉到程式設計語言，我們將看到所有這些不同的程式設計語言我們可以從中進行選擇，其中包括 Python、C C 加 C Sharp、Java Go、PHP Ruby 和

（13：58） Rust 那麼讓我們看看 IntelliSense 能做什麼，我們將轉到 app.js 檔，這是一個 JavaScript 檔，因此我們要鍵入 document，我們可以看到它已經開始幫助我們，所以讓我們按 Enter，我們想要 document，然後我們按下 Period，這將為我們提供一個建議清單，這些是所有可用的屬性、方法和函數對我們來說，文檔 A 沒有開發人員可以記住每個可用的方法、函數和屬性，因此 IntelliSense 可以幫助我們並允許我們更快地編寫代碼

（14：28） 現在，當你編寫代碼時，你希望獲得盡可能多的空間，我現在已經放大了它，所以這並不完全是你電腦上的樣子，但我在這裡的空間有點用完了，我們實際上可以去掉這個側邊欄，我們按下 Ctrl B 鍵將關閉側邊欄，所以記住 B 是側邊欄，然後再次按下 Ctrl B 鍵將立即將其恢復，但如果我們想在側邊欄中打開特定功能表，那麼這些功能表也具有特定的鍵盤快捷鍵，因此 Ctrl Shift E 是資源管理器控件，Shift F 是

（15：01） 這個搜索控制 Shift G 是原始程式碼控制，控制 Shift D 是調試，控制 Shift X 是擴展，所以 Ctrl Shift E，我們現在回到資源管理器，VS Code 的另一個很棒的功能是拆分編輯器的能力，所以讓我們按 Ctrl B，我們將關閉側邊欄，現在假設我想並排處理這些，所以我將採用我的應用程式。

（15：26） JS，然後把它移到這裡，現在我可以並排打開兩個檔，如果我願意，我也可以把它水準放在下面，我想如果我的顯示器是垂直的，那可能會好一點，但我們可以把它放在我們想要的地方，好吧，所以讓我們把它移回這裡，現在有一堆鍵盤快捷鍵可以説明你快速瀏覽代碼並作文本，當然，您可以使用箭頭鍵來移動，這很容易，但是如果我們在移動箭頭鍵時按住 Ctrl 鍵，它會移動我們

（15：55） 一次一個單詞，而不是一次一個字元，這樣會更快一些，假設我們想把這個 div 向下移動到 ul 下面，你可以知道，使用我們的滑鼠，複製它，粘貼它，然後刪除它，然後做所有這些，但只需使用我們的鍵盤，我們就可以按 alt 鍵，然後向上和向下箭頭，我們可以移動這條線現在，我們想在任何地方複製，比如說我想複製這些盟友，我想再添加兩個盟友，這樣我就可以按Alt Shift向下箭頭鍵並添加任意數量的LI，現在也許我想

（16：33） 將所有這些 div 更改為跨標籤，這樣我就可以按 Ctrl D 鍵，它會選擇游標所在的當前單詞，但是如果我再次按下 Ctrl D，我將選擇同一單詞的下一個匹配項，然後按住它並選擇任意數量的單詞，現在它們都被選中了，我這裡有多個游標，現在我可以開始鍵入 i可以說span，所以現在所有的 div 都變成了 span，現在假設我想同時輸入所有這些盟友，那麼如果我按下此處，我可以按住 alt

（17：06） 鍵，我可以同時創建多個游標，然後我可以在所有游標中鍵入內容，當然，就像在幾乎所有其他應用程式中一樣，如果我做了一些我不想做的事情，我可以按 Ctrl Z 來撤消它，所以現在我們要討論終端，這可能是很多人最可怕的話題，但實際上並非如此太可怕了，我保證我們可以用終端做很多事情，所以打開終端的最簡單方法是按 Control BackTick，或者如果您必須使用滑鼠，請在此處向上

（17：38） 終端，然後是新建終端，好吧，所以我要按 Ctrl 回勾，這是鍵盤上數位 1 左側的鍵，好吧，所以我又在 Windows 上，所以這出現在 PowerShell Windows 有 PowerShell 或命令行，在 Windows 上，如果你在 Linux 或 Mac OS 上，我實際上更喜歡 git bash，如果我們去這裡這個加上一個向下箭頭，我們可以選擇 PowerShell Command Prompt 或 Git Bash，所以我要選擇 Get Bash，我已經安裝了它，如果你還沒有

（18：09） 已安裝Bash別擔心，我在 Git 上有一個完整的視頻，我將向您展示如何安裝它，鏈接當然在下面的描述中，以便啟動一個新的Bash終端，我想選擇我的默認終端，所以我要去選擇預設配置檔，我要選擇 Git Bash 作為我的預設，讓我們繼續關閉這個 PowerShell，我們要去要關閉此bash，因此現在當我按下 Ctrl 反引號時，它將自動為我打開一個bash終端，因此我們同樣可以使用

（18：39） 終端：在某些時候，你必須使用它，你可以遍曆目錄、創建目錄、創建檔，你將使用它用於 node.js 和 npm，你將使用它進行 git 版本控制和許多其他事情。VS Code 是一個功能強大且用途廣泛的代碼編寫應用程式，它可以處理你想要使用的所有 Web 開發語言，那麼如果你剛剛開始，下一步該怎麼辦首先查看我的 HTML CSS 和 JavaScript 速成課程，我有一個完整的路線圖，您可以遵循，我將包含連結

（19：09） 在描述中，如果這個視頻有説明，請通過點讚來説明我，如果您還沒有訂閱更多這樣的視頻 [音樂]