使用 本機 web browser test VM xammp web site
1. 本機 修改 C:\Windows\System32\drivers\etc\hosts
增加
127.0.0.1
web108b.wda.edu.tw
192.168.67.123
web108b.wda.edu.tw
2. VM modify D:\xampp\apache\conf\extra\httpd-vhosts.conf
<VirtualHost *:80>
##ServerAdmin webmaster@dummy-host2.example.com
DocumentRoot "/xampp/htdocs/web108b"
ServerName web108b.wda.edu.tw
##ErrorLog "logs/dummy-host2.example.com-error.log"
##CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>
3. 建立 html folder
D:\xampp\htdocs\web108b
------------ VM <<< >>> 本機 連線 test ---------------------
** VM 裝 -----
* VM 的 xampp location
DocumentRoot "/xampp/htdocs/web108b"
ServerName web108b.wda.edu.tw
* 本機的 system 32
192.168.67.123
web108bvm.wda.edu.tw ?? 兩個都寫 ?? OK
* <result 本機連 vm ok -- chrome>
** 本機裝的 相反----
本機 的 xampp location ;; (注意 資料夾只能放在 /xampp-web108b/htdocs/ 底下)
DocumentRoot "/xampp-web108b/htdocs/user108b"
ServerName web108b.wda.edu.tw
VM的 system 32
192.168.67.23
web108b.wda.edu.tw ?? 兩個都寫 ?? OK
----------------------------------
=========joey- vs code - settings.json============
{
"extensions.autoUpdate": false, //禁止擴展更新
"extensions.ignoreRecommendations": true,
"update.mode": "none", //禁止軟件版本更新
// 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
"diffEditor.ignoreTrimWhitespace": true,
// 設定預設存檔時不做格式化,使用分別啟動
"editor.formatOnSave": false,
// 分別啟用指定語言
"[php]": {
"editor.formatOnSave": true,
},
"[css]": {
"editor.formatOnSave": true
},
"[html]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": true
},
// 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
"editor.formatOnPaste": true,// 貼上程式碼時會自動幫你排版(縮排)
"editor.formatOnSaveTimeout": 1250,
"editor.cursorStyle": "block",
"editor.fontFamily": "Fira Code", //"'Courier New'"
// - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
"editor.wordWrap": "on",//每行如果超出視圖範圍就自動換行顯示。
"editor.lineHeight": 28,
"editor.fontLigatures": true,
"editor.fontSize": 16, // 字體大小
"editor.lineNumbers": "on",
"editor.minimap.enabled": false, // 關掉右側滑動預覽檔
"editor.renderIndentGuides": false,
//設定的 Snippet 放在最上面顯示
"editor.snippetSuggestions": "top",
//1 tab = 4 spaces
"editor.tabSize": 4,
"editor.rulers": [
120
],
//用ctrl+滑鼠滾輪去放大縮小使
"editor.mouseWheelZoom": true,
//"editor.fontWeight": "300", // Light
//"editor.fontWeight": "400", // Regular
//"editor.fontWeight": "500", // Medium
"editor.fontWeight": "600",
"editor.quickSuggestions": { //智慧提示
"other": true,
"comments": true,
"strings": true
},
"workbench.colorTheme": "Seti Monokai", //Solarized Dark、Monokai
"workbench.iconTheme": "vscode-icons", //增加文件夾圖示。 vscode-great-icons、 要先下載vscode-icons套件(後面會提到)
"window.zoomLevel": 1,
// Windows 的換行是 \r\n (CRLF)，而 Linux 是 \n (LF)，會遇到 Windows 開發後放在 Linux 跑時會 error，為了讓事情簡單化就預設是 LF 吧，這是針對新增的，舊的可以從右下角去改變它
"files.eol": "\n",
"files.autoSave": "onFocusChange",
"files.autoSaveDelay": 3000,
//設定其它副檔名的檔案跟 php 是有關係的
"files.associations": {
"*.inc": "php",
"*.tpl": "html"
},
//新檔為 UTF8
"files.encoding": "utf8",
"files.trimTrailingWhitespace": true,
//------------------------------ HTML CSS SUPPORT ------------------------------//
"css.fileExtensions": [
"css",
"scss"
],
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/ 4.0.0-alpha.6/css/bootstrap.min.css"
],
//============================== VSCode Browser Sync ==============================//
"browserSync.config": {
"browser": [
"chrome",
],
"files": [
"*.html",
"*.log",
"*.php",
"/css/*.css",
"/js/*.js"
],
"codeSync": true
},
//============================== LiveServer For Web ================================//
"liveServer.settings.useWebExt": true,
"liveServer.settings.host": "localhost",
"liveServer.settings.port": 5500,
}
===========joey==================
