<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          分享10個必備的VS Code技巧和竅門,提高你的開發(fā)效率

          共 4689字,需瀏覽 10分鐘

           ·

          2023-09-06 15:52


          你知道全球73%的開發(fā)者都依賴于同一個代碼編輯器嗎?是的,2023年Stack Overflow開發(fā)者調(diào)查結(jié)果已經(jīng)出來了,而且再次證明,Visual Studio Code是迄今為止使用最廣泛的開發(fā)環(huán)境。

          我們都知道原因:太棒了。

          但是我們是否充分發(fā)掘了它的潛力?在本文中,我們揭示了一些令人信服的VS Code功能,包括增強本地源代碼控制、動畫打字和快速刪除行等。讓我們開始使用它們,以實現(xiàn)比以往更快的編碼目標(biāo)。

          1. 時間線視圖:本地源代碼控制

          時間線視圖為我們提供了本地源代碼控制。

          我們中的許多人都知道Git和其他源代碼控制工具的用處,它們幫助我們輕松追蹤文件變更并在需要時恢復(fù)到之前的某個點。

          所以在VS Code中的時間軸視圖提供了一個自動更新的時間軸,顯示與文件相關(guān)的重要事件,例如Git提交、文件保存和測試運行。

          展開此視圖以查看與當(dāng)前文件相關(guān)的事件快照列表。這里包括文件保存以及文件被暫存的Git提交。

          將鼠標(biāo)懸停在快照項目上,即可查看 Visual Studio Code 創(chuàng)建快照的日期和時間。

          選擇一個快照項目,查看差異視圖,顯示快照時間的文件與當(dāng)前文件之間的更改。

          2. 自動保存:不再需要按Ctrl + S

          你能數(shù)一下你用過這個快捷方式的次數(shù)嗎?你現(xiàn)在可能已經(jīng)下意識地使用它了。自動保存功能會在我們編輯文件時自動保存,無需手動保存。使用自動保存功能,我們可以避免 Ctrl + S 疲勞,節(jié)省時間,并確保始終使用文件的最新更改。雖然它并不完美,但權(quán)衡利弊的決定在你手中。

          使用文件 > 自動保存輕松啟用此功能。

          3. 使用命令面板進行任何操作

          除了輸入之外,你在VS Code中做的幾乎所有操作都是“命令”。

          命令讓我們在編輯器中完成任務(wù),它們包括與文件相關(guān)的命令、導(dǎo)航命令、編輯命令和終端命令,每個命令都經(jīng)過最佳設(shè)計,以增強您的編輯體驗的不同方面。

          所以,通過命令面板,我們只需搜索命令并選擇執(zhí)行相關(guān)操作。要打開命令面板,請使用以下鍵盤快捷鍵:

          • Windows/Linux: Ctrl + Shift + P

          • Mac: Shift + Command+ P

          正如你猜對的那樣,右側(cè)的鍵盤快捷鍵是使用鍵盤更快地運行命令的方法。

          命令面板相比快捷鍵的主要優(yōu)點在于當(dāng)存在沒有快捷鍵的命令,或者你正在尋找一個你不確定是否存在的命令時。

          4、快速轉(zhuǎn)到文件

          這個鼠標(biāo)太慢了。

          是的,你可以在資源管理器窗格中點擊文件,但為了更快的選擇,可以使用 Ctrl + P 來搜索并打開項目中的特定文件。

          按住 Ctrl 并按下 Tab 以在編輯器實例中循環(huán)瀏覽當(dāng)前打開的文件列表。

          你甚至可以使用 Alt + Left 和 Alt + Right 來快速瀏覽這些打開的文件。

          所有這些方法都比使用光標(biāo)更快地訪問文件。

          5. 快速跳轉(zhuǎn)指定行

          跳起來,不要滾動。

          在調(diào)試過程中,快速導(dǎo)航到某一行是非常寶貴的,特別是當(dāng)你需要在特定行號遇到錯誤時。通過跳轉(zhuǎn)到這些行,你可以在特定的上下文中檢查代碼,評估變量并解決問題。

          使用 Ctrl + G 鍵盤快捷鍵來完成此操作。

          6. 快速刪除該行

          你現(xiàn)在已經(jīng)到了這一行,如果你想刪除它怎么辦?

          你會拖拽并選中文本然后按下刪除鍵嗎?你會不知疲倦地按下退格鍵直到每個字符都消失嗎?

          或者,你會使用 Ctrl + Shift + K 快捷方式在幾秒鐘內(nèi)快速刪除那些行和其他幾十行嗎?

          7. 享受使用流暢的光標(biāo)進行打字

          VS Code有一個平滑光標(biāo)功能,當(dāng)光標(biāo)移動時會有動畫效果,就像在MS Word中一樣。這使得打字感覺更流暢和精致,同時在瀏覽代碼行并將光標(biāo)放置在不同位置時,給我們帶來更平滑和自然的感覺。

          要打開它,請在命令面板中打開設(shè)置UI并搜索“smoot caret”。

          我們正在尋找 Editor: Cursor Smooth Caret Animation 設(shè)置,它有3個可能的選項:

          off: 沒有流暢的光標(biāo)動畫

          explicit:只有在我們明確將光標(biāo)放在代碼的某個位置時,才會使其動起來。

          on :平滑的光標(biāo)動畫始終啟用 - 包括在打字時。

          將其設(shè)置為 on 以獲得完整的視覺體驗。

          8. 快速格式化代碼

          格式化是通過以結(jié)構(gòu)化和一致的方式組織代碼來提高代碼的可讀性。

          如果你一直在手動操作,你需要知道有更好的方法。

          是的,您需要使用 Format Document 命令自動開始格式化代碼,該命令可以在命令面板中輕松訪問。根據(jù)當(dāng)前文件的語言,將使用特定的“默認(rèn)”格式化程序使用各種縮進、行長度、大括號等規(guī)則來格式化代碼。

          雖然有一個相當(dāng)不錯的內(nèi)置JS/TS格式化工具,但為了更強大的解決方案,我強烈推薦使用Prettier擴展。

          安裝后,您將把它設(shè)置為默認(rèn)格式化程序。

          當(dāng)您使用手動保存而不是自動保存時,有一個功能您應(yīng)該啟用,以使格式設(shè)置變得更加容易:

          Editor: Format On Save : "保存時格式化文件。必須有可用的格式化工具,文件不能在延遲后保存,編輯器必須正在關(guān)閉中。默認(rèn)情況下禁用。"

          所以,當(dāng)你在保存文件時,VS Code會自動使用當(dāng)前默認(rèn)的格式化程序?qū)δ愕拇a進行格式化,就像你在上面的演示中看到的那樣。

          當(dāng)你進行自動保存時,每隔一段時間都要打開命令面板來進行格式化會變得很繁瑣。這就是鍵盤快捷鍵的用途所在:

          Windows: Shift + Alt + F

          Mac: Shift + Option + F

          Linux: Ctrl + Shift + I

          我使用的是Windows系統(tǒng),個人而言,我不喜歡這個默認(rèn)的鍵盤快捷鍵;自動保存讓我不時需要重新格式化,而Shift + Alt + F用久了也變得非常痛苦。

          所以我將其更改為 Ctrl + D, Ctrl + D - 一個更容易按下和記住的鍵盤快捷鍵組合,并且沒有沖突的按鍵綁定。我建議你也這樣做。

          9. 使用多光標(biāo)編輯功能節(jié)省時間

          在我最早使用VS Code的日子里,多光標(biāo)編輯是一個令人驚嘆的時刻,它允許你在不同的位置放置多個光標(biāo),并多次刪除或插入相同的文本。這大大加快了編輯速度,極大地提高了生產(chǎn)力,因為我們可以通過快速創(chuàng)建代碼高效地完成重復(fù)的任務(wù)。

          當(dāng)然,在編輯時,總是至少有一個光標(biāo)。使用 Alt + Click 來添加更多。

          您還可以輕松地在當(dāng)前行的上方或下方直接添加光標(biāo),使用 Ctrl + Alt + Down 或 Ctrl + Alt + Up 。

          這些快捷方式分別調(diào)用 Add Cursor Below 和 Add Cursor Above 命令。

          10、快速創(chuàng)建新文件夾/文件

          沒有一的項目不需要創(chuàng)建新的文件夾和文件,如果有一種加速文件/文件夾創(chuàng)建的方法,節(jié)省下來的時間將累積起來,為我們提供顯著的生產(chǎn)力提升。

          如果你一直在使用VS Code的新建文件和新建文件夾按鈕來創(chuàng)建新的文件和文件夾,那么是有辦法的。

          不必不停地移動鼠標(biāo)來定位那些小按鈕,你知道嗎?你只需雙擊資源管理器面板就可以創(chuàng)建一個新文件。

          要不要新建一個文件夾?嗯,沒有文件的文件夾就什么都不是。當(dāng)你創(chuàng)建一個新文件時,你可以輕松使用 / 字符來表示層級關(guān)系,并創(chuàng)建新的文件夾和子文件夾來容納該文件。

          作為一名曾經(jīng)的Atom粉絲,我很快就習(xí)慣了使用 A 和 Shift + A 快捷鍵來分別創(chuàng)建新文件和文件夾;我知道我該怎么做。

          由于 A 和 Shift + A 顯然是用于編碼的鍵,我在這里包含了 when 值,以確保它們只在資源管理器窗格具有焦點且當(dāng)前編輯器中沒有活動光標(biāo)時創(chuàng)建新文件/文件夾。

          因此,要在打字時使用這些快捷鍵,您必須首先專注于資源管理器窗格;單擊它或使用 Ctrl/Command + Shift + E 。

          總結(jié)

          • 在資源管理器窗格中,默認(rèn)情況下啟用時間線視圖的本地源代碼控制。

          • 自動保存帶有 File > Autosave 的文件。

          • 使用 Ctrl + Shift + P 或 Shift + Command + P 在命令面板中運行命令。

          • 打開一個帶有 Ctrl + P 的文件,使用 Alt + Left/Right 或 Ctrl + Tab 在打開的文件之間切換。

          • 去到一個帶有 Ctrl + G 的行。

          • 刪除一行帶有 Ctrl + Shift + K 的內(nèi)容

          • 通過 Editor: Cursor Smooth Caret Animation 設(shè)置實現(xiàn)流暢的打字體驗。

          • 使用“格式化文檔”命令對代碼進行格式化,使用Prettier,將快捷鍵更改為 Ctrl + D, Ctrl + D

          • 使用 Alt + Click, Ctrl + Alt + Up/Down 可以同時添加多個光標(biāo),一個在上方,一個在下方

          • 在Windows/Mac中,使用Alt/Option + 上/下鍵將一行向上或向下移動

          • 通過雙擊資源管理器窗格創(chuàng)建一個新文件,或者設(shè)置一個自定義的鍵盤快捷鍵。

          結(jié)束

          由于文章內(nèi)容篇幅有限,今天的內(nèi)容就分享到這里,文章結(jié)尾,我想提醒您,文章的創(chuàng)作不易,如果您喜歡我的分享,請別忘了點贊和轉(zhuǎn)發(fā),讓更多有需要的人看到。同時,如果您想獲取更多前端技術(shù)的知識,歡迎關(guān)注我,您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容,敬請期待。

          瀏覽 1992
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  在线成人黄 | 高清无码内射视频 | av无码中文字幕 www.久久99 | 人人干人人草 | 国产av佳作老友重逢 相干恨晚 |