作為一位程序員，vscode編輯器在我們的日常開發(fā)中肯定是必不可少的，那你想在網頁端用vscode的代碼搭建一個在線的vscode編輯器嗎？有同學可能會覺得的很復雜，但這其實一點都不復雜，不用自己編寫代碼，在服務器上敲幾行命令就可以搞定啦！

那..工欲善其事，必先利其器。首先我們需要有一臺自己的云服務器（如果你已經有服務器了，可以直接跳到搭建部分哦！），我們打開阿里云或任意一個服務器提供商，來到云服務器購買界面：

由于搭建的是網頁端vscode，所以我們需要選擇一臺配置不能太差的服務器，否則搭建好后使用可能會有卡頓等情況哦，我選擇的是一臺2核2GiB的服務器，在網絡和安全組的地方記得放行22、80、443等端口哦（一定要記得放行這些端口，否則后續(xù)網頁無法訪問，操作系統(tǒng)我選擇的是Alibaba Cloud Linux ?3.2104 LTS 64位），下面就是我買的服務器啦~

我們購買好服務器之后，需要遠程連接一下服務器，我們可以直接用阿里云的遠程連接進行連接，但是為了后續(xù)操作的操作方便，我使用Xshell進行遠程連接服務器：

Xshell非商業(yè)使用是免費的哦！如果你還沒有安裝Xshell的話可以通過Xshell官網鏈接進行免費下載：https://www.xshell.com/zh/free-for-home-school/

下載并安裝好Xshell之后我們就用Xshell遠程連接一下服務器~我們先點擊“重置實例密碼”進行重置一個新的密碼（等會遠程連接服務器的時候要用哦~）。

重置好密碼后我們來到Xshell的客戶端中，點擊“文件”--“新建”進行新建會話：

這里的“名稱”可以自己取哦，協議SSH，主機填寫公網IP（不造在哪里的可以看再下面一張圖片哦），端口號填寫22。填寫完成之后點“連接”就闊以啦~

用戶名輸入root，點擊“確定”后輸入密碼，密碼就是剛才設置的密碼~

現在我們就已經連接上服務器啦~

那? 我? 們? 現? 在? 就? 開? 始? 搭? 建? 啦? ！? ！

我們先新建一個文件夾vscode并進入到vscode文件夾里來：

接下來我們可以使用以下命令下載code server，

但畢竟是外網，下載速度真的挺慢的，大家也可以使用我已經下載好的文件（百度網盤：鏈接：https://pan.baidu.com/s/1QDcTRnGYvsw0MBPiNcJrOg? 提取碼：31ch ），然后用Xftp等軟件進行上傳（Xftp也可以從剛剛下載Xshell的界面下載到，也是免費的，如果懶得下載的話，使用上面的命令進行下載也闊以~）：

上傳好之后我們用命令安裝一下code server：

然后~我們配置下公網訪問~

我們修改一下配置文件：

進入后，我們按鍵盤上的 i 進入編輯模式（英文狀態(tài)下），用小鍵盤的“l(fā)eft”和“right”移動光標，我們修改一下ip為0.0.0.0:80和password后面的值，password就是我們等會登錄需要用到的密碼，可以自己設置：

修改完成之后，我們按鍵盤上的Esc，隨后輸入?:wq? 進行保存并退出：

最后我們輸入code-server啟動服務~

啟動完成之后，我們在瀏覽器中訪問一下我們的IP地址：

我們輸入密碼進行登錄：

我們就已經可以打開我們的網頁版VScode啦！

至此，我們就已經搭建完成啦~是不是不難！當然，有什么問題也可以在評論區(qū)提問哦！