10.03 推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼

  • 瞎比比
  • 什麼都別說,先上圖
  • 需要什麼配置條件?
  • 如何配置?
  • 關於 vscode 的插件
  • 配置一個 python 開發環境
  • 遇到的錯誤
推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼

瞎比比

最近看到 iPadOS 出來了,各種牛逼的操作真的很有吸引力,於是咬咬牙買了 iPad air。買來之後,當然是研究怎麼提高效率了,於是就尋找、研究各種高效的軟件。折騰了一段時間,各種 APP 都找得差不多了(有機會給大家分享一下),唯一的缺陷就是不能寫代碼。一次偶然的機會,讓我看到了一個 GitHub 項目:code-server,一個在瀏覽器中使用 vscode 編輯器的項目

什麼都別說,先上圖


推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼


在筆記本 Chrome 瀏覽器上顯示如圖

推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼


iPad Safari瀏覽器顯示如圖,並運行了 python 代碼

Code-server 項目地址:Github 地址

怎麼樣,看圖之後有沒有很心動?不過這不是官方的項目,據說 5 月份的時候,官方也打算出一款網頁的,但是至今沒有什麼消息。

需要什麼配置條件?

  • 一顆愛折騰的心
  • 一臺至少 1 核 2 g 的雲服務器
  • 一個可以訪問網絡的瀏覽器
  • 需要有 docker 的基礎知識
  • 一個隨時隨地為公司加班的心 ‍♀️

如何配置?

我這篇文章是使用 docker 來搭建 vscode 的,如果你不懂 docker,可以查看我以前的 docker 入門文章,傳送門:

如果你跟隨官網的使用方法去搭建,那麼恭喜你,踩坑了!就算搭建成功,並且能成功登陸頁面,在你進行新建文件等各種操作的時候,他會提醒你,你沒有權限完成該操作。

正確的使用方法應該是這樣的:

docker run --user root -it -p "8080:8080" -v "/your/path/vscode/project:/home/coder/project" docker.io/codercom/codercom/code-server:v2 --allow-https --auth password

比官網的命令多一個:

—user root

是以 root 用戶運行 docker 的意思,這樣就不會出現沒有權限問題了。

—auth password

是否加入登陸密碼驗證,如果沒有加入的話,那麼任何人都可以通過訪問地址來訪問你的編輯器了。

關於 vscode 的插件

在早一些的版本中,是無法在編輯器中直接安裝插件的。最新的版本好了一些,大部分插件都能直接搜索並且安裝。但是還是有少部分無法安裝成功。這裡提供一種離線安裝的思路:

到網頁版商店下載離線包,VSCode 擴展商店網頁版:https://marketplace.visualstudio.com/vscode

搜索擴展,進入到詳情頁之後,選擇右下角的 Download Extension 下載離線包。


推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼


之後在擴展界面選擇Install from VSIX,選擇路徑安裝。


推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼


配置一個 python 開發環境

code-server 正式版 V2 版本是無法成功配置 python 開發環境的,因為 V2 版本中無法在 vscode 中添加 python 配置。好在作者在試用版中 fix 了這個問題,其有效的版本如下:

docker run --user root -it -p "8080:8080" -v "/your/path/vscode/project:/home/coder/project" docker.io/codercom/code-server:2.1523-vsc1.38.1 --allow-https --auth password

然後在這個 docker 容器中安裝 python3,打開 vscode debug 按鈕下的命令行,輸入如下命令:


推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼


apt-get install python3

接下來,將 python3 重命名為 python:

cd /usr/bin
mv python3 python

然後在 vscode 中加載一個文件夾作為項目目錄(/home/coder/project),如圖:


推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼


由於我已經使用過了,所以也新建了幾個 python 文件,

接下來,在 vscode 中,配置你的 python 環境,如圖:


推薦一款神器:在瀏覽器中運行 vscode,隨時隨地寫代碼


配置完成之後,再在擴展庫中找一些自己常用的工具庫,那麼就可以愉快的在瀏覽器中編輯 python 了。當然其他語言的也是差不多的操作。

遇到的錯誤

這裡就羅列一下此次折騰中遇到的問題,如果你遇到問題解決不了,可以加我:

  • 新建文件沒有權限
  • vscode 插件無法安裝
  • 配置好插件後,無法運行調試


分享到:


相關文章: