y_web.py(更新)

沉 發(fā)自 淺度寺

量子位 出品 | 公眾號(hào) QbitAI

在程序員圈子里，Visual Studio Code（以下簡(jiǎn)稱(chēng)VSCode）可以說(shuō)是目前最火的代碼編輯器之一了。

它是微軟出品的一款可擴(kuò)展的輕量級(jí)開(kāi)源編輯器，并且支持全平臺(tái)系統(tǒng)。這些特性使得VSCode頗受歡迎，這也使其成為了一個(gè)很棒的Python開(kāi)發(fā)平臺(tái)。

在本文中，你將學(xué)到如何在VSCode中進(jìn)行高效的Python開(kāi)發(fā)，其中包括：

• 安裝VSCode
• 安裝插件讓Python開(kāi)發(fā)更便利
• 編寫(xiě)一個(gè)簡(jiǎn)單的Python應(yīng)用
• 學(xué)習(xí)如何在VSCode中運(yùn)行和調(diào)試已有的Python程序
• 在VSCode中使用Git和Github來(lái)管理代碼

本文假設(shè)你已經(jīng)熟悉了基本的Python開(kāi)發(fā)，并且計(jì)算機(jī)上安裝了某個(gè)版本的Python（Python2.7、Python3.6/7、Anaconda等）。

文中會(huì)提供Ubuntu和Windows系統(tǒng)上的運(yùn)行截圖和樣例，但由于VSCode還可以在其他主流平臺(tái)上運(yùn)行，所以你可能會(huì)在實(shí)際操作中看到略微有些差異的UI界面，一些命令的鍵位可能也需要修改。

VSCode的安裝與配置

在任何平臺(tái)上安裝VSCode都不是難事。微軟提供了Windows，Mac和Linux平臺(tái)上詳盡的安裝指引，并且每月都會(huì)有更新以推出新特性或修復(fù)已知問(wèn)題。

這些都可以在VSCode官網(wǎng)上找到：

https://code.visualstudio.com

可能你會(huì)想，VSCode和那個(gè)龐大的Visual Studio名字這么像，它們會(huì)不會(huì)有什么關(guān)系呢？但其實(shí)，并沒(méi)有，哈哈。

VSCode默認(rèn)支持多種編程語(yǔ)言，并且有著豐富的擴(kuò)展。VSCode每月更新，你可以在微軟博客上隨時(shí)關(guān)注更新的進(jìn)展。微軟甚至把代碼開(kāi)源在了Github上供所有開(kāi)發(fā)者克隆倉(cāng)庫(kù)甚至貢獻(xiàn)代碼（暗示大家趕緊來(lái)提PR）。

VSCode的用戶(hù)界面官方給出了詳細(xì)的操作說(shuō)明，如下圖所示，在此不再贅述。

為Python開(kāi)發(fā)安裝插件

正如上文中提到，VSCode可以通過(guò)自身良好的擴(kuò)展性質(zhì)來(lái)支持各種編程語(yǔ)言的開(kāi)發(fā)。

Python插件使我們可以更方便地在VSCode中進(jìn)行Python開(kāi)發(fā)，它有以下功能和特點(diǎn)：

• 支持Python2.7和Python3.4+的Pyhon版本
• 使用IntelliSense進(jìn)行代碼補(bǔ)全
• 代碼檢查器
• 對(duì)調(diào)試的支持
• 代碼段功能
• 對(duì)單元測(cè)試的支持
• 自動(dòng)應(yīng)用虛擬環(huán)境
• 可在Jupyter環(huán)境和Jupyter Notebook中編輯代碼

事實(shí)上，VSCode插件并不僅是編程語(yǔ)言層面的，如下面這些：Keymaps可以改變VSCode的操作方式，讓那些習(xí)慣使用Atom，Sublime Text，Emacs，Vim，Pycharm等其他編輯器的開(kāi)發(fā)者更舒服。

Themes可以定制用戶(hù)界面外觀，不管你是喜歡亮色、暗色或五彩斑斕的黑，它都能滿(mǎn)足；Language提供了良好的本地化體驗(yàn)。

