入行較淺，據我瞭解的，很多的前端都使用的 VScode，免費開源，各種自定義配置，體驗很好。因為一開始接觸前端時，用的就是 webstorm，之後嘗試過 VScode，還是不太適應。
所以，這次想介紹一下測試和收集到的，關於 webstorm 的一些設定。
所有截圖均是mac下的webstorm，與windows的差別幾乎很小。
希望可以幫助到大家。
1，常用基礎配置
webstorm 也是一樣可以引入各種 jar 包，來實現不同的主題。
也正是因為找不到自己心儀的主題，所以只能自己慢慢進行測試，自定義。
1.1，編輯區域字型
使用這個字型 Courier New，是因為英文和中文的標點符號，非常容易區分。
1.2，編輯區域背景色
設定的是護眼色
1.3，滑鼠點到某一行的行色
1.4，滑鼠選中某一段程式碼的背景色
1.5，控制檯的設定
這裡設定的字型，預設跟隨編輯區域的字型設定。
背景色，也是護眼色。
1.6，程式碼中註釋的字型顏色（注意是設定Foreground）
- Block comment 多行註釋的字型顏色
- Doc Comment 文件註釋的字型顏色（一般用不到）
- Line comment 單行註釋的字型顏色
2，輔助設定
2.1，表示顏色的css程式碼上，直接顯示其背景色。
直接看圖演示更容易理解。（雞肋）
2.1，方法之間會有分割線。
經測試，在框架中如React中，也是適用的，偶爾會有點不準。
上面那個 show line numbers 就是顯示程式碼左側的行號的（預設是有的）。
2.3，忽略首字元匹配
預設是First letter。
舉個例子，如果想使用 Math物件的一些方法，在鍵入 Math 時，想要有提示，第一個 M 必須大寫，才會為你提示Math
設定為 None 後，諸如此類的需要首字母大寫才能匹配出提示的，都可以直接寫小寫字母就會有提示。
2.4，多行顯示
（預設是勾選的）取消勾選，一行顯示不下時，會多行顯示。
多行效率比單行高，因為單行會隱藏超過介面部分 Tab，這樣找檔案不方便。
3，自定義程式碼模板
如下定義表示：
鍵入 con ，敲 tab 鍵，就會輸出console.log()，並且游標在括號內。
設定步驟：
- 點選右側加號
- 對比上面所示的例子，對應位置自己輸入。
- 點選右下方的Change，來確定該模板使用在哪裡。
- apply，ok 即可。
$end$，是已經定義好的變數，代表游標的位置。 也可以自定義變數，在如上圖示 右邊的 Edit variables。
如下例子配置，鍵入 fori，就如下圖示：