入行較淺,據我瞭解的,很多的前端都使用的 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
,就如下圖示:

