0.引言
本篇文章主要講解vscode安裝和測試，主要是利用vscode可以模擬本地伺服器，可以直接寫一些簡單的前端demo，便於演示。
1.vscode安裝
vscode官網連線地址：
https://code.visualstudio.com/
vscode主介面如下:
vscode下載連結：
https://vscode.cdn.azure.cn/stable/1b8e8302e405050205e69b59abb3559592bb9e60/VSCodeUserSetup-x64-1.31.1.exe安裝步驟:
2.安裝成功後
安裝後的vscode主介面:
3.安裝外掛
Prettier - Code formatter：使用 Prettier 來統一程式碼風格，當儲存 HTML/CSS/JavaScript 檔案時，它會自動調整程式碼格式。
安裝Live Server
在本地開發環境中，實時重新載入(reload)頁面。如下介面:
安裝完成後，這裡會變成如下：
4.建立檔案和測試
選擇工具欄上的file->Open Folder，建立目錄，然後在該目錄下建立一個html網頁。建立一個New File為first_html。
直接找到原始檔，使用瀏覽器開啟。如下:
<html> <body> <h1>標題1 </h1> <p>第一個段落</p> <p>我的第一個HTML頁面</p> </body></html>這就是前面的那個外掛起作用了。
推薦一個HTML入門學習教程:
https://www.runoob.com/html/html-tutorial.html
JavaScript入門學習教程：https://www.runoob.com/js/js-tutorial.html
<!DOCTYPE html><html> <body> <h2>Body中的javaScript</h2> <p id="demo">一個段落</p> <button type="button" onclick="myFunction()">試一試</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落已被更改"; } </script> </body></html>執行結果:
5.總結
最新評論