[[407468]]

1.帶連字符的字體

在處理大型項(xiàng)目時(shí)，帶有連字的字體使代碼更干凈、更方便，您可以通過(guò)結(jié)合連字的特殊字體使您的編輯器體驗(yàn)更好。有幾種支持連字的字體可用，但您可以簡(jiǎn)單地堅(jiān)持使用經(jīng)典的 Fira Code。

要在 VS Code 中啟用連字，您只需在 VS Code 設(shè)置文件中添加**“editorLigatures”：true**。

2.彩虹縮進(jìn)

如果您使用 JavaScript 和 Python 編寫(xiě)代碼，則此 VS Code 擴(kuò)展會(huì)為文本前面的縮進(jìn)著色，每一步交替使用四種特殊顏色，那么此功能對(duì)于外觀整潔的代碼非常有用。

3.標(biāo)簽包裝

如果你厭倦了重復(fù)打字那么你應(yīng)該了解emmet，emmet允許你編寫(xiě)一個(gè)縮寫(xiě)的代碼并快速獲取返回的相應(yīng)標(biāo)簽。最新版本的 emmet 支持大多數(shù) Emmet 操作，包括擴(kuò)展 Emmet 縮寫(xiě)和片段。

要使用標(biāo)簽包裝：

• 選擇文本。
• 打開(kāi)命令面板。
• 執(zhí)行Emmet: Wrap with Abbreviation
• 輸入標(biāo)簽 div(或縮寫(xiě))
• 然后按 Enter。

4.Turbo Console.log()

[[407469]]

當(dāng)您只需要快速輸出某些內(nèi)容時(shí)，您應(yīng)該節(jié)省時(shí)間，而不是重復(fù)鍵入 console.log。Turbo Console Log 是 VS Code 中一個(gè)很棒的擴(kuò)展，它解決了這個(gè)問(wèn)題，它可以在下面的行中記錄任何變量，并在代碼結(jié)構(gòu)之后自動(dòng)添加前綴。

5.多光標(biāo)編輯

我個(gè)人喜歡 VS Code 中最有用的功能之一，通過(guò)多光標(biāo)編輯，您可以快速編輯多行。多光標(biāo)編輯有以下幾種方法：

• ALT-CLICK：如果你想在一個(gè)文件中插入多個(gè)不在連續(xù)行上的光標(biāo)，你只需簡(jiǎn)單地按住ALT并點(diǎn)擊每一行。
• CTRL-U：萬(wàn)一你點(diǎn)擊了錯(cuò)誤的行，又不想重新選擇行，那么只要按CTRL+U就可以撤銷(xiāo)上次的光標(biāo)操作。
• SHIFT-ALT：用方向鍵。如果你選擇了一個(gè)詞，并希望包括引號(hào)或它附近的任何東西，只需簡(jiǎn)單地使用SHIT+ALT與方向鍵來(lái)擴(kuò)大你的選擇區(qū)域。
• SHIFT-ALT-Drag：使用此組合鍵可以創(chuàng)建矩形選區(qū)。

6.Polacode

[[407470]]

如果您熟悉分享源代碼截圖的著名工具(Carbon.sh)，但所有這些工具都需要付出更多努力來(lái)構(gòu)建吸引人的源代碼截圖。Polacode 以非常簡(jiǎn)單的方式完成相同的工作，您可以使用 Carbon 中無(wú)法使用的默認(rèn)編輯器字體。

7.WakaTime(喚醒時(shí)間)

這個(gè)擴(kuò)展幫助你跟蹤你的指標(biāo)和有關(guān)你的編程分析，你還可以查看你經(jīng)常使用哪種編程語(yǔ)言。

8.排序

每當(dāng)您想對(duì)數(shù)據(jù)或變量列表進(jìn)行排序時(shí)，您只需選擇要排序的行并使用命令面板 (F1)，然后搜索排序。您將看到您可以選擇升序或降序排序。

9.注釋

添加注釋是開(kāi)發(fā)人員在團(tuán)隊(duì)中工作時(shí)經(jīng)常做的事情，在 VS Code 中，您可以眨眼注釋掉單行或多行。

盡管有兩種方法可以添加注釋。

• 您可以通過(guò)按 Ctrl 或 Cmd + / 對(duì)一行進(jìn)行注釋?zhuān)俅伟聪滤鼘⑷∠麑?duì)該行的注釋。
• 要?jiǎng)?chuàng)建注釋塊，請(qǐng)選擇您想要注釋的選項(xiàng)并按下 Shift+Alt+ A。

10.自定義側(cè)邊欄

在編寫(xiě)代碼時(shí)，您總是需要盡可能多的空間，您可以通過(guò)按 Ctrl 或 Cmd + B 關(guān)閉側(cè)邊欄，也可以再次按 Ctrl 或 Cmd + B 撤消側(cè)邊欄。此外，如果你想打開(kāi)它到一個(gè)特定的菜單，那么你可以使用下面給出的特定菜單的鍵盤(pán)快捷方式。

11.自定義片段

沒(méi)有人喜歡一遍又一遍地輸入相同的代碼，片段擴(kuò)展為我們做了這項(xiàng)工作。但有些時(shí)候，我們只是需要一個(gè)自定義的代碼段來(lái)使我們的工作更容易。在VS Code中，你可以創(chuàng)建自定義代碼片段，減少輸入相同代碼的重復(fù)。

要?jiǎng)?chuàng)建自定義代碼段：

• 轉(zhuǎn)到設(shè)置圖標(biāo)并選擇User Snippets，現(xiàn)在選擇您想要?jiǎng)?chuàng)建的片段的語(yǔ)言。
• 例如，如果您想為 JavaScript 項(xiàng)目創(chuàng)建自定義代碼段。您必須編寫(xiě)key/value對(duì)，其中key包含定義的數(shù)據(jù)。prefix(前綴)定義了代碼段的觸發(fā)詞，body(正文)是將要插入的代碼，description(描述)是可選的，由 IntelliSense 顯示。

原文：https://javascript.plainenglish.io/11-vs-code-features-tricks-you-should-know-as-a-developer-47e5ec0c362b

作者：Mohit