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. 開發小技巧-網址