顯示廣告
隱藏 ✕
看板 KnucklesNote
作者 Knuckles (站長 那克斯)
標題 [VSCode] Visual Studio Code 安裝與設定
時間 2023-11-06 Mon. 02:25:56


安裝環境 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
{
    "name": "My Host",
    "host": "my-host.com",
    "protocol": "sftp",
    "port": 22,
    "username": "username",
    "remotePath": "/var/www/vscode-test",
    "privateKeyPath": "C:\\Users\\username\\.ssh\\id_rsa",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false
}

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 (台灣)
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 75 
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