29 7 月, 2020

Visual Studio Code快速入門

By super

Hello 各位哥布林的好朋友,歡迎你們來一起學習10分鐘的Laravel知識,今天我們來學Visual Studio Code,如何透過它來讓我們開發Laravel更簡單。

在開始之前,如果你還沒有準備好Laravel的開發環境,也歡迎參考我的其他教學:Mac的Laravel環境建置 . Windows的Laravel開發環境建置

首先,其實有非常多的編輯器都能夠用來開發Laravel專案,但是我為何會推薦你使用Visual Studio Code呢?

第一,這是由微軟主導開發的編輯器,所以功能絕對足夠強大,而友善的圖形化介面也可讓你更好上手

第二,  它是跨平台的軟體,Mac和Windows都支持,而且原始碼是完全開放的。

第三,  軟體裏頭內建了外掛商店,方便你安裝外掛來讓你的編輯器更好用。
當然我知道,也有其他的編輯器同樣有類似這些的優點。

那麼,第四點是它不但好用而且免費,非常適合新手練功到上手實戰後都能夠持續的使用。

先來看一下Visual Studio Code的介面。主要分成了View Bar . Side Bar 以及Editor這三個區塊

View Bar裏頭有五個按鈕,功能分別是檔案總管 . 檔案查詢 . 版本控管 . 除錯 與 外掛商店。當你按了某個按鈕之後,Side Bar就會依據功能需要做切換。
Side Bar作用是呈現所選定功能相關的內容,比如檔案總管的話就是列出該資料夾內所有的檔案。
Editor編輯區是呈現編輯的檔案內容,支援多個頁籤呈現。

接著來看看另一個好用的功能:命令面板。當你按Ctrl + Shift + P就會開啟命令面板,在這裡可以快速的叫出你所需要的功能,可以提高你的開發效率,比如這裡可以變更編輯器的顯示語言(PS:如果你用的是Mac,請把Ctrl代換成Command

如果希望把顯示語言改成繁體中文,就選擇設定顯示語言,接著下載繁體語言包之後,設定以繁體中文來顯示即可。

接下來,我們就快速地看一些常用的使用小技巧:


開啟/編輯檔案
當View Bar選擇檔案總管時,點擊某個檔案時就可以在工作區開啟它,這個時候它就會以快覽模式來開啟在工作區,檔名的顯示是以斜體來呈現。快覽模式的特點是當你再點其他的檔案之後,該視窗就會切換成顯示新的檔案了。但是當你在點擊檔案時改成點兩下時,它就會以編輯模式來開啟在工作區,檔名的的顯示改以正體來呈現。編輯模式有別於快覽模式,當你再點其他檔案時,會開一個新的分頁來呈現新檔案。

另外,還有一種很方便可以用來開啟檔案的做法,就是透過檔名的模糊搜尋。按下快捷鍵Ctrl(Mac版本的Command鍵) + P,就會出現檔名搜尋工具,方便你快速地找出想要編輯的檔案

如果希望關閉當前的視窗,快捷鍵是Ctrl(Mac版本的Command鍵) + W
頁籤/視窗操作
當你有多個頁籤,該如何快速做切換呢,快捷鍵是Alt + 1~3
如果你想把某一個工作區分頁轉變成視窗,快捷鍵是Ctrl(Mac版本的Command鍵) + \

當你有多個視窗時,你同樣可以進行快速切換,快捷鍵是Ctrl + 1~3
跨欄選取
所謂跨欄選取,意思是編輯浮標可以不只一個,這樣你就能夠同時編輯多個地方,以提高你的開發效率。這邊介紹最簡單的一種作法,就是按住Alt鍵,然後在要編輯的地方點滑鼠左鍵,就會在該處生成一個編輯浮標

外掛商店
如果想要賦予你的Visual Studio Code更多強大的功能,View Bar的外掛商店能夠幫到你。只需要輸入想要的外掛關鍵字,找到之後按下Install按鈕就能夠輕鬆安裝囉。

下面列出一些開發網頁程式較為通用的外掛

  • Auto Close Tag 幫你加上網頁標籤的後半段
  • DotENV 優化.env檔案的顯示
  • Expand Selection To Scope 擴大選取範圍
  • File Utils 檔案工具
  • GitLens 強化Git功能
  • Git History 顯示Git歷程

假如你想要開發Laravel專案的話,下面也推薦一些好用的外掛

  • Laravel Artisan 能在命令列表下Artisan指令
  • Laravel 5 Snippets 提示Laravel語法
  • Laravel Blade Snippets 提示Blade語法
  • Laravel goto view 開啟所點擊的視圖檔
  • laravel-goto-controller 開啟所點擊的Controller檔案

以上就是今天要介紹給你的Visual Studo Code常用小技巧,建議你把這一篇加到你的最愛,需要的時候可以隨時回來查詢唷。
如果你想要了解更多的細節,比如這些外掛該如何使用的話,也歡迎你參考哥布林的完整實作課程,網址於此,裡面有更多的技巧等著你去學唷,我們下次再見