快捷導(dǎo)航

使用 Visual Studio Code（VSCode）搭建簡(jiǎn)單的Python+Django開發(fā)環(huán)境的方法步驟

更新時(shí)間：2018年12月17日 15:06:53 作者：Dy1an

這篇文章主要介紹了使用 Visual Studio Code（VSCode）搭建簡(jiǎn)單的Python+Django開發(fā)環(huán)境的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

寫在前面的話

之前一直用的 Pycharm，但是在主題這一塊怎么調(diào)整都感覺要么太騷，看起來不舒服，要么就是簡(jiǎn)直不能看。似乎用大 JB 公司 IDE 的人似乎都不怎么重視主題這個(gè)東西。

我個(gè)人是那種“喜新厭舊”的，所以看久了 Pycharm 就感覺很難受了，再加上 Pycharm 太笨重了，就換成了以前短時(shí)間用過的 VSCode，以前沒用是懶得折騰插件，現(xiàn)在閑下來準(zhǔn)備折騰一下！

這里放一張我現(xiàn)在的 Pycharm 的配色主題：

閑話少說，進(jìn)入正題！

創(chuàng)建 Django 測(cè)試項(xiàng)目

這里說明一下，配置的是 Python + Django 的環(huán)境，所以我會(huì)從新建一個(gè)測(cè)試的 Django 項(xiàng)目開始，算是整體流程再走一遍！

【1】新建一個(gè) Django 項(xiàng)目：注意，我這里 Python 使用的是 virtualenv 為項(xiàng)目建立的虛擬環(huán)境，沒用過的照著這個(gè)步驟做就行，需要注意那個(gè)切換到我們新環(huán)境的命令就行

安裝配置 VSCode

【1】安裝 VSCode：

下載地址：https://code.visualstudio.com/

根據(jù)自己電腦對(duì)應(yīng)的操作系統(tǒng)下載對(duì)應(yīng)的版本即可，至于安裝過程也和一般的軟件一樣，沒什么特別需要注意的地方！

安裝完成之后打開，最開始的頁(yè)面是這樣的：

這時(shí)候就需要我們根據(jù)需要安裝對(duì)應(yīng)的插件了，這也是整個(gè) VSCode 最出彩的地方。需要啥安裝啥，而不用全家桶安裝！

【2】插件安裝：我們這里就不用快捷鍵了，都頁(yè)面擺在這里，直接點(diǎn)就行了！

這里會(huì)有很多推薦的插件，也可以看到我們安裝的和禁用的插件。

1. 首先，我們安裝個(gè)漢化界面的插件：Chinese (Simplified) Language Pack for Visual Studio Code

我們點(diǎn)擊右下角 Install 就能安裝，值得注意的是，我們安裝后并不會(huì)生效，在安裝后右下角會(huì)彈框提示我們 Restart，我們出去 VSCode 就行了！

這時(shí)候已經(jīng)變成了中文界面，我們可以打開剛剛我們創(chuàng)建的項(xiàng)目了！

2. 打開項(xiàng)目：左上角文件 --> 打開文件夾

這時(shí)候我們會(huì)發(fā)現(xiàn)兩個(gè)問題，一個(gè)是默認(rèn)主題并不好看，另一個(gè)是文件沒有圖標(biāo)進(jìn)行區(qū)分，所以這時(shí)候我們就需要進(jìn)行配置！

3. 文件圖標(biāo)和主題美化：Material Icon Theme 和Son of Obsidian Theme

安裝完成后點(diǎn)擊插件右下角的重新載入就行了！

但是這樣主題這些并不會(huì)直接就加載出來，需要手動(dòng)選擇：

根據(jù)左下角有個(gè)設(shè)置，里面可以進(jìn)行很多設(shè)置：

我這里將我們的配置貼出來：

進(jìn)入設(shè)置后可以可以點(diǎn)擊這個(gè)代碼符號(hào)將我們的配置貼進(jìn)去，當(dāng)然你也可以自己一項(xiàng)一項(xiàng)的配置，只要你不怕麻煩：