還有一些很有用的插件推薦給大家：

• GitLens提供了許多可以直接在編輯窗口中使用的Git特性，包括blame標(biāo)注和倉(cāng)庫(kù)探索等；
• Autosave可以通過(guò)菜單欄File—Auto Save開(kāi)啟，顧名思義，它會(huì)以固定的時(shí)間間隔保存你的代碼，默認(rèn)是1000毫秒（1秒），這個(gè)值是可以配置的；
• Settings Sync可以讓你通過(guò)Github在多個(gè)VSCode安裝中同步配置，如果你會(huì)在不同的機(jī)器上使用VSCode，這么做可以讓你保持開(kāi)發(fā)環(huán)境的一致性；
• Docker插件可以當(dāng)讓你愉快地使用Docker工作，它幫助開(kāi)發(fā)者編寫(xiě)dockerfile和docker-compose.yml，打包并部署項(xiàng)目，甚至為項(xiàng)目自動(dòng)生成dockerfile。

當(dāng)然了，你也可以自己發(fā)掘其他有趣有用的插件，歡迎和大家分享你的發(fā)現(xiàn)！

可以通過(guò)點(diǎn)擊左邊活動(dòng)欄的插件圖標(biāo)來(lái)進(jìn)行插件或主題的發(fā)現(xiàn)和安裝。你可以通過(guò)關(guān)鍵詞來(lái)搜索插件，用多種方式排序搜索結(jié)果，并快捷方便地安裝插件。

對(duì)于本文中使用到的Python插件，你可以搜索Python字樣，然后在特定項(xiàng)上點(diǎn)擊install進(jìn)行安裝。

同理，你可以用這種方式安裝其他上面提到的插件。

VSCode配置文件

VSCode通過(guò)用戶(hù)（user）和工作區(qū)（workspace）設(shè)置實(shí)現(xiàn)高度可配置化。

