SoftWave / 使用Visual Studio Code 作為開發環境

Visual Studio Code是個跨語言介面的程式編輯器

以下是維基百科的介紹:

Visual Studio Code是一個是一個由微軟開發,同時支援Windows 、 Linux和macOS等操作系統且開放原始碼的程式碼編輯器,它支援測試,並內建了Git 版本控制功能,同時也具有開發環境功能,例如代碼補全(類似於 IntelliSense)、代碼片段和代碼重構等。該編輯器支援用戶個性化組態,例如改變主題顏色、鍵盤捷徑等各種屬性和參數,同時還在編輯器中內建了擴充程式管理的功能。

 

微軟Visual Studio Code官網:https://code.visualstudio.com/

原本不同程式語言因為自己不同的學習管道,參考書本或者是實體課程講師所用的編輯器都不盡相同

但總覺得裝很多軟體很不方便,而且現在也比較不需要為了課程來配合使用一樣的編輯器

也希望建立自己的學習模式,於是嘗試使用 Visual Studio Code 整合目前在研究的Python、Javascript、Php等程式語言的編寫環境

在網路上參考了很多不同教學來設定如何使用不同的程式語言,也裝了一大堆也不知道怎麼用的外掛,對於操作介面如何使用其實也是困擾的事~~

同一主題通常要找好多篇教學才能湊齊解決問題的資訊量,不過真的很多細節如果會就是會了,很難鉅細靡遺地記錄下來

總之,就一步一步慢慢來吧,盡可能留下自己的學習足跡


[使用Visual Studio Code 作為Python開發環境]

1.安裝 Python的函式庫

2.指定CMD的環境參數

1) Python.exe所在的目錄路徑

2) Scripts的檔案路徑

3.執行

 

備註

使用Run Coder中文亂碼解決方式-Vscode之run coder插件 输出乱码问题-網址

參考

[Python] VS Code 執行python程式與debug 設定教學-網址

Python 在VS Code debug Python程式-網址

使用VS code建置環境並執行python程式-網址

 


[使用Visual Studio Code 作為Php開發環境]

1.安裝XAMPP 啟動 Apache

2.VS code 設定 php.exe的路徑

3.VS code開啟要編輯的php檔案,檔案必須存在XAMPP的htdocs資料夾內

4.在瀏覽器預覽php檔,預設網址為http://127.0.0.1

 

參考

〔筆記〕使用vscode達到 php 運行 live-server ,存檔即時變更頁面-網址

[開發工具] 使用 VS Code + XAMPP 進行 PHP 的開發與Debug-網址

◎用Live Server會連到localhost:5500,可以看到工作資料夾的網頁頁面,但是點擊Php檔,會變成下載檔案

解決方式是回到Apache的localhost http://127.0.0.1,才能正常顯示

所以還是要把檔案存在XAMPP的htdocs資料夾內比較方便

備註

Xdebug安裝對應版本與配置-網址


[使用Visual Studio Code 作為Javascript開發環境]

1.html裡的javascript

1) 在瀏覽器預覽執行情況,VS code需安裝 Live-server

2) Chrome需要安裝Live-server外掛

3) 預覽網站http://127.0.0.1:5500的根目錄為目前所在的資料夾

4) 執行 按F5

 

2.單獨的javascript

1) 安裝 node.js

2) 重新開啟Visual Studio Code

3) 執行 按F5
 

參考

利用VSCode開發JavaScript-網址

使用VS Code開發Node.js-網址

安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效-網址

 


[使用Visual Studio Code 作為Django開發環境]

1.安裝 Python的函式庫,指定CMD的環境參數

這是Python的設定步驟,以下的步驟等於是在Python內安裝Django的虛擬環境

2.Python安裝 virtualenv: pip install virtualenv

3.新增Django專案資料夾:virtualenv 專案資料夾(想要建立的虛擬環境名稱)

4.啟動虛擬環境,進入專案資料夾執行activate.bat: 專案資料夾\Scripts\activate.bat

4.進入虛擬環境,開始編輯

5.啟動django內建伺服器: python manage.py runserver

6.可以透過瀏覽器預覽網頁狀態,預設網址為 http://127.0.0.1

7.退出虛擬環境指令: deactivate

整體來說,就是在Visual Studio Code將CMD當成終端機使用

 

參考

Django學習紀錄 3.Django介紹與安裝 4.建置與環境設定[使用VS code作為開發環境]-網址

Django學習紀錄 2.Python的模組與套件[附virtualenv虛擬環境使用教學]-網址


外掛參考

VSCode – 好用插件 feat. 開發小技巧-網址


後記

後來發現只要安裝 Code runner外掛程式,就能執行大多數的程式語言,也不用特別指定檔案或者在終端機,執行結果也會自動加上色彩,蠻方便的外掛