Mars's Blog

VS Code遠端開發套件：Remote-SSH

Mars Hung, Gunter.Chou
tools
文章閱讀量次

一、說明

使用VS Codey套件Remote-SSH實現遠端開發

二、安裝

  1. 下載並安裝VS Code

  2. 安裝VS Code套件Remote - SSH

  3. 建立SSH Key
    打開git bash，輸入下列指令

    1
    $ ssh-keygen -t ed25519 -C "your_email@example.com"
    • 注意: 如果您使用的是不支持ed25519算法的舊系統，請使用以下指令
      • $ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
    • your_email@example.com請替換為您的電子信箱，也可以不指定電子信箱
    • 產生ssh key時，如果有設定密碼，以後使用此ssh key時都要輸入密碼
    • 在非共用電腦上使用的ssh key，密碼通常不設，自行保管好即可

  4. 設定SSH config
    In VS Code, run Remote-SSH: Open Configuration File

    1
    2
    3
    4
    5
    6
    # `~/.ssh/config`

    Host {dev.idv}
        User {user_name}
        HostName {dev.idv}
        #IdentityFile ~/.ssh/id_ed25519  # 金鑰如果使用預設路徑&檔名，可以不設定本行
    • 將 {user_name} 替換成自己的帳號
    • Host {dev.idv} 中的 {dev.idv} 是伺服器的alias name (可以跟HostName不一樣)
    • HostName {dev.idv} 中的 {dev.idv} 是伺服器域名，也可以使用IP位址
    • IdentityFile 指定ssh私鑰路徑，金鑰如果使用預設路徑&檔名，可以不設定本行

  5. 安裝SSH Key至遠端

    1
    $ ssh-copy-id -i ~/.ssh/id_ed25519.pub {user_name}@{dev.idv}

  6. 連線至遠端
    In VS Code, run Remote-SSH: Connect to Host

    第一次連線會自動安裝遠端套件

  • VS Code 遠端開發說明
    • VS Code IDE 編輯器安裝在本機電腦上，透過 Remote-SSH 套件使用SSH遠端連線協定連線到遠端Ubuntu(Linux)伺服器上編輯程式檔，此為遠端開發。
  • SSH連線金鑰
    • 使用指令ssh-keygen建立SSH認証金鑰對id_ed25519, id_ed25519.pub
    • id_ed25519是私鑰，存放於本機端
    • id_ed25519.pub是公鑰，透過指令ssh-copy-id存放於遠端伺服器
    • 設定config指定連線參數與使用金鑰檔
    • 此時使用SSH連線到遠端伺服器時，就不需再輸入帳號密碼，所以需要妥善保管好SSH私鑰

三、VS Code環境設定

