---

安裝環境 Windows 10

在官網下載安裝 https://code.visualstudio.com/



# 安裝 Extensions 延伸模組

安裝中文化模組

點左邊 Extensions 延伸模組，搜尋 Chinese 安裝繁體中文模組


點 Ctrl+Shift+P 搜尋 display，
選 Configure Display Language 可切換顯示顯示語言


安裝 PHP All-in-One 模組



# 儲存工作區

使用「檔案」/「開啟資料夾」打開一個專案的資料夾
例如開啟一個新專案資料夾「vscode-test」


新增一個檔案看看


使用「檔案」/「另存工作區」，將工作區設定檔存在專案目錄下的「.vscode/」


可以看到專案資料夾被放到了工作區
用「檔案」/「將資料夾新增至工作區」，可以把其他專案的資料夾也放進來
之後這個工作區的設定、檔案的開啟狀態、要啟用的模組就會被儲存下來
使用「檔案」/「從檔案開啟工作區」就可以切換不同的工作狀態

或是安裝「Project Manager」模組


安裝後左邊會多一個 Project Manager 的圖示


點「Project Manager: Save Project」後，
輸入專案名稱，例如「vscode-test」

用這個就不用儲存工作區，且可以方便的切換不同的專案了

要改成繁體中文，可以搜尋模組的使用者設定檔 C:\Users\{username}\.vscode\extensions\alefragnani.project-manager-12.7.0\package.nls.zh-cn.json
將內容的簡體中文改成繁體中文後，另存成 package.nls.zh-tw.json，重啟 VS Code 即可


# 功能設定

左下角可登入帳號，登入後設定值可以同步至其他裝置


點設定，或快速鍵 Ctrl+,


如果要設定 php 執行檔路徑與 php 版本的話
在設定搜尋 php: executable
只要設定目前這個工作區的話選「工作區」


點「在 settings.json 內編輯」加上 php 的執行路徑，例如
"php.validate.executablePath": "E:\\wamp\\bin\\php\\php5.6.40\\php.exe"
然後在 PHP: Version 輸入 PHP 的版本

或是打開一個 .php 檔後，點右下角顯示的 PHP 版本，就可以選擇


設定文字編輯器自動換行，搜尋 word wrap
設定為 wordWrapColumn，超過80字元的時候換行


或是使用 Ctrl+Shift+P 輸入 word wrap 切換設定


搜尋 Editor: Links
可關閉編輯器偵測連結

搜尋 Editor: Format On Paste
貼上程式時自動格式化

搜尋 Workbench › Editor: Enable Preview


點選檔案後會顯示內容，上面紅框的檔名為斜體代表為預覽模式
再點選其他檔案就會換成顯示其他檔案的內容，以避免開啟太多分頁
要點兩下開啟或編輯內容才會固定住

搜尋 Sticky Scroll 可開啟自動將類別或函數開頭固定在上方


搜尋 Workbench Editor: Wrap Tabs
可設定分頁很多時使用多行顯示


程式碼折疊
在多行註解或函數的左邊，滑鼠移過去會出現向下箭頭，點一下即可折疊

或使用自訂折疊標記，例如 PHP 可以用
#region 從這邊開始
……
#endregion


# 快速鍵設定

快速鍵對照表參考:
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
https://ithelp.ithome.com.tw/articles/10237385
https://summer10920.github.io/2020/10-23/article-vscode/

點左下角的齒輪/鍵盤快速鍵 Ctrl+K Ctrl+S


輸入命令描述或快速鍵可搜尋

點「變更按鍵...」更改快速鍵
點「新增按鍵...」可新增另一個快速鍵
點「移除按鍵...」移除這個快速鍵

Ctrl+R 開啟其他之前開過的專案
Ctrl+P 開啟專案中的檔案

瀏覽視窗

Ctrl+P 輸入 @ 可選擇目前檔案中的符號(function 或 class)
Ctrl+G 前往輸入的行數
Alt+左/右 前一個或後一個游標瀏覽處
Ctrl+1,2,3 切換到第幾個視窗群組
Ctrl+Tab 在視窗群組中切換視窗

編輯器

Ctrl+Alt+上/下 移動這一行到上一行或下一行 (預設是 Alt+上/下)
移除Ctrl+Alt+上/下原本的功能(在上/下一行加入游標)
Shift+Alt+上/下 複製這一行到上一行或下一行

Shift+Enter 下方新增一行 (預設是Ctrl+Enter)
editor.action.inertLineAfter

Shift+Delete 刪除這一行

Ctrl+X, Ctrl+C 剪下/複製在未選取字串時，會整行剪下/複製

Ctrl+D 選取目前游標所在的字串，再按一次就會同時選取下一個相同的字串，此時可同時修改每個選取的字串

使用 F7 / shift+F7 可移動到下一個/上一個變數的位置
editor.action.wordHighlight.next/prev
新增另一個快速鍵為 Alt+下/上，移除原本的功能(移動這行到下/上一行)

對變數按 F2 可更新所有位置的名稱
如果是全域變數的話，輸入新的名稱後按 Shift+Enter 可預覽變更的範圍

Ctrl+F2 同時選取所有位置

游標所在的字串或變數可使用 ctrl+f 搜尋後，Enter / shift+Enter 移動到下一個/上一個


# 設定 SFTP 上傳

安裝 SFTP 模組


開啟專案資料夾
Ctrl+Shift+p 輸入「SFTP: config」
會在專案資料夾下新增 /.vscode/sftp.json

host 輸入要上傳的主機位址
username 輸入用ssh登入主機的帳號
privateKeyPath 輸入ssh登入私鑰的檔案路徑
注意路徑的反斜線 \ 要用 \\ 或改成斜線 /

存檔後，左邊會多一個 SFTP 的圖示，點選後可瀏覽遠端的檔案
對檔案或資料夾點右鍵可上傳或下載


在檔案總管點右鍵也會出現上傳或下載的選項，點「Upload File」


下面紅框 SFTP 的地方會顯示正在上傳，上傳成功後顯示done，
點一下可顯示上傳記錄


有使用原始檔控制的話，在檔案變更區會多一個按鈕，可一次上傳所有變更的檔案

也可以使用快速鍵 Ctrl+Alt+U

另外新增快速鍵 Ctrl+Alt+S，可上傳目前這個檔案



# 安裝 Material 圖示佈景

在延伸模組搜尋 icon 安裝最多人用的 Material Icon Theme
 

安裝後可以看到各種資料夾和檔案都被換成了各種圖示
   

在設定搜尋 material 可以更改成自己喜歡的檔案或資料夾圖示
 

例如將 php 圖示改成小象，storage 資料夾改成上傳
   "material-icon-theme.files.associations": {
        "*.php": "Php_elephant"
    },
    "material-icon-theme.folders.associations": {
        "storage": "Uploads"
    },
 

圖示名稱在這邊查詢 https://github.com/PKief/vscode-material-icon-theme


相關文章:
[VSCode] 在 Visual Studio Code 使用 Git 版本控制 - KnucklesNote板 - Disp BBS


--
※ 作者: Knuckles 時間: 2023-11-06 02:25:56 (台灣)
※ 編輯: Knuckles 時間: 2023-12-09 02:30:52 (台灣)