腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

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

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

寫在前面的話

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

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

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

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

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

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

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

安裝配置 VSCode

【1】安裝 VSCode：

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

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

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

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

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

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

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

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

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

2. 打開項目：左上角文件 --> 打開文件夾

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

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

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

但是這樣主題這些并不會直接就加載出來，需要手動選擇：

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

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

進(jìn)入設(shè)置后可以可以點擊這個代碼符號將我們的配置貼進(jìn)去，當(dā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á)到的效果如下圖：

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

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

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

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

5. 運行我們的項目：

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

在回到我們的項目，這時候會多了一個文件夾和兩個文件：

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

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

運行項目：

訪問測試：

安裝語法檢測和代碼格式化工具：

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

此時我們需要 pip 安裝我們需要的包：

pip install pylint
pip install yapf
pip install pylint_django

在我們項目之前生成的 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ù)雜，但是總的來說還是不錯的，很多東西都是第一次配置就行了，像主題風(fēng)格這些都是一次配置終身使用。新開項目也就配置一些環(huán)境而已。

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

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

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

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