不可不知的4個妙招:像高級開發者一樣玩轉VSCode


不可不知的4個妙招:像高級開發者一樣玩轉VSCode

2020-12-13 讀芯術

全文共2980字,預計學習時長8分鐘

圖源:unsplash

VSCode是我們最常用的代碼編輯器之一,熟練使用VSCode能夠讓我們很大程度上提升編程效率。本文中筆者就將介紹一些VSCode的進階使用技巧。

多光標操作

有時,我們可能需要在不同的位置同時鍵入相同的內容。例如,在下面的代碼中,我們想要先爲第一、三、五個

  • 標籤添加屬性class=「odd」,然後爲第二、四、六個
  • 標籤添加屬性class=”even」。

    • Lorem,ipsumdolor。
    • Lorem,ipsumdolor。
    • Lorem,ipsumdolor。
    • Lorem,ipsumdolor。
    • Lorem,ipsumdolor。
    • Lorem,ipsumdolor。

    如何使其成爲下面的樣子呢?

    筆者曾經的做法是:在一個標籤中輸入class=”old」,接著將其複製粘貼到別處。後來,筆者學會了多光標輸入的技巧,工作效率飆升!

    具體來說,當按住鍵盤上的Alt鍵(在macOS中則是Option鍵)時,點擊其他區域來創建另一個光標。接著,在鍵盤上輸入的所有內容都會同時出現在每一個光標區域中。

    注意:

    · Windows:Alt鍵+滑鼠單擊

    · macOS:Option鍵+滑鼠單擊

    重命名符號

    我們在編寫代碼或文檔時,偶爾會發現一處拼寫錯誤,或是想要修改命名方式,因此通常需要批量變更一個單詞。假設有下列一段代碼,你想要把以下代碼段中所有的foo都改爲bar,你會怎麼做?

    函數foo(){

    // …

    } foo();

    foo();

    foo();

    如果逐一手動修改,不僅操作繁瑣費力,還容易遺漏。這種情況下,我們可以使用VSCode的重命名符號功能。

    選中文本並單擊右鍵時,就會出現這一選項。或者你也可以在選中文本後按F2快捷鍵。

    上下移動

    有時我們想要將代碼或文本整段向上或向下移動。這時,可以選中文本,接著:

    · Windows環境中,按Alt+↑將文本上移;按Alt+↓將文本下移。

    · macOS環境中,按Option + ↑將文本上移;按Option + ↓將文本下移。

    這些技巧能幫助你快速調整內容的順序。

    用戶代碼段

    編寫代碼時,我們一直會反覆用到一些代碼段。例如,HTML5文件中總是包含以下基本結構:

    在JavaScript中編寫for-i循環時,我們也總是會用到這些片段:

    for(讓i = 0; i <; i ++){

    }

    這樣的的例子不勝枚舉。如果我們在每次使用時都需要手動輸入這些片段,效率會十分低下。幸運的是,VSCode提供了自定義自動填充功能。

    來看看如何配置VSCode才能實現以上效果。

    生成配置文件

    VSCode通過讀取配置文件來實現上述效果。因此,首先需要生成一個配置文件。可以用以下方式來生成:

    · 第一步,打開用以生成配置文件的窗口:首選項(Preferences)->用戶代碼段(User Snippets)

    · 接著,VSCode會彈出下面的窗口:

    在這一窗口中,可以選擇現有的配置文件並進行修改,或者也可以生成新的配置文件。

    · 下面來創建一個新的配置文件。如果選中「新建全局代碼段文件(New GlobalSnippets file)」,就可以創建一個全局可用的配置文件。如果選中「新建代碼段文件以測試(New Snippets file for ‘test’)」,就可以一個創建本地可用的配置文件。這裡,創建一個本地可用的配置文件。

    · 下一步,你需要爲新建的文件命名:

    現在新建完成了一個配置文件。

    下面的動圖涵蓋了上述過程,以幫助讀者理解:

    設置(set-up)

    配置文件以JSON格式編寫,以下是一個簡單的例子:

    {

    “ html5自動完成”:{

    “ prefix”:“ html5”,

    “身體”: [

    ““,

    “,

    ““,

    “,

    ““,

    ““,

    ““,

    ““

    ]

    }

    }

    · 首先,「html5 autocomplete」的作用僅在於告訴程式設計師配置選項是什麼,並且你可以按照自己的想法編寫這個域。

    · 其次,「prefix」: 「html5」是定義的快捷指令。在文件中輸入html5這個詞時,VSCode將會自動爲我們完成這一段代碼。

    · “身體”: […]包含了我們需要編寫的代碼。因爲代碼可能有多行,所以它以數組的形式呈現。數組中的每個元素就代表了代碼中的一行。將上面的數組轉換爲正常形式的代碼,如下所示:

    現在我們有了基本的配置,接下來可以進行測試。

    作用域(Scope)

    配置文件起效了,但依舊有不足之處。通常只有HTML文件中才會用到html5autocomplete,而在編寫JavaScript文件時,不需要這個快捷指令。我們可以在配置文件中詳細規定這一配置的作用域,只需要在配置文件中添加”scope”:”html”。

    效果很好。現在,在JavaScript文件中,這一快捷指令將會自動失效。

    光標

    現在,重新測試一下自動完成(auto-complete)指令。你發現了什麼不足之處嗎?

    可以看出,當自動完成指令結束後,光標會自動停在代碼的末尾。然而,自動完成的代碼並不完整,我們還需要在中輸入特定的內容。因此,在自動完成之後,如果光標可以停留在<title>中間,就再好不過了。要做到這一點,只需要在配置文件中添加一個特殊變量$0。

    這樣,自動完成代碼後,光標就會自動地停留在$0位置。

    樣例

    現在,通過一個新樣例來回顧我們所學的內容。我們希望在JavaScript或TypeScript文件中輸入字符串fori時,VSCode能夠自動完成下列代碼:

    for(讓i = 0; i <; i ++){

    }

    另外,光標應當停留在i < 後,可以寫一個如下所示的配置文件:

    {

    “ for-i循環”:{

    “ prefix”:“ fori”,

    “ scope”:“ javascript,打字稿”,

    “身體”: [

    “for(let i = 0; i < $0;i++){",

    “}”

    ]

    }

    }

    這就是用戶代碼段的使用方式。這是筆者最喜歡的功能之一,相信它對讀者也很有幫助。有了這一功能,告別繁瑣方式,編程速度大大提升!

    留言點讚關注

    我們一起分享AI學習與發展的乾貨

    如轉載,請後台留言,遵守轉載規範