[ Laravel ] 初心者之路#04 – 工具準備 (VS Code, Git)

所謂工欲善其事,必先利其器,初心者要練等打怪,也要先有武器裝備。今天要跟各位介紹的,是我們在開發專案時會使用到的工具,包含了文字編輯器- Visual Studio Code,以及版本控制系統- Git。

  • Visual Studio Code

Visual Studio Code,簡稱VS Code,一個由微軟開發的文字編輯器,而且它是完全免費、開源的軟體。

類似的工具還有像Atom, Sublime, Notepad++…不過筆者使用過後覺得VS Code是最好用的(馬上從Sublime跳槽XD)。當然如果你已經有習慣的編輯器,就繼續使用吧。

  • Git

Git是一種版本控制系統(Version Control),可以對你的專案進行檔案版本控管,沒有接觸過的人從文字上可能會有點難以理解,讓我們換個方式來介紹。

當你的專案有使用Git時,你就像擁有了一台時光機,可以將專案回朔到過去的某個時間點。所以,如果某天專案炸了,你可以將它回到正常的時候。

 

安裝VS Code

到VS Code的官網下載你系統版本的安裝檔

https://code.visualstudio.com/

vscode_wesite

 

安裝的過程不斷的下一步就好

vscode_installation_001

 

除了這邊

vscode_installation_002

將其他的4個選項都打勾

 

安裝Git

到Git的官網下載你系統版本的安裝檔

https://git-scm.com/

git_website

 

Git安裝的過程也是不斷的下一步就好

git_installation_001

 

除了這邊

git_installation_002

我將Git預設編輯器設為VS Code,你也可以保留預設的Vim繼續下一步

 

VS Code介面

vscode_start這是VS Code的畫面,它裡面已經直接整合了Git,同時還提供偵錯的功能,實在強大。

下面要跟各位介紹初次使用VS Code可以做哪些設定,讓我們在開發專案時更加方便!

 

樣式設定

長期使用的編輯器當然要看得順眼,VS Code提供了一些預設的樣式供你選擇,你可以設定自己喜歡的風格

vscode_theme

如果預設沒有你喜歡的,你也可以到VS Code Marketplace找找喔!

https://marketplace.visualstudio.com/search?target=vscode&category=Themes&sortBy=Downloads

 

使用者設定

vscode_user-setting_001

 

vscode_user-setting_002

在這邊可以看到VS Code有非常多的設定可以讓使用者自行客制化,我調整了3個設定讓之後的開發比較方便:

"files.autoSave": "onFocusChange",     //當焦點離開VS Code後,將自動儲存檔案

"php.validate.run": "onType",          //在輸入時自動驗證php的語法

"editor.mouseWheelZoom": true,         //可以用ctrl+滑鼠滾輪去放大縮小

其他設定有興趣的人可以去看看唷!

 

編輯器的語系設定

有些人可能比較習慣英文的介面(像是我XDD),這邊提供更換語系的方式

vscode_language-setting_001

 

vscode_language-setting_002

按下Ctrl+Shift+P可以叫出指令面板,搜尋language

將zh-TW改為en,並且重啟VS Code就可以變成英文介面囉!

 

Plugins安裝

VS Code的marketplace提供了非常多的plugins可以下載,讓你的VS Code更加強大。

你可以在網頁瀏覽(https://marketplace.visualstudio.com/),也可以直接透過VS Code的Plugins分頁瀏覽。

筆者這邊推薦幾個方便laravel開發的plugin給各位參考

vscode_plugin_php-intellisense

PHP IntelliSense – 提供語法提示、自動完成、尋找參考…等等,就是可以加速你寫php的一個工具。

 

vscode_plugin_laravel-snippets

Laravel 5 Snippets – 讓你敲鍵盤幾下,就寫出laravel的語法片段,開發Speed Up!

(剛開始還是會讓各位打完整的語法,之後才會用上這個)

 

vscode_plugin_laravel-blade-snippets

Laravel 5 Blade Snippets – 讓你敲鍵盤幾下,就寫出laravel blade的語法片段,開發Speed Up!

(剛開始還是會讓各位打完整的語法,之後才會用上這個)

 

vscode_plugin_laravel-artisan

Laravel Artisan – 讓你可以透過VS Code的指令列,快速執行Laravel Artisan的指令。

 

VS Code其他功能介紹

VS Code還有一些方便的小功能我們之後會用到,這邊跟大家介紹一下

  • 右鍵快速開啟專案資料夾

vscode_openhere_001

直接在檔案總管瀏覽時右鍵選擇Open with Code,就可以直接開啟專案囉!

vscode_openhere_002

從左側就可以看到專案中所有的目錄及檔案,並且點擊就可以直接開啟唷!

 

  • 整合系統的命令列

還記得我們之前都需要叫出CLI來輸入一些指令,VS Code直接把CLI整合進入VS Code裡面,只需要按下Ctrl+` 就可以叫出來囉!

vscode_cli

 

Git簡單教學

還記得剛才安裝的git嗎? 讓我們現在來將專案加入git的版本控制之中吧!

首先我們要讓專案進行git的初始化,在VS Code的CLI輸入:

git init

git init

此時專案已經完成初始化,你會發現VS Code變得不太一樣了,旁邊的分頁中的檔案都變成綠色,Git分頁的Icon也出現了數字。

這是因為初始化之後,git會開始追蹤檔案的變化,而專案中的檔案、目錄對於git來說都是新的,所以會以綠色來做顯示。

 

然而眼尖的你可能會發現,vendor目錄與.env檔都沒有變成綠色,這個就要說到.gitignore這個檔案啦!

git_ignore

 

.gitignore如同它的名字一樣,內容中紀錄了在版本控制時需要被忽略的檔案、目錄。通常使用git時,除了使用它的版本控制功能外,我們也會將專案push上雲端與其它人共同開發,所以會盡可能減少同步時的頻寬,僅同步那些需要被同步的資料。

通常會被忽略的檔案/目錄主要有幾種:

  1. 自動被產生的檔案/目錄,而且不重要可以被忽略
  2. 可以透過其他方式自動產生的檔案/目錄,像是vendor目錄,它可以透過json的內容去自動安裝套件
  3. 根據系統環境所設置的設定檔,因為不同的系統下可能需要不一樣的設定,而且這種設定檔中可能包含一些機密的設定,像是.env檔

 

好的,除了gitignore中的檔案、目錄外,其他的都等著被我們加入暫存(Stage),然後提交版本(Commit)到儲存庫(Repository)。

 

首先先將所有的檔案都加入暫存(Stage),輸入:

git add .

(那個 dot 點 . ,是代表所有還沒被加入暫存的檔案)

 

接著提交版本(Commit)到儲存庫(Repository),輸入:

git commit -m "Initial"

 

Done! 恭喜你透過CLI完成了第一個Commit

此時你會看到VS Code的檔案管理都已經沒有綠色的了

你可以試著在CLI輸入

git log

這個指令可以看到提交過的版本資訊,你應該可以看見剛剛的”Initial” Commit

 

今天的課程就到這裡

篇幅的原因Git的部分稍稍帶過,想要更加了解的同學可以到網路上搜尋「Git教學」,就可以找到非常非常多的詳盡教學囉!

 

下一堂課我們要來討論Laravel的Route機制

See you!

 

Leave a Comment