1.
Visual Studio Code
快速上⼿手指南
2016/05/28
范聖佑
Shengyou
Fan
Laravel
⾼高雄社群⼩小聚

2.
范聖佑
@shengyou
http://shengyoufan.com
https://www.facebook.com/shengyoufan
得寬科技 研究員
Laravel 台灣 傳教士
Laravel 道場 作者

3.
該⽤用 Editor 還是 IDE？
IDEEditor
Editor 以上、IDE 未滿

4.
Visual Studio Code
• 由 Microsoft 主導開發的編輯器
• 以 Electron 技術打造
• 內建語法提⽰示、版本控制及偵
錯⼯工具
• 跨平台、免費、開放源始碼
• ⽀支援外掛系統，可擴充功能
⺫⽬目前正式發佈 v1.1.1 穩定版

5.
Visual
Studio
Code
簡易上⼿手指南
綜覽VS Code
• 安裝VS Code
• 基礎操作
• 版本控制
• 客製化選項
• PHP 開發整合

6.
安裝VS Code
- 安裝．啟動．更新 -

7.
Visual
Studio
Code
簡易上⼿手指南
系統需求
• 硬體
- 1.6 GHz CPU 以上
- 1GB 記憶體 (!)
- 200 MB 硬碟空間
• 平台
- Windows 7 以上 + .NET Framework 4.5
- Mac OS XYosemite 以上
- Linux (Debian 及 Red Hat 系列)
★ 官⽅方⽂文件： https://code.visualstudio.com/docs/supporting/requirements

8.
Visual
Studio
Code
簡易上⼿手指南
下載並安裝
• Windows
- 下載 .exe 檔後下⼀一步到底
• Mac
- 下載 .dmg 檔後把 .app 拖曳到應⽤用程式資料夾
• Linux
- 下載安裝檔
★ 官⽅方⽂文件： https://code.visualstudio.com/Docs/editor/setup
sudo
dpkg
-­‐i
<file>.deb
sudo
yum
install
<file>.rpm
sudo
dnf
install
<file>.rpm

9.
⼯工作區
Viewbar
Editor
Sidebar
Statusbar

10.
Visual
Studio
Code
簡易上⼿手指南
安裝指令列⼯工具
• Windows
- 安裝完⾃自動就會將 code 加⼊入環境變數
• Mac
- 打開 Command Palette，輸⼊入安裝指令
• Linux
- 安裝完⾃自動就會將 code 加⼊入環境變數

11.
Command Palette
⌘+⇧+P

12.
Visual
Studio
Code
簡易上⼿手指南
從指令列啟動
• 先開啟 Terminal 應⽤用程式
• 切換⼯工作⺫⽬目錄
• 使⽤用 code 全域指令開啟
$
cd
~/Code
$
code
.

13.
Visual
Studio
Code
簡易上⼿手指南
切換語系
• VS Code 預設會⽤用系統語系做為介⾯面語系
• 內建已有繁體中⽂文語系
• 但…建議切換成英⽂文版 (!)
• 先 ⌘ + ⇧ + P 再輸⼊入 language
{
//
Defines
VSCode's
display
language.
//
Changing
the
value
requires
to
restart
VSCode.
"locale":"en"
}

14.
⾃自動更新
⾃自動更新提⽰示

15.
基礎操作
- 編輯．視窗．設定 -

16.
Visual
Studio
Code
簡易上⼿手指南
開啟/編輯檔案
• 從下拉式選單開啟對話框開檔
• 從 Sidebar 點選檔案列表，開啟在右邊 Editor 區塊
• ⌘ + P 輸⼊入檔名，依檔名模糊⽐比對後選擇
• ⌘ + W 關閉檔案
• ^ [+ shift] + Tab 切換最近開啟的檔案

17.
Visual
Studio
Code
簡易上⼿手指南
視窗操作
• ⌘ + 切分將現有視窗
• 在 Sidebar 對檔名按 ⌘ + Click，於分割視窗開啟
• ⌘ + 1~3 切換⼯工作視窗

18.
Visual
Studio
Code
簡易上⼿手指南
選取與跨欄編輯
• 快速選取
- ⌘ + D 選取相同字串
• 跨欄編輯
- ⌥ + Click 跳點選取
- ⇧ + ⌥ + Click 跨欄選取
- ⌘ + ⌥ + ↑ 往上做跨欄選取
- ⌘ + ⌥ + ↓ 往下做跨欄選取

19.
使⽤用者設定

20.
Visual
Studio
Code
簡易上⼿手指南
⾃自動存檔
• 讓檔案⾃自動存檔，不⽤用⼀一直按 ⌘ + S
{
//
Controls
auto
save
of
dirty
files.
Accepted
values:
"off",
"afterDelay",
"onFocusChange".
If
set
to
"afterDelay"
you
can
configure
the
delay
in
"files.autoSaveDelay".
"files.autoSave":
"off",
//
Controls
the
delay
in
ms
after
which
a
dirty
file
is
saved
automatically.
Only
applies
when
"files.autoSave"
is
set
to
"afterDelay"
"files.autoSaveDelay":
1000
}

21.
版本控制
- 整合 -

22.
Visual
Studio
Code
簡易上⼿手指南
• VS Code 預設使⽤用 PATH 裡的 git，因此要先裝 git
• 若是不想⽤用 PATH 裡的，可以指定路徑
客製化 git 設定
{
//-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
Git
configuration
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
//
Is
git
enabled
"git.enabled":
true,
//
Path
to
the
git
executable
"git.path":
null,
//
Whether
auto
fetching
is
enabled.
"git.autofetch":
true,
}