3.1 本地使用者 環境設定檔

  • 按[ctrl+,]選使用者，再選右上角**{}**符號

  • 貼上下列設定值後儲存(ctrl+s)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
{
    "extensions.autoUpdate": true,
    "update.enableWindowsBackgroundUpdates": false,
    "update.mode": "manual",

    "remote.SSH.defaultExtensions": [
        "alefragnani.bookmarks",
        "berublan.vscode-log-viewer",
        "bmewburn.vscode-intelephense-client",
        "bysabi.prettier-vscode-standard",
        "eamodio.gitlens",
        "kokororin.vscode-phpfmt",
        "mhutchie.git-graph",
        "ms-ceintl.vscode-language-pack-zh-hant",
        "mutantdino.resourcemonitor",
        "neilbrayfield.php-docblocker",
        "rafamel.subtle-brackets",
        "small.php-ci",
    ],

    "editor.fontSize": 16,
    "editor.wordSeparators": "`~!@#%^&*()=+-[{]}\\|;:'\",.<>/?，。",
    "editor.renderControlCharacters": true,
    "editor.renderWhitespace": "all",
    "editor.matchBrackets": false,

    "files.maxMemoryForLargeFilesMB": 5120,
    "files.autoSave": "onFocusChange",
    "files.eol": "\n",
    "files.watcherExclude": {
        "**/bs": true,
        "**/ckeditor": true,
        "**/vendor/**": true,
        "**/outer/**": true,
    },
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/uploads": true,
        "**/tmp": true,
    },

    "breadcrumbs.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "window.zoomLevel": 0,

    "typescript.npm": "‪C:/Program Files/nodejs/npm.cmd",
    "typescript.preferences.quoteStyle": "single",
    "javascript.implicitProjectConfig.checkJs": true,
    "javascript.preferences.quoteStyle": "single",
    "javascript.referencesCodeLens.enabled": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,

    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    },
    "[javascript]": {
        "editor.defaultFormatter": "bysabi.prettier-vscode-standard"
    },

    "git.confirmSync": false,
    "gitlens.views.lineHistory.enabled": false,
    "gitlens.hovers.annotations.over": "annotation",
    "gitlens.advanced.fileHistoryFollowsRenames": false,
    "gitlens.advanced.similarityThreshold": 50,
    "gitlens.codeLens.scopes": [
        "document"
    ],
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": true,
        "suppressShowKeyBindingsNotice": true
    },
    "gitlens.blame.highlight.locations": [
        "gutter",
        "line",
        "overview"
    ],

    "subtleBrackets.style": {
        "color": "#528BFF",
        "borderWidth": "1px",
        "borderStyle": "none none solid none"
    },

    "phpfmt.smart_linebreak_after_curly": true,
    "phpfmt.passes": [
        "GeneratePHPDoc",
        "PHPDocTypesToFunctionTypehint",
        "PrettyPrintDocBlocks",
        "ReindentSwitchBlocks",
        "DocBlockToComment",
        "EliminateDuplicatedEmptyLines",
        "PSR2EmptyFunction",
        "AlignPHPCode",
        "RTrim",
        "IndentTernaryConditions",
        "MergeElseIf",
    ],

    "intelephense.completion.fullyQualifyGlobalConstantsAndFunctions": true,
    "intelephense.files.maxSize": 5242880,
    "intelephense.files.exclude": [
        "**/.git/**",
        "**/.svn/**",
        "**/.hg/**",
        "**/CVS/**",
        "**/.DS_Store/**",
        "**/node_modules/**",
        "**/bower_components/**",
        "**/vendor/**/{Test,test,Tests,tests}/**",
        "**/outer/**",
    ],

    "prettier.singleQuote": true,
    "prettier.parser": "flow",
    "prettier.trailingComma": "es5",
    "prettier.printWidth": 100,

    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "terminal.integrated.env.windows": {"LC_ALL":"en_US.UTF-8"},
    "explorer.confirmDelete": false,
    "terminal.external.windowsExec": "C:\\Program Files\\Git\\git-bash.exe",
}

Gunter.Chou提供

3.2 遠端 環境設定檔

  • 按[ctrl+,]選遠端[SSH:XXXX]，再選右上角**{}**符號
  • 貼上下列設定值後儲存(ctrl+s)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "php.validate.executablePath": "/usr/bin/php7.0",
    "typescript.npm": "/usr/local/bin/npm",
    "CI.other": [
        "system/core/Common.php",
        "system/database/DB_query_builder.php",
        "application/models/My_model.php",
    ],
    "resmon.show.battery": false,
    "logViewer.watch": [
        {
            "title": "CI Log",
            "pattern": "./application/logs/*.php"
        },
    ],
}

Gunter.Chou提供

四、常用快速鍵

  • 開啟工作資料夾： ctrl+k ctrl+o (雙組合鍵)
  • 切換工作資料夾： ctrl+r (已開過間切換)
  • 呼叫/關閉終端機： ctrl+`
  • 打開/關閉檔案總管： ctrl+b
  • 程式碼格式化： alt+shift+f
  • 專案內檔案尋找： ctrl+p
  • 整列註解切換： ctrl+/
  • 成對括號尋找： ctrl+shift+\
  • 增加選取列縮排： ctrl+]
  • 減少選取列縮排： ctrl+[]
  • 刪除整列： ctrl+shift+k
  • 複制： ctrl+c
  • 剪下： ctrl+x
  • 還原： ctrl+z
  • 重做： ctrl+y
  • 搜尋： ctrl+f
  • 取代： ctrl+h
  • 行數跳躍： ctrl+g
  • 分割視窗： ctrl+\
  • 選取同一段字詞： ctrl+d

五、參考

六、Log

  • 2019-05-27 Mars Hung編輯
  • 2019-07-03 加入Gunter Chou提供環境設定
  • 2019-07-24 加入Gunter Chou提供環境設定

Recents

Archives

Categories

Tags