工程和界面—Webstorm入門指南 Webstorm中的工程-備

1.新建工程

「Quick Start」界面新建工程：

也能夠點擊頂部菜單欄「File」-> 「New Project」。

彈出以下界面：

「Location」指向想要建立的工程目錄（若是該目錄已經存在文件，會出現exist提示，不要緊，直接下一步便可）。

「Project Type」爲工程類型，應該理解爲工程模版更合適，默認爲空項目，Webstorm支持html五、bootstrap、NodeJs、express工程模版。

這裏咱們選擇流行的「Bootstrap」，點擊下一步後，Webstorm會自動從服務器拉取Bootstrap的代碼（源代碼）到工程目錄內。

Webstorm的工程缺陷在於沒辦法在一個界面中存在多個工程，再新建個工程，會打開個新的窗口，來回切換很是麻煩。

2.收藏夾功能

當工程目錄很龐大時，有些子目錄很常常打開，但層級又很深，這時候能夠把目錄添加到收藏夾裏面，好比：

（需命名下收藏列表名稱）

添加成功後，左側有個「Favorites」菜單：

3.工程其餘操做

包括關閉工程、打開最近工程、重命名工程、打開工程等，比較簡單，明河再也不累述。

Webstorm的主要界面

1.頂部菜單

包含全部IDE功能，後面的文章會講解到經常使用的功能項。

建議看下功能菜單上的快捷鍵。

2.目錄麪包屑

這個功能很是實用，能夠經過點擊目錄來尋找須要的文件，比打開工程界面來得節約空間，夠低碳。

3.工程界面

在Webstorm中用於查找文件的功能有不少，在工程界面界面中查找是最原始的，效率也是最差的，打開後還佔用代碼窗口面積。

建議使用「alt+1」來快速拆合工程界面。

4.構造器界面

在這個界面中，能夠快速查找js類的函數和對象，留意準確度跟你的註釋量息息相關（註釋須要符合jsdoc格式，這個後面會講道）。

5.todo界面

給代碼加todo註釋，是個很是好的習慣，好比提醒後面的維護者要注意些什麼，好比提醒往後的本身要優化這處的代碼等。

菜單項前面的6,，表示你可使用」alt+6″來快速拆合此界面。

給代碼加todo很簡單：// TODO why??相似這樣既可。

6.底部信息

數字區域表示的是光標位置，有個實用的技巧：點擊這個區域，能夠跳轉到指定行的代碼：

 

底部還能夠設置文件的編碼。

7.顯示代碼行數

右擊代碼界面左側邊框任意位置：

 

左側邊框還會有代碼版本變動標記，很是實用。

8.工程環境配置

 

往後明河會講解這部份內容。

9.隱藏邊欄菜單

點擊左底下的關閉按鈕。

10.快速拆合界面

可使用「alt+數字鍵」來快速拆合界面。

如何查看界面的數字鍵呢？

11.隱藏菜單和工具欄

點擊「View」

 

12.雙欄代碼界面

右擊代碼選項卡上的文件