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。
直接找到源文件，使用瀏覽器打開。如下:
還有一種方法就是本地模擬一個服務器。點擊鼠標右鍵，然后選擇Open with Live Server。可以運行當前源碼。
<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.總結
本篇安裝是主要講解vscode安裝和測試，能夠快速學習如何使用vscode。關于vscode還有更多功能，歡迎評論區回復。歡迎關注，收藏，轉發，分享。
