https://ericchung24.github.io/blog/tags/%E5%B7%A5%E5%85%B7%E5%AE%89%E8%A3%9D/Recent content in 工具安裝 on EricChung的程式勇者村Hugo -- gohugo.iozh-twSat, 27 Dec 2025 00:00:00 +0000https://ericchung24.github.io/blog/p/%E6%96%B0%E6%89%8B%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%AE%89%E8%A3%9D-vs-code-%E6%89%93%E9%80%A0%E4%BD%A0%E7%9A%84%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83/Sat, 27 Dec 2025 00:00:00 +0000https://ericchung24.github.io/blog/p/%E6%96%B0%E6%89%8B%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%AE%89%E8%A3%9D-vs-code-%E6%89%93%E9%80%A0%E4%BD%A0%E7%9A%84%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83/<img src="https://code.visualstudio.com/opengraphimg/opengraph-home.png" alt="Featured image of post 新手第一步：安裝 VS Code 打造你的網頁開發環境" /><p>在開始寫 HTML 之前，你需要一個好用的「筆記本」來寫程式。目前全球開發者最推薦的工具就是 <strong>Visual Studio Code (簡稱 VS Code)</strong>。它免費、快速，而且功能非常強大。</p> <hr> <h2 id="1-下載-vs-code">1. 下載 VS Code </h2><p>首先，請前往 VS Code 的官方網站下載安裝檔。</p> <ul> <li><strong>官方網站：</strong> <a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener" >https://code.visualstudio.com/</a></li> </ul> <p>進入官網後，點擊大大的 <strong>&ldquo;Download&rdquo;</strong> 按鈕（系統會自動偵測你是 Windows 還是 Mac）。</p> <hr> <h2 id="2-安裝步驟-windows--mac">2. 安裝步驟 (Windows / Mac) </h2><h3 id="windows-使用者">Windows 使用者： </h3><ol> <li>執行下載的 <code>.exe</code> 檔。</li> <li>點選「我同意合約」。</li> <li><strong>重要：</strong> 在「選取額外工作」畫面時，建議勾選 <strong>「將 [以此 Code 開啟] 動作新增到 Windows 檔案總管內容功能表」</strong>。這樣你之後對著資料夾點右鍵就能直接開啟，非常方便。</li> <li>點擊「安裝」直到完成。</li> </ol> <h3 id="mac-使用者">Mac 使用者： </h3><ol> <li>下載完成後會得到一個 <code>.zip</code> 檔。</li> <li>解壓縮後，將 <strong>Visual Studio Code</strong> 圖示拖曳到你的 <strong>「應用程式 (Applications)」</strong> 資料夾即可。</li> </ol> <hr> <h2 id="3-環境中文化-繁體中文">3. 環境中文化 (繁體中文) </h2><p>VS Code 預設是英文介面，新手可以先安裝中文插件來降低學習門檻。</p> <ol> <li>打開 VS Code。</li> <li>點擊左側圖示列最下方的 <strong>「擴充功能 (Extensions)」</strong> 圖示（長得像積木）。</li> <li>在搜尋框輸入：<code>Chinese</code>。</li> <li>找到 <strong>&ldquo;Chinese (Traditional) Language Pack for Visual Studio Code&rdquo;</strong> 並點擊 <strong>Install</strong>。</li> <li>安裝完成後，右下角會出現重啟通知，點擊 <strong>&ldquo;Restart&rdquo;</strong> 即可切換為中文。</li> </ol> <hr> <h2 id="4-建立你的第一個網頁檔案">4. 建立你的第一個網頁檔案 </h2><p>安裝好後，我們來動手試試看：</p> <ol> <li>在桌面建立一個新的資料夾，取名為 <code>my-web</code>。</li> <li>回到 VS Code，點擊 <strong>「檔案」&gt;「開啟資料夾」</strong>，選擇剛才建立的 <code>my-web</code>。</li> <li>點擊左側「檔案總管」旁的新增檔案圖示，輸入檔名：<code>index.html</code>。</li> <li>在右側空白處輸入 <code>!</code> 然後按下 <strong>Tab 鍵</strong>，VS Code 會自動幫你產生標準的 HTML 骨架！</li> </ol> <hr> <h2 id="5-推薦新手的必裝套件">5. 推薦新手的必裝套件 </h2><p>除了中文化之外，這兩個套件能讓你寫網頁的效率提升 200%：</p> <ul> <li><strong>Live Server</strong>：讓你改完程式碼存檔後，瀏覽器會自動重新整理，即時看到結果。</li> <li><strong>Auto Close Tag</strong>：輸入開頭標籤後，自動幫你補上結尾標籤。</li> </ul> <hr> <h2 id="結語">結語 </h2><p>恭喜你！你已經準備好開發環境了。現在你的電腦已經不是一台只能追劇的機器，而是能創造出無限可能網頁的工具。</p> <p><strong>下一步建議：</strong> 既然環境裝好了，快去學習 <strong>HTML 基礎標籤</strong>，試著在 <code>index.html</code> 寫下你的第一行標題吧！</p>