23.
Visual
Studio
Code
簡易上⼿手指南
git 設定
• ⾸首次使⽤用前，該設定的 git 使⽤用者設定別忘了！
$
git
config
-­‐-­‐global
user.name
"{請寫⾃自⼰己的名字}"
$
git
config
-­‐-­‐global
user.email
"{請改成⾃自⼰己的 email }"

24.
初始化
• 先⽤用VS Code 開啟專案
資料夾
• 切換到 git 側邊欄
• 點選初始化
$
git
init

25.
將檔案放⼊入 Stage 區
• 按加號
- 可將所有未追蹤的⼀一
次加⼊入 Stage 區
- 也可以針對單⼀一檔案
加⼊入 Stage 區
• 按減號
- 執⾏行反向動作
$
git
add
.

26.
將檔案放⼊入 Stage 區
• 按加號
- 可將所有未追蹤的⼀一
次加⼊入 Stage 區
- 也可以針對單⼀一檔案
加⼊入 Stage 區
• 按減號
- 執⾏行反向動作
$
git
add
.

27.
提交版本
• 確認加⼊入 Stage 區的檔
案內容
• 輸⼊入提交訊息
• 按下打勾按鈕確認提交
(快速鍵 ⌘ + Enter)
$
git
commit
-­‐m

28.
邊欄提⽰示
• 編輯檔案時會⾃自動在邊
欄提⽰示該⾏行的變更
- 綠⾊色光條：新增
- 藍⾊色光條：修改
- 紅⾊色箭頭：刪除
$
git
diff

29.
檔案⽐比對
$
git
diff
{file}

30.
檔案狀態
• 切換到 git 側邊欄時，
可顯⽰示專案資料夾內各
檔案的狀態
- 紅⾊色 D：刪除
- 綠⾊色 A：新增
- 灰⾊色 U：未追蹤
- 藍⾊色 M：修改
$
git
status

31.
還原檔案
• 當滑⿏鼠移上⾄至檔案時，
可以點選還原按鈕，就
可以將檔案回復成未修
改前的版本
$
git
checkout

32.
直接下 git 指令
可⽤用快速鍵 ⌘ + ⇧ + P
開啟 Command Palette
即可直接下 git 指令

33.
客製化
- 佈景主題．快速鍵．擴充 -

34.
佈景主題
先 ⌘+⇧+P 再輸⼊入 theme

35.
佈景主題
切換不同主題，即時預覽效果

36.
快速鍵
先 ⌘+⇧+P 再輸⼊入 key

37.
⾃自定快速鍵
⌘+K 兩次再填⼊入設定
★ 官⽅方⽂文件： https://code.visualstudio.com/docs/customization/keybindings

38.
擴充功能
先 ⌘+⇧+P 再輸⼊入 ext

39.
安裝擴充功能
★ 官⽅方網站： https://draculatheme.com/visual-studio-code/
ext
install
theme-­‐darcula

40.
Visual
Studio
Code
簡易上⼿手指南
裝備哪裡找？
★ 官⽅方網站： https://marketplace.visualstudio.com/VSCode

41.
整合 PHP
- 語法⽀支援．提⽰示．檢查 -

42.
Visual
Studio
Code
簡易上⼿手指南
• VS Code 預設使⽤用 PATH 裡的 PHP interpreter
• 若是不想⽤用 PATH 裡的，可以指定路徑
客製化 PHP 設定
{
//-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
PHP
Configuration
options
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
//
Whether
php
validation
is
enabled
or
not.
"php.validate.enable":
true,
//
Points
to
the
php
executable.
"php.validate.executablePath":
null,
//
Whether
the
linter
is
run
on
save
or
on
type.
"php.validate.run":
"onSave",
}

43.
語法⾼高亮度
• VS Code 內建就有語法
⾼高亮度功能，可將 PHP
程式碼上⾊色，⽅方便編寫
程式時判讀

44.
語法提⽰示
• 只要將編輯語法切換為
PHP 後，輸⼊入 PHP 內
建函式名稱時，會⾃自動
列出可能的函式提⽰示，
按下 Enter 鍵即會⾃自
動補完
• 可按快速鍵 Ctrl
+
Space 就依照當下編輯
脈絡進⾏行提⽰示

45.
語法檢查
• 只要有指定 PHP 直譯
器做為 Linter，當在編
輯程式碼時，就可以做
語法檢查
• 可設定當 onSave 或
onType 做語法檢查

46.
程式碼⽚片段
• 內建即⽀支援 code block
(snippets)，當程式碼提
出現 code block 標記時
按下 Tab 鍵，即會⾃自
動輸⼊入⼀一塊程式碼⽚片段

47.
⼼心動了嗎？
- 跳槽指南 -

48.
Visual
Studio
Code
簡易上⼿手指南
跳槽指南
• 敬牆頭草們！
- 從Vim 來的
- 從 emaces 來的
- 從 Sublime Text 來的
- 從 Atom 來的
- 從 PhpStorm 來的
- 從 Netbeans 來的

49.
Visual
Studio
Code
簡易上⼿手指南
指令速查表
• 官⽅方⽂文件完整 keybinding 對照表
- https://code.visualstudio.com/docs/customization/
keybindings

50.
Q & A
謝謝聆聽．歡迎互動