使用 Visual Studio Code（VSCode）搭建簡單的 Python + Django 開發環境

 

 

寫在前面的話

 

做爲有個 Python 菜逼，以前一直用的 Pycharm，可是在主題這一塊怎麼調整都感受要麼太騷，看起來不舒服，要麼就是簡直不能看。彷佛用大 JB 公司 IDE 的人彷佛都不怎麼重視主題這個東西。

我我的是那種「喜新厭舊」的，因此看久了 Pycharm 就感受很難受了，再加上 Pycharm 太笨重了，就換成了之前短期用過的 VSCode，之前沒用是懶得折騰插件，如今閒下來準備折騰一下！

這裏放一張我如今的 Pycharm 的配色主題：

 

閒話少說，進入正題！ 

 

 

建立 Django 測試項目

 

這裏說明一下，配置的是 Python + Django 的環境，因此我會重新建一個測試的 Django 項目開始，算是總體流程再走一遍！  

 

【1】新建一個 Django 項目： 注意，我這裏 Python 使用的是 virtualenv 爲項目創建的虛擬環境，沒用過的照着這個步驟作就行，須要注意那個切換到咱們新環境的命令就行

 

 

安裝配置 VSCode

 

【1】安裝 VSCode：

 

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

 

根據本身電腦對應的操做系統下載對應的版本便可，至於安裝過程也和通常的軟件同樣，沒什麼特別須要注意的地方！

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

 

 這時候就須要咱們根據須要安裝對應的插件了，這也是整個 VSCode 最出彩的地方。須要啥安裝啥，而不用全家桶安裝！

 

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

這裏會有不少推薦的插件，也能夠看到咱們安裝的和禁用的插件。

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

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

這時候已經變成了中文界面，咱們能夠打開剛剛咱們建立的項目了！

 

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

這時候咱們會發現兩個問題，一個是默認主題並很差看，另外一個是文件沒有圖標進行區分，因此這時候咱們就須要進行配置！

 

3. 文件圖標和主題美化： Material Icon Theme 和 Son of Obsidian Theme

安裝完成後點擊插件右下角的從新載入就好了！ 

可是這樣主題這些並不會直接就加載出來，須要手動選擇：

根據左下角有個設置，裏面能夠進行不少設置：

 

我這裏將咱們的配置貼出來：

進入設置後能夠能夠點擊這個代碼符號將咱們的配置貼進去，固然你也能夠本身一項一項的配置，只要你不怕麻煩：

{
    "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",
}

 

粘貼到右邊保存便可：

 

最終達到的效果以下圖：

此時再看，就會發現代碼有了舒服的配色，並且文件夾和文件也有了屬於本身的圖標，固然你也能夠到網上選擇你喜歡的風格，反正我是挺喜歡這個的。

不少之前用 sublime 的 monokai，在 VSCode 裏面也是有 Monokai 的，我我的是看厭了！

 

4. 接下來即是安裝真正協助咱們開發的插件： 

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

 

5.  運行咱們的項目：

 

 配置 Python 環境：我點擊添加配置後悔在右邊彈出個框，選擇 Python 便可，這樣就能打開一個配置文件！

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

 

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

 

打開 launch.json 文件配置 Django 啓動的參數：找到 Django 的項，我這裏給他指定了一個端口，你也能夠加其餘

 

運行項目：

 

訪問測試：

 

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

在運行的終端中咱們直接添加 Power shell 就能夠至關於咱們在 windows 命令行直接操做命令了，並且是在虛擬 Python 環境下，很方便： 

 

此時咱們須要 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 就算配置完成了，雖然還有一些小的不足，可是後續能夠根據本身的需求慢慢的修復！總的來講仍是很香的！ 

 

 

小結

 

看起來過程有些複雜，可是總的來講仍是不錯的，不少東西都是第一次配置就好了，像主題風格這些都是一次配置終身使用。新開項目也就配置一些環境而已。

使用 VSCode 只要區分一些工做區配置和系統配置就行，系統配置就是會影響你之後打開 VSCode 的使用，工做區則是當前項目，也就是咱們在 settings.json 裏面的配置！

至於 launch.json 的配置，那徹底是 Python 啓動的參數配置，你不一樣項目確定會配置不一樣的端口的，這沒什麼好說的。

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

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