{
  "editor.fontSize": 16,
  "explorer.confirmDragAndDrop": false,
  "extensions.autoUpdate": false,
  "workbench.colorTheme": "Son of Obsidian",
  "editor.fontFamily": "Consolas, Dengxian",
  "workbench.sideBar.location": "left",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme",
}

粘貼到右邊保存即可：

最終達(dá)到的效果如下圖：

此時(shí)再看，就會(huì)發(fā)現(xiàn)代碼有了舒服的配色，而且文件夾和文件也有了屬于自己的圖標(biāo)，當(dāng)然你也可以到網(wǎng)上選擇你喜歡的風(fēng)格，反正我是挺喜歡這個(gè)的。

很多以前用 sublime 的 monokai，在 VSCode 里面也是有 Monokai 的，我個(gè)人是看厭了！

4. 接下來便是安裝真正協(xié)助我們開發(fā)的插件：

Python：Python 語(yǔ)法的基本插件
Django：Django 的插件，用于模板中語(yǔ)法提示和補(bǔ)全，注意不是搜索出來的第一個(gè)，而是后面有個(gè) 1.0 版本的
XML Tools：整個(gè) VSCode 都會(huì)用到的插件，運(yùn)維配置 VSCode 需要
Beautify：前端美化
View In Browser：瀏覽器快捷打開前端頁(yè)面
HTML CSS Support：HTML 基礎(chǔ)插件
Path Intellisense：路徑補(bǔ)全插件

5. 運(yùn)行我們的項(xiàng)目：

配置 Python 環(huán)境：我點(diǎn)擊添加配置后悔在右邊彈出個(gè)框，選擇 Python 即可，這樣就能打開一個(gè)配置文件！

在回到我們的項(xiàng)目，這時(shí)候會(huì)多了一個(gè)文件夾和兩個(gè)文件：

打開 settings.json 文件，將里面的 Python 路徑換成我們之前 virtualenv 添加的！注意斜線 windows 是雙斜線

打開 launch.json 文件配置 Django 啟動(dòng)的參數(shù)：找到 Django 的項(xiàng)，我這里給他指定了一個(gè)端口，你也可以加其他

運(yùn)行項(xiàng)目：

訪問測(cè)試：

安裝語(yǔ)法檢測(cè)和代碼格式化工具：

在運(yùn)行的終端中我們直接添加 Power shell 就可以相當(dāng)于我們?cè)?windows 命令行直接操作命令了，而且是在虛擬 Python 環(huán)境下，很方便：

此時(shí)我們需要 pip 安裝我們需要的包：

pip install pylint
pip install yapf
pip install pylint_django

在我們項(xiàng)目之前生成的 settings.json 文件中加入以下配置：

{
  "python.pythonPath": "E:\\VSCodeProject\\vscode_env\\Scripts\\python.exe",
  "python.formatting.provider": "yapf",
  "python.linting.pylintArgs": [
    "--load-plugins",
    "pylint_django",
  ]
}

最好在重啟一下編輯器，這樣我們的 VSCode 就算配置完成了，雖然還有一些小的不足，但是后續(xù)可以根據(jù)自己的需求慢慢的修復(fù)！總的來說還是很香的！

小結(jié)

看起來過程有些復(fù)雜，但是總的來說還是不錯(cuò)的，很多東西都是第一次配置就行了，像主題風(fēng)格這些都是一次配置終身使用。新開項(xiàng)目也就配置一些環(huán)境而已。

使用 VSCode 只要區(qū)分一些工作區(qū)配置和系統(tǒng)配置就行，系統(tǒng)配置就是會(huì)影響你以后打開 VSCode 的使用，工作區(qū)則是當(dāng)前項(xiàng)目，也就是我們?cè)?settings.json 里面的配置！

至于 launch.json 的配置，那完全是 Python 啟動(dòng)的參數(shù)配置，你不同項(xiàng)目肯定會(huì)配置不同的端口的，這沒什么好說的。

還有其它一些有用的插件，等到需要的時(shí)候再去完善！

最后附帶一張 HTML 的樣張，這也是我選擇這個(gè)工具的原因，很喜歡這個(gè)主題??！