More Related Content Similar to Visual Studio Code 快速上手指南 (20) More from Shengyou Fan (20) Visual Studio Code 快速上手指南4. Visual Studio Code
• 由 Microsoft 主導開發的編輯器
• 以 Electron 技術打造
• 內建語法提⽰示、版本控制及偵
錯⼯工具
• 跨平台、免費、開放源始碼
• ⽀支援外掛系統,可擴充功能
⺫⽬目前正式發佈 v1.1.1 穩定版
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
10. Visual
Studio
Code
簡易上⼿手指南
安裝指令列⼯工具
• Windows
- 安裝完⾃自動就會將 code 加⼊入環境變數
• Mac
- 打開 Command Palette,輸⼊入安裝指令
• Linux
- 安裝完⾃自動就會將 code 加⼊入環境變數
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"
}
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 跨欄選取
- ⌘ + ⌥ + ↑ 往上做跨欄選取
- ⌘ + ⌥ + ↓ 往下做跨欄選取
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
}
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 }"
25. 將檔案放⼊入 Stage 區
• 按加號
- 可將所有未追蹤的⼀一
次加⼊入 Stage 區
- 也可以針對單⼀一檔案
加⼊入 Stage 區
• 按減號
- 執⾏行反向動作
$
git
add
.
26. 將檔案放⼊入 Stage 區
• 按加號
- 可將所有未追蹤的⼀一
次加⼊入 Stage 區
- 也可以針對單⼀一檔案
加⼊入 Stage 區
• 按減號
- 執⾏行反向動作
$
git
add
.
30. 檔案狀態
• 切換到 git 側邊欄時,
可顯⽰示專案資料夾內各
檔案的狀態
- 紅⾊色 D:刪除
- 綠⾊色 A:新增
- 灰⾊色 U:未追蹤
- 藍⾊色 M:修改
$
git
status
40. Visual
Studio
Code
簡易上⼿手指南
裝備哪裡找?
★ 官⽅方網站: https://marketplace.visualstudio.com/VSCode
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",
}
45. 語法檢查
• 只要有指定 PHP 直譯
器做為 Linter,當在編
輯程式碼時,就可以做
語法檢查
• 可設定當 onSave 或
onType 做語法檢查
48. Visual
Studio
Code
簡易上⼿手指南
跳槽指南
• 敬牆頭草們!
- 從Vim 來的
- 從 emaces 來的
- 從 Sublime Text 來的
- 從 Atom 來的
- 從 PhpStorm 來的
- 從 Netbeans 來的
49. Visual
Studio
Code
簡易上⼿手指南
指令速查表
• 官⽅方⽂文件完整 keybinding 對照表
- https://code.visualstudio.com/docs/customization/
keybindings