CodeGym /課程 /Frontend SELF TW /使用 WebStorm

使用 WebStorm

Frontend SELF TW

等級 3 , 課堂 3

開放

6.1 IDE 介面的解析

我們來看看這裡有什麼。

1. 你的專案資料夾和檔案樹：

這裡顯示的是我們專案資料夾的內容 — web-storm-10.

我特意創建了一個檔案，讓你更容易理解這裡的一切。在下一堂課上，你也會這樣做。

2. 當前打開的檔案：

這就是 index.html 檔案的內容，代碼語法被高亮顯示。

3. 頂部的主菜單：

右上角的有用按鈕：

4. 左邊的側邊菜單：

這裡有一些有用的按鈕。我們尤其會對 Terminal 按鈕感興趣。

5. 狀態欄：

狀態欄左邊顯示的是當前打開檔案的路徑。右邊是它的編碼：CRLF, UTF-8。很快你就會完全掌握這一切。

一般的專案由顯示在左側面板中的檔案組成。這些檔案可以分為四個部分。

1. HTML 檔案。

這些檔案的副檔名是 .html，而 WebStorm 用兩個箭頭的綠色圖標標記它們。這裡只有一個這樣的檔案 — index.html

這些檔案的副檔名是 .js，WebStorm 用黃色圖標標記它們。目前這張截圖中沒有這樣的檔案。

2. CSS 樣式檔案。

這些檔案的副檔名是 .css，WebStorm 用藍色圖標標記它們。目前這張截圖中沒有這樣的檔案。

3. 靜態媒體檔案。這是指包含資料但不含代碼的檔案。可以是文字檔、圖片、媒體檔等。目前在我們的專案中沒有。

4. 外部函式庫 (External libraries)。 現在我們的專案中沒有它們，但當你下載後，WebStorm 會在這裡顯示。

在 WebStorm 中，你可以直接使用操作系統的命令行。在 Linux 和 MacOS 中，命令行通常被稱為終端 (Terminal)，所以在 WebStorm 中也這樣叫。雖然這其實並不是 WebStorm 的奇思妙想，而是程式員中已經確立的名稱。

要開啟 Terminal，你需要按下側邊菜單中的終端按鈕：

應該會出現這樣的窗口：

在這個窗口中你可以輸入你的操作系統命令。我們則對其中一個命令感興趣。

讓我們查找當前的 Windows 版本。這樣做需要輸入：

ver

這是我得到的結果：

如果你出現錯誤，先輸入命令「cmd」，然後再輸入命令「ver」。

這是個應用程式，一個可嵌入至 Intellij IDEA 或 WebStorm 開發環境的特殊程式模組，可以讓你在其中處理 CodeGym 課程的作業。例如，編寫解答代碼，提交檢查，與"預設"解答進行比較等。插件中作業的進度將與你的 CodeGym 帳戶同步，因此它在網站和開發環境中看起來會相同。

你可以從 Jetbrains 市集下載 CodeGym 插件，直接在你的開發環境中。我們將在 WebStorm 的例子中展示步驟，但這些步驟也適用於 Intellij IDEA。

進入「設置」區域，Windows/Linux File - Settings，MacOS WebStorm - Preferences。如果沒有設置區域，打開任何專案或創建一個新的。
在出現的窗口中，在側邊菜單中選擇 Plugins 區域並開啟 Marketplace 標籤。在搜索欄中輸入 codegym
選擇插件並點擊 Install 按鈕。
重新啟動（Restart IDE）WebStorm，以開始使用插件。
你會看到一些改變的介面和上方水平面板上的登入帳戶按鈕。