【前端開發】Webpack (二) Vscode安裝配置
安裝完所需要的程序，接下先準備配置VSCODE
(一)安裝套件
開啟Vscode以後，在左邊最下面的icon，點擊後可以看到模組選單。
在這邊我們需要安裝這三個套件 (視個人習慣安裝)
在上方的搜尋欄，搜尋以後進行安裝
(1)Live Server (輕量級調適用webserver)
這是vscode自帶的webserver，調適很方便，強烈建議安裝。安裝完以後，右下角會出現一個「Live server」的標誌。
之後要測試，只需要點那個「Live server」的按鈕就會直接開啟page。
安裝完以後，按下 「Ctrl+Shift+P」 呼叫命令選擇區
輸入"settings" 找出 「open settings」 這個選項
開啟後會看到settings.json
將內文添加
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.host": "127.0.0.1",
"liveServer.settings.port": 8080, //設定本地PORT
"liveServer.settings.root": "./dist/", //設定根目錄
"liveServer.settings.CustomBrowser": "chrome", //設置默認瀏覽器
"liveServer.settings.donotVerifyTags":true
(2)Chinese Language Pack (中文語言包)
語言包安裝完以後，按下 「Ctrl+Shift+P」 呼叫命令選擇區輸入"config" 找出 「config language」 這個選項
將locale.json內的內容，"locale"的值更改為"zh-tw"
之後關閉重啟就會生效了。
(3)Matrtial Icon Theme (圖示界面)
這個套件能夠美化檔案的icon，變得更容易識別。個人滿推薦。
安裝完套件以後，按下 「Ctrl+Shift+P」 呼叫命令選擇區
輸入"icon" 找出 「Material Icons:Active」 這個選項
選取後，再重啟vscode就會自動生效了。
(二)IDE配置
喜好設定 => 設定
就可以開啟設定頁面，裡面有很多設定可以自訂。像是字體大小等等。
張貼留言