用戶(hù)設(shè)置是應(yīng)用于所有VSCode實(shí)例的全局性設(shè)置，而工作區(qū)設(shè)置是應(yīng)用于特定文件夾或項(xiàng)目的局部設(shè)置。工作區(qū)設(shè)置給VSCode提供了極大的靈活性，我們?cè)谥笳{(diào)出的都是工作區(qū)設(shè)置。

工作區(qū)設(shè)置以json格式保存在項(xiàng)目目錄下.vscode文件夾中。

寫(xiě)個(gè)Python程序

讓我們從一個(gè)Python程序開(kāi)始探索如何在VSCode中進(jìn)行Python開(kāi)發(fā)。你可以在VSCode中使用快捷鍵Ctrl+N來(lái)編輯一個(gè)新文件（也可以在菜單欄中選擇File—New File）。

Tips：VSCode用戶(hù)界面提供了命令盤(pán)（command palette）功能，使你可以手不離鍵盤(pán)就能搜索、執(zhí)行各項(xiàng)命令。按下Ctrl+Shift+P打開(kāi)命令盤(pán)，鍵入new file，按下回車(chē)，也可以編輯一個(gè)新文件。

無(wú)論用哪種方法，你應(yīng)該可以看到類(lèi)似下面這樣的窗口：

新文件打開(kāi)后，就可以開(kāi)始寫(xiě)代碼啦。

我們快速寫(xiě)一個(gè)埃拉托斯特尼篩法（用來(lái)尋找不超過(guò)一個(gè)數(shù)的所有質(zhì)數(shù)）作為測(cè)試代碼。從下面這兩行開(kāi)始：

sieve = [True] * 101
for i in range(2, 100):

你應(yīng)該看到類(lèi)似下面的場(chǎng)景：

等等，發(fā)生什么了？為什么VSCode沒(méi)有任何關(guān)鍵詞高亮，格式自動(dòng)調(diào)整等有用的東西？要它何用？

答案是，目前VSCode還不知道你在寫(xiě)什么。這個(gè)文字緩沖區(qū)叫做Untitled-1，如果你看看窗口右下角，你會(huì)發(fā)現(xiàn)寫(xiě)著Plain Text，也就是說(shuō)VSCode還不知道你在寫(xiě)Python代碼。

為了讓Python插件發(fā)揮作用，我們需要將文件存儲(chǔ)為后綴為py的文件，如sieve.py。你可以通過(guò)菜單欄File—Save File，或者按下Ctrl+S，或在命令盤(pán)鍵入save file來(lái)做到這一點(diǎn)。VSCode看到py后綴就會(huì)將文件解釋為Python代碼。現(xiàn)在你的窗口應(yīng)該長(zhǎng)這樣：

好多了有沒(méi)有！VSCode自動(dòng)按照Python語(yǔ)言重新確定了格式，你可以在窗口左下角驗(yàn)證當(dāng)前編程語(yǔ)言的正確性。

如果你同時(shí)安裝了多個(gè)版本的Python（如Python2.7，Python3.x和Anaconda），你可以通過(guò)點(diǎn)擊左下角的語(yǔ)言（這里的Python x.x.x）或在命令盤(pán)中選擇select interpreter來(lái)切換Python解釋器。VSCode默認(rèn)用PEP8標(biāo)準(zhǔn)來(lái)格式化Python代碼，但你也可以選用其他標(biāo)準(zhǔn)。

現(xiàn)在讓我們完成剩余篩法代碼。

為了能觀察到IntelliSense發(fā)揮作用，請(qǐng)不要直接復(fù)制粘貼這段代碼。親手輸入，你將看到下面的畫(huà)面：

下面是埃拉托斯特尼篩法中“篩”這個(gè)部分的完整代碼：

sieve = [True] * 101
for i in range(2, 100):
 if sieve[i]:
 print(i)
 for j in range(i*i, 100, i):
 sieve[j] = False

輸入這段代碼時(shí)，VSCode自動(dòng)縮進(jìn)了for和if下的語(yǔ)句，自動(dòng)加上了結(jié)尾大括號(hào)，并為你提供輸入建議。這就是IntelliSense的威力。

運(yùn)行Python代碼

既然寫(xiě)完了代碼，我們就可以運(yùn)行它了。因?yàn)閂SCode可以直接在編輯器里運(yùn)行代碼，所以我們完全不需要離開(kāi)編輯器。按Ctrl+S保存文件，接著在編輯器窗口中點(diǎn)擊鼠標(biāo)右鍵，選擇Run Python File in Terminal。

可以看見(jiàn)，窗口下方出現(xiàn)了Terminal選項(xiàng)卡，顯示了代碼的輸出。

對(duì)Python代碼檢查器的支持

你可能在寫(xiě)代碼的時(shí)候看見(jiàn)過(guò)一個(gè)彈出框，上面寫(xiě)著代碼檢查器不可用（linting was not available）。你可以在彈出框中快速安裝一個(gè)代碼檢查器，默認(rèn)安裝的是PyLint。VSCode也支持其他檢查器，包括：flake8、mypy、pydocstyle、pep8、prospector、pyllama、bandit等。

Python代碼檢查器頁(yè)面有配置每一種檢查器的詳細(xì)資料。注意，代碼檢查器的選擇是項(xiàng)目級(jí)別的工作區(qū)設(shè)置，而不是全局用戶(hù)設(shè)置。

編輯一個(gè)已有的Python項(xiàng)目

在埃拉托斯特尼篩法的例子中，你創(chuàng)建了一個(gè)單獨(dú)的Python文件。這作為例子來(lái)講很合適，但通常你會(huì)創(chuàng)建更大的項(xiàng)目，并在其上工作一段時(shí)間。一個(gè)典型的創(chuàng)建新項(xiàng)目的工作流程如下：

• 創(chuàng)建一個(gè)存放項(xiàng)目的文件夾（其中可能包含一個(gè)新的Github項(xiàng)目）
• 切換到新文件夾
• 用命令代碼創(chuàng)建一個(gè)初始Python代碼文件

在Python項(xiàng)目中使用VSCode會(huì)給你帶來(lái)更多精彩的功能，讓我們看看VSCode是怎樣對(duì)付大型工程的。

早在上個(gè)世紀(jì)我還是一名年輕的程序員時(shí)，我用調(diào)度場(chǎng)算法寫(xiě)過(guò)一個(gè)將算式解析為中綴表達(dá)式的計(jì)算器程序。為了展示VSCode中項(xiàng)目專(zhuān)屬的特性，我將算法重構(gòu)成了Python的一個(gè)算式求值庫(kù)：

https://github.com/JFincher42/PyEval

大家可以隨意克隆至本地以進(jìn)行后面的操作。

本地文件夾建好后，你可以通過(guò)VSCode快捷地打開(kāi)整個(gè)文件夾，我比較喜歡下面這種方式：

cd /path/to/project
code .

當(dāng)這樣打開(kāi)時(shí)，VSCode將檢測(cè)到并開(kāi)啟任何項(xiàng)目中存在的virtualenv、pipenv或conda虛擬環(huán)境，你甚至都不用自己手動(dòng)去啟動(dòng)虛擬環(huán)境！以下幾種方式都可以在用戶(hù)界面中打開(kāi)一個(gè)文件夾：菜單欄中點(diǎn)擊File—Open Folder；按下快捷鍵Ctrl+K或Ctrl+O；在命令盤(pán)中鍵入file：open folder。

我的公式求值庫(kù)項(xiàng)目打開(kāi)后看起來(lái)是這樣的：

當(dāng)VSCode打開(kāi)文件夾時(shí)，它同時(shí)也會(huì)打開(kāi)你最近打開(kāi)的文件（這個(gè)行為是可配置的）。

你可以打開(kāi)、編輯、運(yùn)行、調(diào)試文件列表中的任何文件。

左側(cè)活動(dòng)區(qū)的探索者視圖向你展示了文件夾中的所有文件，并告訴你在當(dāng)前打開(kāi)的選項(xiàng)卡中有多少編輯了但還沒(méi)有保存的文件。

對(duì)測(cè)試的支持

如果當(dāng)前環(huán)境安裝了測(cè)試框架，VSCode可以自動(dòng)識(shí)別已有的用測(cè)試框架編寫(xiě)的測(cè)試代碼。我用unittest為我的公式求值庫(kù)寫(xiě)了一個(gè)單元測(cè)試，大家可以用它作為例子來(lái)學(xué)習(xí)。

你可以在項(xiàng)目中的任何一個(gè)文件中右鍵選擇Run Current Unit Test File來(lái)運(yùn)行已有的單元測(cè)試。VSCode會(huì)詢(xún)問(wèn)你使用哪種測(cè)試框架、項(xiàng)目中測(cè)試代碼存放的路徑，以及測(cè)試文件的命名方式。

這些設(shè)置都將作為工作去設(shè)置被保存在項(xiàng)目.vscode文件夾下的settings.json文件中，你也可以在那里更改這些設(shè)置。對(duì)于我的公式求值項(xiàng)目，我們選擇用unittest框架，測(cè)試代碼在當(dāng)前目錄下，測(cè)試代碼命名為*_test.py。

一旦配置好了測(cè)試框架、找到了測(cè)試代碼，你就可以點(diǎn)擊狀態(tài)欄的Run Tests來(lái)運(yùn)行所有的測(cè)試。

你甚至可以通過(guò)點(diǎn)擊狀態(tài)欄的Run Tests，然后選擇Run Unit Test Method來(lái)運(yùn)行單個(gè)測(cè)試。這樣我們就可以單獨(dú)運(yùn)行失敗的測(cè)例，能夠節(jié)省一大筆時(shí)間！測(cè)試結(jié)果輸出在Output選項(xiàng)卡中。

對(duì)調(diào)試的支持

即使VSCode是個(gè)編輯器，但在其中調(diào)試代碼也是可行的。VSCode提供了許多好的代碼調(diào)試器所擁有的特性：

• 自動(dòng)變量追蹤
• watch表達(dá)式
• 斷點(diǎn)
• 調(diào)用棧檢查

它們作為調(diào)試視圖的一部分被顯示在活動(dòng)欄中：

調(diào)試器可以控制Python應(yīng)用在內(nèi)置終端或遠(yuǎn)程終端實(shí)例上運(yùn)行。它可以連接一個(gè)正在運(yùn)行的Python實(shí)例，甚至可以調(diào)試Django和Flask應(yīng)用。

用VSCode調(diào)試單個(gè)Python文件就和按F5啟動(dòng)調(diào)試器一樣簡(jiǎn)單。你可以按F10和F11來(lái)跳出或進(jìn)入函數(shù)，按Shift+F5退出調(diào)試器。按F9或單擊編輯框左側(cè)區(qū)域來(lái)設(shè)置斷點(diǎn)。

當(dāng)你要開(kāi)始調(diào)試像Django和Flask應(yīng)用這種更復(fù)雜的項(xiàng)目時(shí)，需要進(jìn)行調(diào)試配置。在調(diào)試視圖中，選擇配置下拉菜單中的添加配置，然后選擇Python：

上面的配置存儲(chǔ)在了.vscode/launch.json中，你可以針對(duì)像Django、Flask這種特殊應(yīng)用的設(shè)立專(zhuān)門(mén)的配置。

你甚至可以遠(yuǎn)程調(diào)試，或是調(diào)試Jinja模板。這一切只需在配置下拉菜單中選擇合適的配置項(xiàng)即可。

Git集成

VSCode內(nèi)置版本控制機(jī)制，并自帶對(duì)Git和Github的支持，你也可以安裝插件以支持其他版本控制軟件。版本控制視圖中提供了各種版本控制功能：

如果你的項(xiàng)目目錄包含.git文件夾，那么VSCode自動(dòng)開(kāi)啟完整的Git和Github支持。你可以進(jìn)行的操作包括：

• 提交文件到Git
• 向遠(yuǎn)程倉(cāng)庫(kù)推送更新，或從遠(yuǎn)程倉(cāng)庫(kù)拉更新
• 切換已有分支或新建分支
• 查看并解決合并沖突
• 查看代碼差別

所有這些事都可以直接在VSCode用戶(hù)界面中完成：

VSCode也能識(shí)別來(lái)自編輯器外的文件內(nèi)容改變并做出反應(yīng)。

在VSCode中提交最近的代碼更改是很方便直接的。在版本控制視圖中，被修改的文件用M標(biāo)記，新的未追蹤文件用U標(biāo)記。

鼠標(biāo)懸浮于文件上，點(diǎn)擊加號(hào)（+）來(lái)添加更改。在頂端輸入提交信息，最后點(diǎn)擊對(duì)勾來(lái)提交這些更改。

你也可以在VSCode中將本地提交推至Github。選擇版本控制視圖中的Sync，點(diǎn)擊狀態(tài)欄中的Synchronize Changes即可。

結(jié)論

VSCode是目前最棒的通用編輯器，也是Python開(kāi)發(fā)者的絕佳選擇。通過(guò)這篇文章你學(xué)到了：

• 如何安裝VSCode
• 如何查找、安裝插件來(lái)開(kāi)啟對(duì)Python的支持
• 如何用VSCode更輕松地編寫(xiě)Python程序
• 如何用VSCode運(yùn)行、調(diào)試Python代碼
• 如何在VSCode中使用Git和Github

VSCode已經(jīng)成為了我進(jìn)行Python甚至其他項(xiàng)目開(kāi)發(fā)時(shí)最常用的編輯器，推薦給你，希望你也可以試試看~

— 完 —

誠(chéng)摯招聘

量子位正在招募編輯/記者，工作地點(diǎn)在北京中關(guān)村。期待有才氣、有熱情的同學(xué)加入我們！相關(guān)細(xì)節(jié)，請(qǐng)?jiān)诹孔游还娞?hào)(QbitAI)對(duì)話(huà)界面，回復(fù)“招聘”兩個(gè)字。

量子位 QbitAI · 頭條號(hào)簽約作者

?'?' ? 追蹤AI技術(shù)和產(chǎn)品新動(dòng)態(tài)